repertoire: fixed-header columns, remove main/index padding, minimal column padding

This commit is contained in:
Pontoporeia
2026-04-30 11:41:00 +02:00
parent 0960afb731
commit a9e03c4b1c
2 changed files with 29 additions and 15 deletions

View File

@@ -63,6 +63,12 @@
- [ ] Verify TCP reachability from XAMXAM VM to LDAP server (port 636) - [ ] Verify TCP reachability from XAMXAM VM to LDAP server (port 636)
- [ ] See `docs/LDAP_AUTH_PLAN.md` for full phase-by-phase plan - [ ] See `docs/LDAP_AUTH_PLAN.md` for full phase-by-phase plan
## Répertoire layout
- [x] Make column headings sticky/non-scrollable; only `ul` scrolls per column
- [x] Remove padding from `.search-main` and `.repertoire-index`
- [x] Minimal horizontal padding inside columns (`var(--space-2xs)`)
## CSS refactor ## CSS refactor
- [x] Move semantic HTML element baseline styles into common.css - [x] Move semantic HTML element baseline styles into common.css

View File

@@ -8,6 +8,7 @@
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
padding: 0;
} }
/* ---- 6-column index layout ---- */ /* ---- 6-column index layout ---- */
@@ -15,14 +16,14 @@
display: grid; display: grid;
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr; grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
gap: 0; gap: 0;
padding: 0 var(--space-m); padding: 0;
height: 100%; height: 100%;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.repertoire-index { .repertoire-index {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
padding: 0 var(--space-s); padding: 0;
min-height: auto; min-height: auto;
} }
@@ -38,14 +39,13 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.repertoire-index { .repertoire-index {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 0 var(--space-s); padding: 0;
min-height: auto; min-height: auto;
} }
.repertoire-col { .repertoire-col {
border-right: none; border-right: none;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
padding: var(--space-s) 0 var(--space-m);
} }
.repertoire-col:last-child { .repertoire-col:last-child {
@@ -54,32 +54,40 @@
} }
.repertoire-col { .repertoire-col {
padding: var(--space-xs) var(--space-2xs) var(--space-l); display: flex;
overflow-y: auto; flex-direction: column;
overflow-x: hidden; padding: 0;
overflow: hidden;
} }
.repertoire-col:last-child { .repertoire-col > h2 {
border-right: none; flex-shrink: 0;
}
.repertoire-index section > h2 {
font-family: var(--font-display); font-family: var(--font-display);
font-size: var(--step--2); font-size: var(--step--2);
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 400; font-weight: 400;
margin: 0 0 var(--space-2xs) 0; margin: 0;
padding-bottom: var(--space-3xs); padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
border-bottom: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary);
} }
.repertoire-col > ul {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-2xs) var(--space-2xs) var(--space-l);
}
.repertoire-col:last-child {
border-right: none;
}
/* Strip list chrome inside repertoire columns */ /* Strip list chrome inside repertoire columns */
.repertoire-col ul { .repertoire-col ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0;
} }
/* ---- rep-entry: shared base (button + link variants) ---- */ /* ---- rep-entry: shared base (button + link variants) ---- */