python-tdd/src/static_src/scss/_billboard.scss

// ── Shared aperture fill for both billboard pages ──────────────────────────

%billboard-page-base {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    position: relative;
    padding: 0.75rem;
}

html:has(body.page-billboard),
html:has(body.page-billscroll) {
    overflow: hidden;
}

body.page-billboard,
body.page-billscroll {
    overflow: hidden;

    .container {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .row {
        flex-shrink: 0;
        margin-bottom: -1rem;
    }
}

// ── Billboard page (three-applet grid) ─────────────────────────────────────

.billboard-page {
    @extend %billboard-page-base;

    // Gear btn positioning mirrors dashboard/wallet pattern
    > .gear-btn {
        position: fixed;
        bottom: calc(var(--footer-w, 4rem) + 0.75rem);
        right: calc(var(--footer-w, 4rem) + 0.75rem);
        z-index: 10;
    }
}

// ── Billscroll page (single full-aperture applet) ──────────────────────────

.billscroll-page {
    @extend %billboard-page-base;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;

    // The single scroll applet stretches to fill the remaining aperture
    .applet-billboard-scroll {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        // Override grid-row span — this applet fills height via flex, not grid rows
        grid-row: unset;

        #id_drama_scroll {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }
    }
}

// ── My Scrolls list ────────────────────────────────────────────────────────

#id_applet_billboard_my_scrolls {
    .scroll-list {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow-y: auto;

        li {
            padding: 0.25rem 0;
            border-bottom: 1px solid rgba(var(--priUser), 0.15);

            &:last-child { border-bottom: none; }

            a { text-decoration: none; }
        }
    }
}