vibe/gitea-pages
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glossary slider fix: width:100% + min-width:0 on container so cards overflow instead of expanding it

Browse Source
This commit is contained in:
ask 2026-05-17 20:48:27 +05:00
parent 0ee5812834
commit b5bb8a81d7
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -764,24 +764,26 @@ main {
.tag.blue { background: rgba(0,102,204,0.1); color: var(--blue); } .tag.blue { background: rgba(0,102,204,0.1); color: var(--blue); }
/* ── GLOSSARY (horizontal slider, CSS-grid auto-flow) ── */ /* ── GLOSSARY (horizontal slider) ── */
.glossary-slider { .glossary-slider {
margin-top: 40px; margin-top: 40px;
max-width: 100%; width: 100%;
min-width: 0;
} }
.glossary { .glossary {
display: grid; display: flex;
grid-auto-flow: column;
grid-auto-columns: 280px;
gap: 12px; gap: 12px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding-bottom: 8px; padding-bottom: 8px;
/* CRITICAL: constrain to parent so content overflows instead of expanding container */
width: 100%;
min-width: 0;
max-width: 100%;
} }
@media (min-width: 640px) { .glossary { grid-auto-columns: 320px; } }
.glossary::-webkit-scrollbar { height: 6px; } .glossary::-webkit-scrollbar { height: 6px; }
.glossary::-webkit-scrollbar-track { background: transparent; } .glossary::-webkit-scrollbar-track { background: transparent; }
@ -795,8 +797,12 @@ main {
flex-direction: column; flex-direction: column;
scroll-snap-align: start; scroll-snap-align: start;
min-height: 200px; min-height: 200px;
flex: 0 0 280px; /* fixed card width, no shrinking */
min-width: 280px;
}
@media (min-width: 640px) {
.gloss-item { min-height: 220px; flex-basis: 320px; min-width: 320px; }
} }
@media (min-width: 640px) { .gloss-item { min-height: 220px; } }
/* nav controls: arrows + counter, centered below cards */ /* nav controls: arrows + counter, centered below cards */
.gloss-nav { .gloss-nav {