Enhance mobile navigation functionality with safety checks and icon toggle improvements

Author: peterbenoit

docs/assets/css/styles.css

@@ -698,25 +698,83 @@ input[type="color"] {
 	.footer-column {
 		width: 100%;
 	}
-}
 
-@media (max-width: 576px) {
-	.hero-actions {
+	/* Fix for table overflow */
+	.docs-table {
+		display: block;
+		width: 100%;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	/* Fix for code examples overflow */
+	.code-block {
+		overflow-x: auto;
+	}
+
+	/* Make tabs scroll horizontally if needed */
+	.tabs {
+		display: flex;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	/* Fix for demo controls */
+	.control-row {
 		flex-direction: column;
-		align-items: center;
+	}
+
+	.control-item {
+		width: 100%;
+		margin-bottom: 1rem;
+	}
+
+	.hero-actions {
+		flex-wrap: wrap;
 		gap: 1rem;
 	}
 
 	.btn+.btn {
 		margin-left: 0;
 	}
 
+	/* Improve feature grid */
+	.features {
+		grid-template-columns: 1fr;
+	}
+
+	/* Improve steps layout */
+	.steps {
+		flex-direction: column;
+	}
+
+	.step {
+		width: 100%;
+		margin-bottom: 2rem;
+	}
+}
+
+/* Further optimizations for very small screens */
+@media (max-width: 480px) {
+	.section-title {
+		font-size: 1.75rem;
+	}
+
+	.section-subtitle {
+		font-size: 1rem;
+	}
+
 	.use-cases {
 		grid-template-columns: 1fr;
 	}
 
-	.docs-table {
-		font-size: 0.8rem;
+	.footer-content {
+		flex-direction: column;
+	}
+
+	.footer-column {
+		width: 100%;
+		margin-bottom: 2rem;
 	}
 }
 
@@ -729,8 +787,48 @@ input[type="color"] {
 	font-size: 1.5rem;
 	cursor: pointer;
 	padding: 0.5rem;
+	position: relative;
+	z-index: 1000;
+}
+
+.overlay {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 998;
+}
+
+.overlay.active {
+	display: block;
 }
 
-.mobile-nav-toggle:focus {
-	outline: none;
+/* Documentation improvements - Fix table overflow */
+.docs-table {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+	margin: 2rem 0;
+	border: 1px solid var(--border-color);
+	border-radius: var(--radius);
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* Make all tables responsive at all viewport sizes */
+@media (max-width: 1000px) {
+	.docs-table {
+		display: block;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.parameter-table {
+		display: block;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
 }

docs/assets/js/mobile-nav.js

@@ -7,19 +7,25 @@ document.addEventListener('DOMContentLoaded', function () {
 	const overlay = document.querySelector('.overlay');
 	const navLinkItems = document.querySelectorAll('.nav-link a');
 
+	if (!mobileNavToggle || !navLinks || !overlay) {
+		return; // Safety check in case elements don't exist
+	}
+
 	// Function to toggle the mobile menu
 	function toggleMobileNav() {
 		navLinks.classList.toggle('active');
 		overlay.classList.toggle('active');
 
 		// Toggle between menu and close icons
 		const icon = mobileNavToggle.querySelector('i');
-		if (icon.classList.contains('fa-bars')) {
-			icon.classList.remove('fa-bars');
-			icon.classList.add('fa-times');
-		} else {
-			icon.classList.remove('fa-times');
-			icon.classList.add('fa-bars');
+		if (icon) {
+			if (icon.classList.contains('fa-bars')) {
+				icon.classList.remove('fa-bars');
+				icon.classList.add('fa-times');
+			} else {
+				icon.classList.remove('fa-times');
+				icon.classList.add('fa-bars');
+			}
 		}
 	}
 
@@ -43,8 +49,11 @@ document.addEventListener('DOMContentLoaded', function () {
 		if (window.innerWidth > 768 && navLinks.classList.contains('active')) {
 			navLinks.classList.remove('active');
 			overlay.classList.remove('active');
-			mobileNavToggle.querySelector('i').classList.remove('fa-times');
-			mobileNavToggle.querySelector('i').classList.add('fa-bars');
+			const icon = mobileNavToggle.querySelector('i');
+			if (icon) {
+				icon.classList.remove('fa-times');
+				icon.classList.add('fa-bars');
+			}
 		}
 	});
 });