fix(website): fix sticky header on mobile and add border shadow

Move overflow-x: auto from .table-wrap to the mobile breakpoint only,
so horizontal scrolling only applies on small screens. Add box-shadow
to sticky thead th for visual separation. Reset th position to static
on mobile to avoid stacking context issues.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-22 02:25:58 +08:00
parent 1d05e98537
commit 818950f442

View File

@@ -227,7 +227,6 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
.table-wrap {
width: 100%;
padding: 0;
overflow-x: auto;
}
.table-wrap:focus {
@@ -254,6 +253,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
background: var(--bg);
z-index: 10;
white-space: nowrap;
box-shadow: 0 1px 0 var(--border);
}
.table thead th:first-child,
@@ -634,6 +634,8 @@ th[data-sort].sort-asc::after {
}
@media (max-width: 640px) {
.table-wrap { overflow-x: auto; }
.table thead th { position: static; }
.hero { padding: 2rem 1.25rem 1rem; }
.controls { padding: 0 1.25rem 0.75rem; }