mobile version

static/css/styles.css

@@ -202,3 +202,82 @@ tr:hover td { background: #1e1e40; }
 .status-cancelled { background: #2a2a2a; color: #888; }
 
 #empty-log { color: #444; font-size: 0.85rem; padding: 12px 0; }
+
+/* ==========================================================================
+   Mobile Responsiveness (Styles below only apply on phones/tablets viewing < 768px)
+   ========================================================================== */
+@media (max-width: 768px) {
+  /* Collapse the 2-column grid into a single vertical stack */
+  .layout {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-height: calc(100vh - 57px);
+  }
+
+  /* Optimize header to ensure title and badges fit */
+  header {
+    flex-wrap: wrap;
+    padding: 10px 15px;
+    justify-content: space-between;
+  }
+  header h1 {
+    font-size: 1.1rem;
+  }
+
+  /* Town panel becomes a horizontal swipable carousel at the top */
+  #town-panel {
+    border-right: none;
+    border-bottom: 2px solid #2a2a4a;
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 10px;
+    /* Optional: helps snap cards into view on swipe */
+    scroll-snap-type: x mandatory;
+  }
+
+  /* Hide the "TOWNS" header inside the panel to save vertical space */
+  #town-panel h2 {
+    display: none;
+  }
+
+  /* Convert town cards from vertical blocks into horizontal list items */
+  .town-card {
+    min-width: 160px;
+    margin-right: 12px;
+    margin-bottom: 0;
+    scroll-snap-align: start;
+    flex-shrink: 0; /* Prevents cards from squishing */
+  }
+
+  /* Make the command form full-width for easy tapping (fat-finger friendly) */
+  #command-panel {
+    padding: 16px 15px;
+  }
+  .command-form {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 15px;
+  }
+  .form-group {
+    width: 100%;
+  }
+  
+  /* Enlarge inputs and buttons heavily for thumbs */
+  select, input[type=number], .btn {
+    width: 100%;
+    padding: 12px 10px;
+    font-size: 1rem;
+  }
+
+  /* Shrink log table padding so it fits narrow screens better */
+  #log-panel {
+    padding: 16px 10px;
+  }
+  th, td {
+    padding: 8px 4px;
+    font-size: 0.72rem;
+  }
+}