FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scroll the tab bar instead of the whole page

Browse Source 
Reaching the last tab on a phone meant dragging the entire layout sideways,
every card with it.
This commit is contained in:
Gmer4Lfe
2026-08-12 20:11:42 -04:00
parent 44275a8a04
commit d1deac1bbb
3 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/unraid/css/varaverk.css
+15 -3
View File
@@ -2,9 +2,21 @@
#varaverk-wrap { padding: 10px; font-family: inherit; }
/* Tab bar */
#vv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #444; align-items: flex-end; }
.vv-tab { padding: 6px 16px; text-decoration: none; color: #aaa; border-radius: 4px 4px 0 0; }
/* Tab bar
Scrolls itself once the tabs stop fitting. Without this the row simply overflowed and the whole
page went with it, so reaching the last tab on a phone meant dragging the entire layout
sideways — every card, not just the bar.
The scrollbar is hidden the way the log panes hide theirs: a visible one costs a row of height
on a bar that is 30px tall, and the content is obviously draggable. overscroll-behavior stops a
flick at either end of the bar from chaining out and scrolling the page instead. */
#vv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #444;
align-items: flex-end; overflow-x: auto; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; scrollbar-width: none; }
#vv-tabs::-webkit-scrollbar { display: none; }
/* Neither squashed nor broken across lines — a flex item's default is to shrink, which turned
"Partnership" into three characters and an ellipsis before the bar ever decided to scroll. */
.vv-tab { padding: 6px 16px; text-decoration: none; color: #aaa; border-radius: 4px 4px 0 0;
flex-shrink: 0; white-space: nowrap; }
.vv-tab:hover { color: #fff; background: #333; }
.vv-tab.active { color: #fff; background: #555; border-bottom: 2px solid #fff; }