feat: add responsive CSS breakpoints for mobile and tablet support

- 1200px: Adjust panel widths to 55/45 - 1024px: Stack panels vertically, logs below main content - 768px: Tab buttons flow into auto-fill grid rows - 480px: Two-column tab grid, reduced padding for small screens
2026-02-28 23:48:23 +02:00
parent 191a368258
commit e0dc190710
1 changed files with 34 additions and 0 deletions
--- a/bot/static/index.html
+++ b/bot/static/index.html
@@ -596,6 +596,40 @@
      background: #9932CC !important;
      border-color: #9932CC !important;
    }
+
+    /* Responsive breakpoints */
+    @media (max-width: 1200px) {
+      .panel { width: 55%; padding: 1.5rem; }
+      .logs { width: 45%; }
+    }
+
+    @media (max-width: 1024px) {
+      body { flex-direction: column; }
+      .panel { width: 100%; padding: 1.5rem; }
+      .logs {
+        width: 100%;
+        height: 300px;
+        border-left: none;
+        border-top: 2px solid #333;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .panel { padding: 1rem; }
+      .tab-buttons {
+        grid-template-rows: none;
+        grid-auto-flow: row;
+        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+      }
+      .tab-button { font-size: 0.85rem; padding: 0.4rem 0.6rem; }
+    }
+
+    @media (max-width: 480px) {
+      .panel { padding: 0.5rem; }
+      .tab-buttons { grid-template-columns: 1fr 1fr; }
+      .tab-button { font-size: 0.8rem; padding: 0.35rem 0.5rem; }
+      h1 { font-size: 1.2rem; }
+    }
  </style>
 </head>
 <body>