Babelbox stylesheet refresh.

Some Babel boxes do not display properly with some language codes that are a bit overlong (e.g. Chinese script variants, but as well "gsw-1") and span too many lines, increasing their height too much. There problem is within the default stylesheet which uses too a large font, a default too large line-height, and an additional padding that is not needed at all, and can safely be reduced horizontally. As well the text content should be reduced to match the box height.

Visit for example user pages that have "zh-hans", "gsw", or "roa-tara" in their "#babel:" user boxes.

You can make this test by using this CSS in the "/common.css" subpage of your user page (like I did on my own). This allows codes to be written on 3 rows without increasing the box and preserves the general layout of Babelboxes so that they line up correctly

.mw-babel-box table th { font-size: 15px; line-height: 15px !important; padding: 0 1px !important; }
.mw-babel-box table td { font-size: 11px; line-height: 15px !important; padding: 0 1px !important; }

Then look at Babelboxes shown on these user pages. (You can test it with other supported skins, if you place it in your "/common.css" subpage of your user page, where it applies the style to all skins; but you may want to limit it just to the default Monobook or Vector skin by placing it in your "/monobook.css" or "/monobook.css": the links of these stylesheets are available in the "Preferences" page for each user, in the "Appearance" tab).

The most language codes will now display on one row; 2 rows will be used for language codes have 3 letters in their base code, but without causing the box height to increase, and a 3rd row can still fit if there's a script variant like "zh-Hans-N". Only very few codes will eventually fit on 4 rows, causing the Babelbox to increase from their minimum height (45 px). The style above make sure that the line-height for the code is 15px (like also the font-size, which is safe because we only display Basic Latin letters or digits here), and also allows the text to use up to 3 rows (15px each, given their line-height of 1.4em which is readable on all scripts for the short description texts in Babel boxes).

This should in fact be part of the default site stylesheet, which currently contains:

.mw-babel-box th {
    font-size: 14pt;
    height: 45px;
    min-width: 45px;
    text-align: center;
    width: 45px;
}
.mw-babel-box td {
    line-height: 1.25em;
    font-size: 8pt;
    padding: 4pt;
    width: 100%;
}

The main problem is the font-size of the first cell, which is a bit too high at 14pt (i.e.18px, because 1pt = 1.27px in HTML), and the absence of line-height (which takes a variable default, 1.6 with the Vector skin, which making it even taller, 28.8px, about 22.7pt).

• you cannot even fit two rows and the maximum cell width of 45px is exhausted even for just "gsw-1", where there's a line wrap just before the minus, and the total-height of the text for two rows is now 57.6px (above the limit of 45px)!
• for showing language codes (that are using only ASCII letters and digits) with big bold font styles and sizes a line-height of 1em is enough (there won't be collisions between ascenders and descenders for ASCII letters characters); and to fit three rows, the total line-height must not exceed 15px (15px can then be the font-size with a line-height of 1em, which is fine for ASCII letters and digits only used in language codes).

That same total line-height of 15px can be kept for the second cell showing translated text, but uses a smaller font, which can be set to 11px to get a line-height of about 1.4em).

• Only for a few South-Asian scripts needing a line-height of 1.5 (e.g with the Myanmar script for Burmese and Karen languages, or the Arabic script in Persian Nastaliq style used in Farsi, Pashto or Urdu languages, or the Tibetan script used in Tibetan and Dzongkha languages), you could use a slightly smaller font-size of 10px instead of 11px (this concerns scripts that use simple glyphs with few strokes but that are very narrow and that are still very readable at that size of 10px), but the line-height should remain at 15px (about 11.8pt). The current style is using a too low value of 1.25em for these South Asian text that are hard to read (my proposal sets it at 1.4em and is safer); however for Tibetan, while keeping also the line-height to 15px, the font-size may be 13px for readability (with a line-height of 1.15em which may seem too small, but texts in Tibetan shown in the second cell are short in length and fit on one row, without linewrap, so no special tuning is needed here) or 12px (with a line-height of 1.25em, just as today except that my proposal uses a increased font-size which is more readable).
• Such reduction of font-size from 11px to 10px in the second cell should not be done in Chinese, Japanese, Korean which fit all their complex ideographic characters in their standard 1em ideographic box (including with the inner gaps inside glyphs) and for which a font height may be increased to 14px (about 11.02pt). But here again the line-height must remain 15px (about 11.8pt): this still leaves 1px (or 1.27pt) of line-to-line gap between rows of ideographic squares. (My proposal above, using a font-size of 11px=8.66pt is a bit more readable for ideographic scripts than the current setting at 8pt=10.16px which is unreadable on desktop screens without HiDPI displays, but we can still increase it to 14px=11.02pt)

The second problem is with the default vertical padding (2px at top and bottom) in both cells, so only a single row fits for the first cell (for a total height of 30.8px) but not two rows (would require 61px, which is largely above the 45px height). That vertical padding can be reduced to 0 in both cells (not at needed for codes already emphasized with big fonts, and colored backgrounds, when the babel box also adds a thin border to the row, and also adds surrounidng white margins); The horizontal padding can also be minimized to just 1px to avoid more line wraps for long codes in the 1st cell or long texts in the 1cn cell (there will also be no collision or contact between the two cells, which are still distinguished by slightly contrastring background colors), and the second cell on the right still has also its own horizontal padding, which can also be reduced to 1px.