LotusGuild/tinker_tickets
4
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix header overlapping content at mobile breakpoints

Browse Source 
In the SM (≤767px) and XS (≤479px) media queries, .lt-container { padding }
shorthand appeared after .lt-main { padding-top } with equal specificity,
causing the shorthand to clobber the header-clearance padding-top. Swap order
so .lt-main always wins.

Also remove redundant lt-scanlines div — body::before in base.css already
renders the scanline overlay globally.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-04-01 17:19:22 -04:00
parent 4150e1ced3
commit e91709798b
2 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/base.css
+4 -4
View File
@@ -2042,9 +2042,9 @@ select option:checked {
/* ── SM — phones 480–767px ── */
@media (max-width: 767px) {
:root { --header-height: 50px; }
.lt-main { padding-top: calc(50px + var(--space-md)); }
.lt-container { padding: var(--space-md); }
/* lt-main must come after lt-container so padding-top isn't clobbered by the shorthand */
.lt-main { padding-top: calc(50px + var(--space-md)); }
.lt-header { padding: 0 var(--space-md); }
.lt-brand-subtitle { display: none; }
@@ -2142,9 +2142,9 @@ select option:checked {
/* ── XS — tiny phones ≤ 479px ── */
@media (max-width: 479px) {
:root { --header-height: 46px; }
.lt-main { padding-top: calc(46px + var(--space-sm)); }
.lt-container { padding: var(--space-sm); }
/* lt-main must come after lt-container so padding-top isn't clobbered by the shorthand */
.lt-main { padding-top: calc(46px + var(--space-sm)); }
.lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.lt-stat-card { padding: var(--space-xs) var(--space-sm); }
.lt-stat-value { font-size: 1.4rem; }
views/layout_header.php
-3
View File
@@ -56,9 +56,6 @@ $_lt_assetVer = $GLOBALS['config']['ASSET_VERSION'] ?? '20260329';
</script>
</head>
<body>
<!-- Scanlines overlay — dedicated div avoids conflict with body::before/::after pseudo-elements -->
<div class="lt-scanlines" aria-hidden="true" style="position:fixed;inset:0;pointer-events:none;z-index:9998"></div>
<!-- SKIP LINK -->
<a class="lt-skip-link" href="#main-content">Skip to main content</a>