feat: improve mobile UI/UX with responsive design

- Reduce padding on mobile devices for better space utilization
- Convert form rows to single column on mobile
- Optimize table display with better scrolling and smaller font sizes
- Improve button touch targets (min-height 44px) for better mobile interaction
- Stack action buttons vertically on mobile
- Add touch-action: manipulation for better touch responsiveness
- Improve horizontal scrolling with -webkit-overflow-scrolling: touch
- Add custom scrollbar styling for better mobile experience
- Optimize navigation drawer item spacing for mobile
- Make summary sections stack vertically on mobile

Author: mlgzackfly

src/client/App.css

@@ -23,12 +23,20 @@
 
 .app-main {
   flex: 1;
-  padding: var(--space-6);
+  padding: var(--space-4);
   overflow-y: auto;
   margin-left: 0;
   transition: margin-left var(--transition-normal);
   min-height: 100vh;
   position: relative;
+  padding-top: calc(var(--space-4) + 60px);
+}
+
+@media (min-width: 640px) {
+  .app-main {
+    padding: var(--space-6);
+    padding-top: calc(var(--space-6) + 60px);
+  }
 }
 
 @media (min-width: 1024px) {

src/client/components/HistoryList.css

@@ -34,19 +34,32 @@
   transition: all var(--transition-fast);
 }
 
+@media (min-width: 640px) {
+  .history-item {
+    padding: var(--space-6);
+  }
+}
+
 .history-item:hover {
   border-color: var(--border-strong);
   box-shadow: var(--shadow-sm);
 }
 
 .history-item-header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  flex-direction: column;
   gap: var(--space-4);
   margin-bottom: var(--space-2);
 }
 
+@media (min-width: 640px) {
+  .history-item-header {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+}
+
 .history-item-main {
   flex: 1;
   display: flex;
@@ -102,14 +115,23 @@
 
 .history-item-actions {
   display: flex;
+  flex-direction: column;
   gap: var(--space-2);
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .history-item-actions {
+    flex-direction: row;
+    width: auto;
+  }
 }
 
 .btn-action {
   background: transparent;
   border: 1px solid var(--border-default);
   color: var(--text-primary);
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4);
   font-family: var(--font-mono);
   font-size: 0.75rem;
   font-weight: 600;
@@ -118,6 +140,8 @@
   border-radius: 4px;
   transition: all var(--transition-fast);
   text-transform: uppercase;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 
 .btn-action:hover {
@@ -204,6 +228,25 @@
   border: 1px solid var(--border-subtle);
   border-radius: 4px;
   margin-top: var(--space-4);
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+}
+
+.history-results-table::-webkit-scrollbar {
+  height: 8px;
+}
+
+.history-results-table::-webkit-scrollbar-track {
+  background: var(--bg-surface);
+}
+
+.history-results-table::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: 4px;
+}
+
+.history-results-table::-webkit-scrollbar-thumb:hover {
+  background: var(--border-strong);
 }
 
 .history-results-table table {

src/client/components/Navbar.css

@@ -1,14 +1,20 @@
 .navbar {
   background: var(--bg-elevated);
   border-bottom: 1px solid var(--border-default);
-  padding: var(--space-4) var(--space-6);
+  padding: var(--space-3) var(--space-4);
   position: sticky;
   top: 0;
   z-index: 100;
   backdrop-filter: blur(10px);
   box-shadow: var(--shadow-sm);
 }
 
+@media (min-width: 640px) {
+  .navbar {
+    padding: var(--space-4) var(--space-6);
+  }
+}
+
 .navbar-content {
   display: flex;
   align-items: center;
@@ -28,8 +34,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 
 .navbar-menu-btn:hover {

src/client/components/NavigationDrawer.css

@@ -177,7 +177,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-4) var(--space-4);
   background: transparent;
   border: none;
   color: var(--text-secondary);
@@ -187,6 +187,8 @@
   transition: all var(--transition-fast);
   text-align: left;
   position: relative;
+  min-height: 48px;
+  touch-action: manipulation;
 }
 
 .nav-drawer-item::before {
@@ -252,8 +254,8 @@
 
 .nav-drawer-toggle {
   position: fixed;
-  top: var(--space-4);
-  left: var(--space-4);
+  top: var(--space-3);
+  left: var(--space-3);
   background: var(--bg-elevated);
   border: 1px solid var(--border-subtle);
   color: var(--text-primary);
@@ -264,11 +266,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
   z-index: 997;
   border-radius: 4px;
   box-shadow: var(--shadow-sm);
+  touch-action: manipulation;
 }
 
 @media (min-width: 1024px) {

src/client/components/QueryForm.css

@@ -2,10 +2,16 @@
   background: var(--bg-elevated);
   border: 1px solid var(--border-default);
   border-radius: 4px;
-  padding: var(--space-6);
+  padding: var(--space-4);
   box-shadow: var(--shadow-md);
 }
 
+@media (min-width: 640px) {
+  .query-form {
+    padding: var(--space-6);
+  }
+}
+
 .query-form-content {
   display: flex;
   flex-direction: column;
@@ -20,10 +26,16 @@
 
 .query-form-row {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   gap: var(--space-4);
 }
 
+@media (min-width: 640px) {
+  .query-form-row {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 .query-form-label {
   font-family: var(--font-mono);
   font-size: 0.75rem;
@@ -107,11 +119,17 @@
 
 .query-form-date-inputs {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   gap: var(--space-4);
   margin-top: var(--space-3);
 }
 
+@media (min-width: 640px) {
+  .query-form-date-inputs {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 .query-form-date-field {
   display: flex;
   flex-direction: column;
@@ -127,15 +145,22 @@
 
 .query-form-actions {
   display: flex;
+  flex-direction: column;
   gap: var(--space-3);
   margin-top: var(--space-2);
 }
 
+@media (min-width: 640px) {
+  .query-form-actions {
+    flex-direction: row;
+  }
+}
+
 .btn-primary {
   background: var(--color-primary);
   border: 1px solid var(--color-primary);
   color: var(--text-primary);
-  padding: var(--space-3) var(--space-6);
+  padding: var(--space-4) var(--space-6);
   font-family: var(--font-mono);
   font-size: 0.875rem;
   font-weight: 600;
@@ -144,6 +169,8 @@
   border-radius: 4px;
   transition: all var(--transition-fast);
   text-transform: uppercase;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 
 .btn-primary:hover:not(:disabled) {