Restore .lt-main.lt-container combined selector — proper cascade fix

The TDS v1.2 sync removed the .lt-main.lt-container combined selector that
was already in the project's base.css. That selector has specificity (0,2,0)
vs single-class (0,1,0), so it always wins over .lt-container padding
shorthand at every breakpoint without needing per-breakpoint overrides.

Also restored flex:1, width:100%, min-width:0 on .lt-main that were dropped.
Removed the incorrect per-breakpoint .lt-main and #main-content hacks added
today which were the wrong approach to the same problem.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-01 17:49:00 -04:00
parent 3cfe46050b
commit 0eab5d40e6
+8 -23
View File
@@ -350,22 +350,17 @@ hr {
.lt-main { .lt-main {
padding-top: calc(var(--header-height) + var(--space-lg)); padding-top: calc(var(--header-height) + var(--space-lg));
flex: 1;
width: 100%;
min-width: 0;
} }
/* When both lt-main and lt-container are on the same element, the lt-container
/* ID selector (specificity 1,0,0,0) beats any class combination — guarantees shorthand `padding` overrides the lt-main `padding-top` in responsive breakpoints
the fixed header never overlaps content regardless of cascade order. */ (same cascade specificity, later rule wins). The combined selector has higher
#main-content { specificity (0,2,0 vs 0,1,0) and always wins regardless of source order. */
.lt-main.lt-container {
padding-top: calc(var(--header-height) + var(--space-lg)); padding-top: calc(var(--header-height) + var(--space-lg));
} }
@media (max-width: 1023px) {
#main-content { padding-top: calc(var(--header-height) + var(--space-md)); }
}
@media (max-width: 767px) {
#main-content { padding-top: calc(50px + var(--space-md)); }
}
@media (max-width: 479px) {
#main-content { padding-top: calc(46px + var(--space-sm)); }
}
.lt-layout { .lt-layout {
display: flex; display: flex;
@@ -2023,8 +2018,6 @@ select option:checked {
@media (max-width: 1279px) { @media (max-width: 1279px) {
.lt-grid-4 { grid-template-columns: repeat(2, 1fr); } .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
.lt-container { padding: var(--space-lg); } .lt-container { padding: var(--space-lg); }
/* Restore header clearance after lt-container shorthand overrides padding-top */
.lt-main { padding-top: calc(var(--header-height) + var(--space-lg)); }
} }
@@ -2036,8 +2029,6 @@ select option:checked {
.lt-grid-3, .lt-grid-4 { grid-template-columns: repeat(2, 1fr); } .lt-grid-3, .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
.lt-stats-grid { grid-template-columns: repeat(2, 1fr); } .lt-stats-grid { grid-template-columns: repeat(2, 1fr); }
.lt-container { padding: var(--space-md) var(--space-lg); } .lt-container { padding: var(--space-md) var(--space-lg); }
/* Restore header clearance after lt-container shorthand overrides padding-top */
.lt-main { padding-top: calc(var(--header-height) + var(--space-md)); }
.lt-header { padding: 0 var(--space-lg); } .lt-header { padding: 0 var(--space-lg); }
/* Sidebar becomes off-canvas on tablets */ /* Sidebar becomes off-canvas on tablets */
@@ -2062,8 +2053,6 @@ select option:checked {
@media (max-width: 767px) { @media (max-width: 767px) {
:root { --header-height: 50px; } :root { --header-height: 50px; }
.lt-container { padding: 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-header { padding: 0 var(--space-md); }
.lt-brand-subtitle { display: none; } .lt-brand-subtitle { display: none; }
@@ -2162,8 +2151,6 @@ select option:checked {
@media (max-width: 479px) { @media (max-width: 479px) {
:root { --header-height: 46px; } :root { --header-height: 46px; }
.lt-container { padding: 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-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.lt-stat-card { padding: var(--space-xs) var(--space-sm); } .lt-stat-card { padding: var(--space-xs) var(--space-sm); }
.lt-stat-value { font-size: 1.4rem; } .lt-stat-value { font-size: 1.4rem; }
@@ -2260,8 +2247,6 @@ select option:checked {
.lt-stats-grid { grid-template-columns: repeat(6, 1fr); } .lt-stats-grid { grid-template-columns: repeat(6, 1fr); }
.lt-grid-4 { grid-template-columns: repeat(4, 1fr); } .lt-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lt-container { padding: var(--space-xl) var(--space-2xl); } .lt-container { padding: var(--space-xl) var(--space-2xl); }
/* Restore header clearance after lt-container shorthand overrides padding-top */
.lt-main { padding-top: calc(var(--header-height) + var(--space-xl)); }
} }