Merge pull request #3 from rahulapjs/patch

responsive design issues fixes

Author: zccott

frontend/src/App.css

@@ -1,16 +1,19 @@
 .app {
   min-height: 100vh;
   padding: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .main-content {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 var(--spacing-md);
+  padding: 0 1rem;
+  width: 100%;
 }
 
 @media (max-width: 768px) {
   .main-content {
-    padding: 0 var(--spacing-sm);
+    padding: 0 0.75rem;
   }
 }

frontend/src/components/Header.css

@@ -1,44 +1,61 @@
 .header {
     position: sticky;
-    top: 1.5rem;
-    margin: 1.5rem auto;
+    top: 1rem;
+    margin: 1rem auto;
     max-width: 1200px;
-    padding: 1rem 2rem;
+    padding: 0.75rem 1.5rem;
     z-index: 1000;
     border-radius: var(--radius-full) !important;
     background: rgba(255, 255, 255, 0.03) !important;
     border: 1px solid rgba(255, 255, 255, 0.05) !important;
+    width: calc(100% - 2rem);
 }
 
 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
 }
 
 .logo-section {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
+    min-width: 0;
+    /* Allow shrinking */
 }
 
 .logo-icon {
-    width: 42px;
-    height: 42px;
+    width: 38px;
+    height: 38px;
     background: linear-gradient(135deg, var(--royal-blue), var(--accent-glow));
-    border-radius: 12px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
+    flex-shrink: 0;
+}
+
+.logo-icon svg {
+    width: 24px;
+    height: 24px;
+}
+
+.logo-text {
+    min-width: 0;
 }
 
 .logo-text h1 {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .ai-badge {
@@ -49,7 +66,7 @@
 }
 
 .app-subtitle {
-    font-size: 0.75rem;
+    font-size: 0.65rem;
     color: var(--text-muted);
     font-weight: 500;
     text-transform: uppercase;
@@ -59,18 +76,56 @@
 
 .header-nav {
     display: flex;
-    gap: 0.8rem;
+    gap: 0.5rem;
+}
+
+.header-nav .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    white-space: nowrap;
+}
+
+.header-nav .btn svg {
+    width: 16px;
+    height: 16px;
 }
 
 @media (max-width: 768px) {
     .header {
-        top: 1rem;
-        padding: 0.8rem 1.2rem;
-        margin: 1rem;
+        top: 0.5rem;
+        padding: 0.6rem 1rem;
+        margin: 0.5rem auto;
         border-radius: var(--radius-md) !important;
+        width: calc(100% - 1rem);
     }
 
     .app-subtitle {
         display: none;
     }
+
+    .header-nav .btn span {
+        display: none;
+        /* Hide text, keep icons on very small screens if button text is long */
+    }
+}
+
+@media (max-width: 480px) {
+    .logo-text h1 {
+        font-size: 1.1rem;
+    }
+
+    .header-nav {
+        gap: 0.4rem;
+    }
+
+    .header-nav .btn {
+        padding: 0.5rem;
+        min-width: 36px;
+        height: 36px;
+    }
+
+    /* Just show icons in buttons on mobile to save space */
+    .btn-text {
+        display: none;
+    }
 }

frontend/src/components/Header.tsx

@@ -30,7 +30,7 @@ const Header: React.FC<HeaderProps> = ({ onSchemaView, onSchemaCreate }) => {
                         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                             <path d="M12 5v14M5 12h14" />
                         </svg>
-                        Create Table
+                        <span className="btn-text">Create Table</span>
                     </button>
                     <button className="btn btn-secondary" onClick={onSchemaView}>
                         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -39,7 +39,7 @@ const Header: React.FC<HeaderProps> = ({ onSchemaView, onSchemaCreate }) => {
                             <rect x="14" y="14" width="7" height="7" rx="1" />
                             <rect x="3" y="14" width="7" height="7" rx="1" />
                         </svg>
-                        View Schema
+                        <span className="btn-text">View Schema</span>
                     </button>
                 </nav>
             </div>

frontend/src/components/QueryInput.css

@@ -1,6 +1,6 @@
 .query-input-container {
     max-width: 1200px;
-    margin: 0 auto 3rem;
+    margin: 0 auto var(--spacing-lg);
     padding: 3rem;
     position: relative;
     overflow: hidden;
@@ -82,6 +82,7 @@
     font-size: 0.95rem;
     cursor: pointer;
     transition: all 0.3s var(--transition);
+    text-align: left;
 }
 
 .example-chip:hover:not(:disabled) {
@@ -100,7 +101,35 @@
         font-size: 1.8rem;
     }
 
+    .section-subtitle {
+        font-size: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
     .submit-btn {
         width: 100%;
+        align-self: stretch;
+    }
+
+    .example-questions {
+        margin-top: 2rem;
+        padding-top: 1.5rem;
+    }
+
+    .example-chip {
+        font-size: 0.85rem;
+        width: 100%;
+        /* Stack examples on mobile */
+    }
+}
+
+@media (max-width: 480px) {
+    .section-title {
+        font-size: 1.5rem;
+    }
+
+    .textarea-field {
+        min-height: 120px;
+        font-size: 1rem;
     }
 }

frontend/src/components/ResultDisplay.css

@@ -37,6 +37,9 @@
     overflow-x: auto;
     line-height: 1.6;
     position: relative;
+    white-space: pre-wrap;
+    /* Wrap long SQL code */
+    word-break: break-all;
 }
 
 .sql-code::before {
@@ -50,6 +53,11 @@
     letter-spacing: 0.1em;
 }
 
+.copy-btn {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.8rem;
+}
+
 .explanation-text {
     color: var(--text-dim);
     font-size: 1.1rem;
@@ -70,14 +78,18 @@
     margin-top: 1rem;
     border-radius: var(--radius-sm);
     border: 1px solid var(--glass-border);
-    overflow: hidden;
+    overflow-x: auto;
+    /* Enable horizontal scroll for table */
+    -webkit-overflow-scrolling: touch;
 }
 
 .results-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.95rem;
     text-align: left;
+    min-width: 600px;
+    /* Force minimum width to allow scrolling on mobile */
 }
 
 .results-table th {
@@ -86,10 +98,11 @@
     color: var(--text-dim);
     font-weight: 600;
     border-bottom: 1px solid var(--glass-border);
+    white-space: nowrap;
 }
 
 .results-table td {
-    padding: 1.2rem 1.5rem;
+    padding: 1rem 1.5rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.03);
     color: white;
 }
@@ -108,4 +121,29 @@
     .result-section {
         padding: 1.5rem;
     }
+
+    .explanation-text {
+        font-size: 1rem;
+    }
+
+    .sql-code {
+        font-size: 0.9rem;
+        padding: 1rem;
+    }
+
+    .results-table {
+        font-size: 0.85rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .copy-btn {
+        width: 100%;
+    }
 }

frontend/src/components/SchemaCreator.css

@@ -3,6 +3,8 @@
     background: var(--bg-dark) !important;
     border: 1px solid var(--primary-glow) !important;
     box-shadow: 0 0 50px rgba(59, 130, 246, 0.2) !important;
+    display: flex !important;
+    flex-direction: column !important;
 }
 
 .creator-error {
@@ -34,12 +36,16 @@
     flex-direction: column;
     gap: 1rem;
     margin-bottom: 1.5rem;
+    max-height: 40vh;
+    overflow-y: auto;
+    padding-right: 0.5rem;
 }
 
 .column-row {
     display: flex;
     gap: 0.8rem;
     animation: slideIn 0.3s var(--transition);
+    align-items: center;
 }
 
 @keyframes slideIn {
@@ -70,6 +76,7 @@
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s;
+    flex-shrink: 0;
 }
 
 .btn-remove:hover {
@@ -78,7 +85,35 @@
 }
 
 .modal-footer {
-    padding-top: 2rem;
+    padding-top: 1.5rem;
     margin-top: 1rem;
     border-top: 1px solid var(--glass-border);
+}
+
+@media (max-width: 600px) {
+    .column-row {
+        flex-wrap: wrap;
+        /* Stack column inputs on very small screens */
+        background: rgba(255, 255, 255, 0.03);
+        padding: 1rem;
+        border-radius: var(--radius-sm);
+        position: relative;
+    }
+
+    .column-row .input-field {
+        width: 100%;
+    }
+
+    .column-row .select-field {
+        width: 100% !important;
+    }
+
+    .btn-remove {
+        position: absolute;
+        top: -0.5rem;
+        right: -0.5rem;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+    }
 }