Improve documentation responsiveness for all screen sizes

Author: ZENTAXA Team

documentation.html

@@ -15,12 +15,20 @@
         }
 
         .doc-title {
-            font-size: 2.5rem;
+            font-size: clamp(2rem, 5vw, 2.5rem);
             font-weight: 700;
             margin-bottom: 1rem;
             background: linear-gradient(to right, #fff, #94a3b8);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            line-height: 1.2;
+        }
+
+        .doc-layout {
+            display: grid;
+            grid-template-columns: 250px minmax(0, 1fr);
+            gap: 4rem;
+            align-items: start;
         }
 
         .doc-nav {
@@ -30,10 +38,17 @@
             border: 1px solid var(--border);
             border-radius: var(--radius);
             padding: 1.5rem;
+            max-height: calc(100vh - 4rem);
+            overflow-y: auto;
+            /* Reset generic nav styles from main.css */
+            height: auto;
+            display: block;
         }
 
         .doc-nav ul {
             list-style: none;
+            padding: 0;
+            margin: 0;
         }
 
         .doc-nav li {
@@ -43,14 +58,20 @@
         .doc-nav a {
             color: var(--text-muted);
             font-size: 0.95rem;
+            display: block;
+            padding: 0.25rem 0;
         }
 
         .doc-nav a:hover, .doc-nav a.active {
             color: var(--primary);
         }
 
+        .doc-content {
+            min-width: 0; /* Prevent grid blowout */
+        }
+
         .doc-content h2 {
-            font-size: 1.8rem;
+            font-size: clamp(1.5rem, 3vw, 1.8rem);
             margin-top: 3rem;
             margin-bottom: 2rem;
             color: var(--text);
@@ -59,9 +80,9 @@
         }
 
         .doc-content h3 {
-            font-size: 1.4rem;
-            margin-top: 4rem;
-            margin-bottom: 1.5rem;
+            font-size: clamp(1.2rem, 2.5vw, 1.4rem);
+            margin-top: 2.5rem;
+            margin-bottom: 1rem;
             color: var(--text);
         }
 
@@ -81,9 +102,32 @@
             margin-bottom: 0.5rem;
         }
 
+        /* Responsive Code Blocks */
+        pre {
+            background: var(--surface);
+            padding: 1rem;
+            border-radius: var(--radius);
+            border: 1px solid var(--border);
+            overflow-x: auto;
+            margin-bottom: 1.5rem;
+            max-width: 100%;
+        }
+
+        code {
+            font-family: var(--font-mono);
+            font-size: 0.9em;
+        }
+
+        /* Responsive Tables */
+        .table-container {
+            overflow-x: auto;
+            margin-bottom: 1.5rem;
+        }
+
+        /* Feature Grid Responsive */
         .feature-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
             gap: 1.5rem;
             margin-top: 1.5rem;
         }
@@ -148,36 +192,52 @@
             color: var(--primary);
         }
 
-        .doc-layout {
-            display: grid;
-            grid-template-columns: 250px minmax(0, 1fr);
-            gap: 4rem;
-            align-items: start;
-        }
-
-        .doc-nav {
-            position: sticky;
-            top: 2rem;
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: var(--radius);
-            padding: 1.5rem;
-            max-height: calc(100vh - 4rem);
-            overflow-y: auto;
-            /* Reset generic nav styles from main.css */
-            height: auto;
-            display: block;
-        }
-
-        @media (max-width: 768px) {
+        /* Mobile Responsive Adjustments */
+        @media (max-width: 900px) {
             .doc-layout {
                 grid-template-columns: 1fr;
                 gap: 2rem;
             }
+
             .doc-nav {
                 position: relative;
                 top: 0;
                 margin-bottom: 2rem;
+                max-height: 300px;
+            }
+            
+            .container {
+                padding-left: 1.25rem;
+                padding-right: 1.25rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .doc-header {
+                padding: 1.5rem 0;
+            }
+            
+            .feature-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .step-list li {
+                padding-left: 0;
+                margin-top: 3rem;
+            }
+            
+            .step-list li::before {
+                position: relative;
+                margin-bottom: 0.5rem;
+            }
+            
+            dl {
+                grid-template-columns: 1fr !important;
+                gap: 0.5rem !important;
+            }
+            
+            dt {
+                margin-top: 1rem;
             }
         }
     </style>