MediaWiki:Common.css: Difference between revisions

Latest revision as of 03:49, 21 May 2026

/* Fix text wrapping on mobile - ZachTEW page and similar wiki pages */
.mw-parser-output,
.mw-content-text,
.mw-body-content p,
.mw-body-content li,
.mw-body-content td {
    overflow-wrap: break-word !important;   /* modern standard */
    word-break: break-word !important;      /* fallback for older browsers */
    hyphens: auto;                          /* helps with long words */
}

/* === STRONGER MOBILE INFObOX FIX (ZachTEW page) === */
@media (max-width: 767px) {
    .infobox,
    table.infobox {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1em 0 !important;
        table-layout: auto !important;          /* changed from fixed → lets content breathe */
        box-sizing: border-box !important;
        border-collapse: collapse !important;
    }

    .infobox th,
    .infobox td,
    table.infobox th,
    table.infobox td {
        display: block !important;              /* stacks label + data vertically on phones */
        width: 100% !important;
        padding: 8px 10px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        white-space: normal !important;
    }

    /* Make the long links row wrap nicely */
    .infobox td a,
    .infobox td .external,
    a[href*="archive.org"],
    a[href*="ghostarchive"],
    a[href*="twitter"],
    a[href*="ZachTEW"] {
        word-break: break-all !important;
        display: inline-block !important;
        margin: 2px 0 !important;
    }

    /* Tighten empty rows (profile pic, etc.) */
    .infobox td:empty,
    .infobox td[colspan="2"]:empty {
        padding: 4px 10px !important;
    }

    /* Kill any leftover scroll */
    .mw-body,
    .mw-content-container {
        overflow-x: hidden !important;
    }
}

/* Optional: prevent horizontal scroll entirely on mobile */
@media (max-width: 767px) {
    .mw-body {
        overflow-x: hidden;
    }
    
    /* Make references and long URLs wrap nicely */
    .references li,
    .external {
        word-break: break-word;
    }
}


/* === STRONGER MOBILE FIX FOR ZachTEW INFObOX & LONG TEXT === */
@media (max-width: 767px) {
    .infobox,
    table.infobox,
    table.infobox.wikitable {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1em 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    .infobox td,
    .infobox th,
    table.infobox td,
    table.infobox th {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        padding: 8px 6px !important;   /* slightly tighter for phones */
    }

    /* Force the long link cells to wrap aggressively */
    .infobox td a[href*="archive"],
    .infobox td a[href*="ghostarchive"],
    .infobox td a[href*="twitter"],
    .references li a,
    .external {
        word-break: break-all !important;
        white-space: normal !important;
    }

    /* Kill any remaining scroll */
    .mw-body,
    .mw-content-container {
        overflow-x: hidden !important;
    }
}