PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-09-25 09:53:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix tfe.php scroll: make .tfe-main a flex container so the height chain resolves

Browse Source 
.tfe-main (main) is a block container by default, so .tfe-layout's
height:100% and .tfe-content-row's flex:1 never resolved to a
definite height. The columns' overflow-y:auto thus had nothing to
constrain, and main's overflow:hidden clipped the content — scroll
was visually broken. Adding display:flex lets the column/height
chain resolve so both columns scroll independently as intended.
This commit is contained in:
Pontoporeia
2026-08-24 11:36:15 +02:00
parent 55c714a35d
commit 2232981753
1 changed files with 53 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/assets/css/tfe.css
+53
View File
@@ -7,6 +7,31 @@
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
/* Left padding keeps content aligned with the rest of the page;
no right padding so the right column (and its scrollbar) sits
flush against the viewport edge. */
padding-left: var(--space-m);
}
/* Stacked article layout — fills main height */
.tfe-layout {
display: flex;
flex-direction: column;
gap: var(--space-xl);
width: 100%;
height: 100%;
min-height: 0;
}
/* Row 1: Author above Title (kept for backward compat, no longer used) */
.tfe-header-row {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
} }
/* Two-column layout: left 40vw (info), right fills remaining (files) */ /* Two-column layout: left 40vw (info), right fills remaining (files) */
@@ -36,6 +61,28 @@
} }
/* Files container inside right column — flex kept for PDF expand-to-fill behavior */ /* Files container inside right column — flex kept for PDF expand-to-fill behavior */
display: flex;
flex-direction: column;
overflow-y: auto;
min-width: 0;
padding-top: var(--space-l);
padding-bottom: var(--space-xl);
}
/* Left column: stacks author, title, meta, synopsis — scrolls independently */
.tfe-left-column {
gap: var(--space-m);
/* space between content and the column scrollbar */
padding-right: var(--space-xs);
}
/* Right column: static (no padding), scrollbar pinned to the far right edge */
.tfe-right-column {
/* no horizontal padding — the inner .tfe-files carries the gutter */
}
/* Files container inside right column: padded on the right so content
sits clear of the column's right-edge scrollbar */
.tfe-files { .tfe-files {
display: grid; display: grid;
gap: var(--space-m); gap: var(--space-m);
@@ -43,6 +90,12 @@
.tfe-files:has(.pdf-expanded) { .tfe-files:has(.pdf-expanded) {
height: 100%; height: 100%;
display: flex;
flex-direction: column;
gap: var(--space-m);
flex: 1;
min-height: 0;
padding-right: var(--space-xs);
} }
.tfe-file-item { .tfe-file-item {