Web UI tabs made into two rows

bot/static/index.html

@@ -416,14 +416,19 @@
     }
     
     .tab-buttons {
-      display: flex;
+      display: grid;
+      grid-template-rows: repeat(2, auto);
+      grid-auto-flow: column;
+      grid-auto-columns: max-content;
       border-bottom: 2px solid #333;
       margin-bottom: 1rem;
       overflow-x: auto;
       overflow-y: hidden;
-      white-space: nowrap;
       scrollbar-width: thin;
       scrollbar-color: #555 #222;
+      row-gap: 0.05rem;
+      column-gap: 0.1rem;
+      padding-bottom: 0.1rem;
     }
     
     .tab-buttons::-webkit-scrollbar {
@@ -447,12 +452,10 @@
       background: #222;
       color: #ccc;
       border: none;
-      padding: 0.8rem 1.5rem;
+      padding: 0.5rem 1rem;
       cursor: pointer;
       border-bottom: 3px solid transparent;
-      margin-right: 0.5rem;
       transition: all 0.3s ease;
-      flex-shrink: 0;
       white-space: nowrap;
     }