MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* =========================================================
   PAGE FORMS – HARD RESET
   ========================================================= */

/* Remove table look completely */
.formtable,
.formtable tr,
.formtable td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure PF respects outer layout */
.forminput,
.formlabel {
    display: block !important;
    width: 100% !important;
}

/* Kill PF default spacing */
.formtable {
    margin-bottom: 6px !important;
}

/* =========================================================
   INPUT NORMALIZATION (THIS IS THE IMPORTANT PART)
   ========================================================= */

.forminput input[type="text"],
.forminput input[type="search"],
.forminput input[type="date"],
.forminput textarea,
.forminput select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 4px 6px;
    font-size: 13px;
}

/* =========================================================
   DATEPICKER FIX (Release Date)
   ========================================================= */

/* Prevent calendar button from shrinking input */
.forminput input.hasDatepicker {
    width: 100% !important;
}

.forminput .ui-datepicker-trigger {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/* Wrap date field correctly */
.forminput {
    position: relative;
}

/* =========================================================
   TOKEN INPUT FIX (Series, Multiplayer Tools)
   ========================================================= */

.forminput .pfTokens {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.forminput .pfTokens input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    outline: none;
}

/* Make tokens visually match text fields */
.forminput .pfTokens {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 2px 4px;
    background: #fff;
}

/* =========================================================
   FILE UPLOAD FIX
   ========================================================= */

.forminput input[type="file"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
   FLEX ROW SAFETY (THIS FIXES YOUR EXACT ISSUE)
   ========================================================= */

/* Ensure PF fields don't shrink in flex containers */
div[style*="display: flex"] .forminput {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* =========================================================
   CHECKBOX GRID (YOUR EXISTING SYSTEM, STABLE)
   ========================================================= */

.checkbox-grid > span {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
}

.checkbox-grid .checkboxLabel {
    display: flex !important;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
    height: 25px;
    font-size: 13px;
    white-space: nowrap;
}

.checkbox-grid .checkboxLabel:hover {
    background: #fff;
    border-color: #2a4b8d;
    cursor: pointer;
}

.checkbox-grid br {
    display: none !important;
}

/* =========================================================
   QUALITY OF LIFE
   ========================================================= */

/* Prevent weird label spacing */
.formlabel {
    margin-bottom: 3px;
    font-weight: bold;
}

/* Make everything predictable */
* {
    box-sizing: border-box;
}