From 5c224be69822b056bde5f9e99dec45b873c4ed6a Mon Sep 17 00:00:00 2001
From: rahul-aot <rahul.ap@aot-technologies.com>
Date: Wed, 7 Jan 2026 20:36:30 -0800
Subject: [PATCH] responsive design issues fixes

---
 frontend/src/App.css                      |  7 +-
 frontend/src/components/Header.css        | 81 +++++++++++++++++++----
 frontend/src/components/Header.tsx        |  4 +-
 frontend/src/components/QueryInput.css    | 31 ++++++++-
 frontend/src/components/ResultDisplay.css | 42 +++++++++++-
 frontend/src/components/SchemaCreator.css | 37 ++++++++++-
 frontend/src/components/SchemaModal.css   | 52 +++++++++++----
 frontend/src/index.css                    |  8 +++
 8 files changed, 227 insertions(+), 35 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 5e9ed47..a8f102e 100644
--- a/frontend/src/App.css
+++ b/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;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css
index 3c3cc33..69b2411 100644
--- a/frontend/src/components/Header.css
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 822209b..037f53b 100644
--- a/frontend/src/components/Header.tsx
+++ b/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>
diff --git a/frontend/src/components/QueryInput.css b/frontend/src/components/QueryInput.css
index 5538a7d..c077311 100644
--- a/frontend/src/components/QueryInput.css
+++ b/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;
     }
 }
\ No newline at end of file
diff --git a/frontend/src/components/ResultDisplay.css b/frontend/src/components/ResultDisplay.css
index 256709e..91034ac 100644
--- a/frontend/src/components/ResultDisplay.css
+++ b/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,7 +78,9 @@
     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 {
@@ -78,6 +88,8 @@
     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%;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/components/SchemaCreator.css b/frontend/src/components/SchemaCreator.css
index 6ddcab4..e254005 100644
--- a/frontend/src/components/SchemaCreator.css
+++ b/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%;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/components/SchemaModal.css b/frontend/src/components/SchemaModal.css
index 624e260..f4ab14d 100644
--- a/frontend/src/components/SchemaModal.css
+++ b/frontend/src/components/SchemaModal.css
@@ -1,13 +1,13 @@
 .modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.82);
     backdrop-filter: blur(12px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2000;
-    padding: 2rem;
+    padding: 1.5rem;
 }
 
 .modal-content {
@@ -15,14 +15,17 @@
     max-width: 1000px;
     max-height: 85vh;
     border: 1px solid var(--glass-border-bright);
+    display: flex;
+    flex-direction: column;
 }
 
 .modal-header {
-    padding: 1.5rem 2.5rem;
+    padding: 1.25rem 2rem;
     border-bottom: 1px solid var(--glass-border);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-shrink: 0;
 }
 
 .modal-title {
@@ -32,18 +35,20 @@
 }
 
 .modal-body {
-    padding: 2.5rem;
+    padding: 2rem;
     overflow-y: auto;
+    flex: 1;
+    -webkit-overflow-scrolling: touch;
 }
 
 .schema-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 1.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.25rem;
 }
 
 .table-card {
-    padding: 1.5rem;
+    padding: 1.25rem;
     background: rgba(255, 255, 255, 0.02);
 }
 
@@ -51,30 +56,49 @@
     display: flex;
     align-items: center;
     gap: 0.8rem;
-    margin-bottom: 1.2rem;
+    margin-bottom: 1rem;
     color: var(--primary-glow);
 }
 
 .table-name {
-    font-size: 1.1rem;
+    font-size: 1.05rem;
     font-weight: 700;
     color: white;
+    word-break: break-all;
 }
 
 .column-item {
     font-family: 'JetBrains Mono', monospace;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     color: var(--text-dim);
-    padding: 0.4rem 0.8rem;
+    padding: 0.4rem 0.6rem;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 6px;
     margin-bottom: 0.4rem;
     display: flex;
     align-items: center;
     gap: 0.6rem;
+    word-break: break-all;
 }
 
-.column-item:hover {
-    background: rgba(59, 130, 246, 0.1);
-    color: white;
+@media (max-width: 768px) {
+    .modal-overlay {
+        padding: 0.75rem;
+    }
+
+    .modal-header {
+        padding: 1rem 1.25rem;
+    }
+
+    .modal-body {
+        padding: 1.25rem;
+    }
+
+    .modal-title {
+        font-size: 1.25rem;
+    }
+
+    .schema-grid {
+        grid-template-columns: 1fr;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 77d3a2f..b88aa2f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -31,6 +31,14 @@
   --transition: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+@media (max-width: 768px) {
+  :root {
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+  }
+}
+
 * {
   margin: 0;
   padding: 0;