Web UI tabs made into two rows

This commit is contained in:
2026-02-07 22:16:01 +02:00
parent 14e1a8df51
commit 5fe420b7bc

View File

@@ -416,14 +416,19 @@
} }
.tab-buttons { .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; border-bottom: 2px solid #333;
margin-bottom: 1rem; margin-bottom: 1rem;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #555 #222; scrollbar-color: #555 #222;
row-gap: 0.05rem;
column-gap: 0.1rem;
padding-bottom: 0.1rem;
} }
.tab-buttons::-webkit-scrollbar { .tab-buttons::-webkit-scrollbar {
@@ -447,12 +452,10 @@
background: #222; background: #222;
color: #ccc; color: #ccc;
border: none; border: none;
padding: 0.8rem 1.5rem; padding: 0.5rem 1rem;
cursor: pointer; cursor: pointer;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
margin-right: 0.5rem;
transition: all 0.3s ease; transition: all 0.3s ease;
flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
} }