MediaWiki:Common.css: Difference between revisions

Revision as of 03:47, 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 */
}

/* Make the infobox table mobile-friendly */
.mw-infobox,
table.infobox,
table[style*="float"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;                    /* forces cells to respect width */
    word-break: break-word !important;
}

.mw-infobox td,
table.infobox td {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Long links & usernames (the real culprits) */
a[href*="ZachTEW"],
a[href*="AustinNoPowers"],
a[href*="aidscastreloadedarchive"] {
    word-break: break-all;   /* aggressive break only where needed */
}

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