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;
}

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;
}

// ── 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;
        }
    }
}

// ── Billboard applet placement ─────────────────────────────────────────────
// Explicit placement: My Scrolls + Contacts stack left, Most Recent fills right.
// Portrait override (container query) restores stacked full-width layout.

#id_billboard_applets_container {
    #id_applet_billboard_my_scrolls  { grid-column: 1 / span 4; grid-row: 1 / span 3; }
    #id_applet_billboard_my_contacts { grid-column: 1 / span 4; grid-row: 4 / span 3; }
    #id_applet_billboard_most_recent { grid-column: 5 / span 8; grid-row: 1 / span 6; }

    @container (max-width: 550px) {
        #id_applet_billboard_my_scrolls,
        #id_applet_billboard_my_contacts,
        #id_applet_billboard_most_recent {
            grid-column: 1 / span 12;
            grid-row: span var(--applet-rows, 3);
        }
    }
}

// ── Most Recent applet — scrollable drama feed ─────────────────────────────

#id_applet_billboard_most_recent {
    display: flex;
    flex-direction: column;

    .most-recent-room-link {
        flex-shrink: 0;
        margin-bottom: 0.25rem;
        font-weight: bold;
    }

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

    .most-recent-load-more {
        display: block;
        padding-bottom: 0.5rem;
        font-size: 0.8rem;
        text-align: center;
    }
}

// ── 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; }
        }
    }
}