/* S11: leaderboard-only density. Shared coin/about layouts retain their CSS. */ .tabs { position: relative; overflow: visible; mask-image: none; -webkit-mask-image: none; } .tabs-in { overflow-x: auto; scrollbar-width: none; } .tabs-in::-webkit-scrollbar { display: none; } .tabs-in button { flex: 0 0 auto; } .tabs .tabs-next { padding: 0; margin: 0; border: 0; position: absolute; right: 0; top: 0; bottom: 0; width: 32px; background: var(--surface); box-shadow: -8px 0 12px var(--surface); font-size: 25px; color: var(--text); } .tabs-next[hidden] { display: none; } .tabs-in { padding-right: 40px; } /* This shorter placeholder must fit at desktop widths too. */ @media (max-width: 760px) { /* Keep room for the full stale-feed warning above seven rows. */ .bar { height: 72px; flex-wrap: wrap; align-content: center; gap: 6px; position: relative; } .brand { height: 28px; } .bar-r { display: contents; } .tbtn { position: absolute; right: var(--gut); top: 3px; height: 28px; } .srch { width: 100%; } .srch input { width: 100%; height: 32px; font-size: 14px; } .tabs button { padding-top: 9px; padding-bottom: 8px; font-size: 13px; } .tabs-in { gap: 20px; } .statwrap { border-bottom: 1px solid var(--line); } .statwrap .stats { padding: 6px 0; } .statwrap .card { padding: 0; border: 0; background: none; } .statwrap .card-h { display: none; } .statwrap .kpis { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: thin; } .statwrap .kpi { flex: 0 0 auto; padding: 5px 8px; min-width: 106px; } .statwrap .kpi i { font-size: 10px; margin: 0; } .statwrap .kpi b { font-size: 14px; line-height: 19px; } .statwrap .kpi small { display: none; } .tools { gap: 6px; padding: 6px 0; } .chips-group { flex-direction: row; overflow-x: auto; gap: 10px; scrollbar-width: thin; } .chips-group .chips { width: auto; min-width: max-content; overflow-x: auto; mask-image: none; -webkit-mask-image: none; } .chips button { height: 29px; padding: 0 9px; font-size: 12px; } .tools-r { gap: 6px; flex-wrap: wrap; } .tools-r .sel { max-width: none; flex: 1 1 auto; width: auto; font-size: 11px; height: 29px; } .tools-r .fbtn { font-size: 11px; padding: 0 7px; height: 29px; flex: 0 0 auto; } .meta { padding: 4px 0; } .meta-line { margin-top: 2px; } /* --- table TYPE SCALE; the LAYOUT moved on 2026-09-09 --------------- This used to be the narrow table's whole layout: one four-column CSS grid shared by the header and the rows, two grid rows per coin, and five of the ten columns switched off — market cap folded into the name cell, the paired stock onto a second line. product reviewer asked for all ten columns back and for market cap to be its own column (2026-09-09), so the narrow table is a real table again with a horizontally scrolling region and a pinned left edge. That layout is built at the FOOT of this file, under "ALL TEN COLUMNS ON A NARROW VIEWPORT" — read it before changing anything here, because a `display: grid` reintroduced above would win on source order over some of the rules down there. What survives in this section is only what the table layout still wants: the type scale and the identity/chip sizing. Every rule that described the grid, hid a column, or stacked a figure inside another cell is gone rather than overridden, so the file states one layout instead of two contradictory ones. */ .tbl thead th button.srt { font-size: 11px; gap: 3px; height: 28px; } .tbl thead th .info { display: none; } .tbl thead th[data-key='rank'] .caret { display: none; } .tbl tbody tr.r > td.px { font-size: 12px; } .tbl tbody tr.r > td.c-chg .chg { font-size: 11px; } .nm { gap: 6px; } .nm .logo, .nm .logo-ph { width: 26px; height: 26px; flex: 0 0 26px; } .nm-name { display: none; } .nm-tk { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; } .nm-sub { display: flex; align-items: center; gap: 4px; line-height: 14px; } .nm-sub .tag { display: none; } .nm-chain { font-size: 8px; padding: 0 2px; flex: 0 0 auto; } .plate { display: inline-flex; padding: 0; gap: 3px; border: 0; background: none; vertical-align: middle; } .plate-lg { width: 12px; height: 12px; font-size: 6px; } .plate-t b { font-size: 10px; line-height: 16px; } .plate-b { display: none; } .plate-lock { width: 8px; height: 8px; } .px-nat { font-size: 10px; } } @media (max-width: 760px) { .freshbar-in { gap: 5px; padding-top: 5px; padding-bottom: 5px; } .freshbar .fresh-main { font-size: 11px; } .freshbar .fresh-note { font-size: 10px; } .tbl thead th.c-rank { width: auto; } } /* =================================================================== NARROW-VIEWPORT DENSITY PASS — G, 2026-09-09 =================================================================== G: the layout was "still too thick" and he wanted it "mobile-native, where they're a little bit thinner on the tall and narrow view, WHETHER IT'S MOBILE OR NOT". That last clause is the whole design of this block, so read it before changing anything here. IT KEYS OFF VIEWPORT SHAPE, NOT DEVICE. The only condition is the `max-width: 760px` breakpoint the sheet already uses. There is no user-agent test, no `isMobile` flag, no `(pointer: coarse)` and no `(hover: none)` anywhere in this file, and none may be added: a desktop browser dragged narrow, a split-screen tablet and a phone are the same layout problem, so they get the same answer. A control that fires on touch capability instead of width leaves the narrow desktop window — the case G named explicitly — on the thick layout. NOR is it gated on orientation/aspect-ratio, though the brief allowed it. A short-and-narrow window (say 700x400) is the viewport that needs the density MOST, and an `(orientation: portrait)` clause would be the one thing that excluded it. Width alone is both sufficient and safer. WHAT IT BUYS: ~288px of chrome above row 1 down to ~200px at 390x844, and the row from 63px to ~51px — 9 rows above the fold to ~12. WHAT IT DELIBERATELY DOES NOT SHRINK — the accessibility floor. Every tappable control keeps at least the height it had before this pass: view tabs (39px), search input (32px), filter chips (29px), the Show selector (29px), the sort buttons (28px) and the expand chevron. Density here is bought from PADDING, GAPS and LINE-HEIGHT — the space around the controls — never from the hit areas themselves. If you need more room later, take it from a band, not from a target. ------------------------------------------------------------------- */ @media (max-width: 760px) { /* --- masthead: 72px -> 62px ------------------------------------- Two lines (brand, then full-width search) is kept: at 320px a single-line masthead leaves under 80px for the search field, which is a search box in name only. So the saving comes from the gap and the brand lockup, and the 32px search input — a touch target — is untouched. 26 (brand) + 4 (gap) + 32 (search) = 62. */ .bar { height: 62px; gap: 4px; } .brand { height: 26px; } .tbtn { top: 2px; } /* --- stat rail: 59px -> ~33px ------------------------------------ The single thickest band above the table and the one thing nobody opened the site for. It is NOT deleted — the operator’s read and mine agree it earns its place — it is folded from a two-line card (label over value) onto ONE baseline-aligned line per KPI: "Coins tracked 13,380". The rail already scrolls horizontally, so the KPIs getting wider costs nothing; the height is what was expensive. */ .statwrap .stats { padding: 3px 0; } .statwrap .kpis { gap: 5px; align-items: stretch; } .statwrap .kpi { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; min-width: 0; } .statwrap .kpi i { font-size: 10.5px; margin: 0; flex: 0 0 auto; } .statwrap .kpi b { font-size: 13px; line-height: 18px; } /* --- filter rails: 77px of block -> ~38px ------------------------- The chain chips, the launchpad chips and the Show selector were three controls spread over two stacked rails. They are merged into ONE horizontally scrolling rail. REGRESSION HISTORY — READ THIS BEFORE EDITING. An earlier change put the Show selector BESIDE the chips to save this same vertical space, and when the second (launchpad) chip rail arrived the chips CLIPPED MID-WORD instead of scrolling. That was fixed on 2026-09-09 by giving each rail full width plus a right-edge fade. This block must not walk back into it, and its shape is what prevents that: - `.tools` is the ONLY scroll container (`overflow-x: auto`). - `.chips-group` becomes `display: contents`, so the two `.chips` groups and `.tools-r` are siblings in that one rail. - EVERY child is `flex: 0 0 auto` with `min-width: max-content` and `overflow: visible`. Nothing can be squeezed, so nothing can clip: there is no flex competition left to lose. That is strictly safer than two rails, where a flexible child could be starved. Verify any change here by screenshot at 390px AND 320px and confirm no chip is cut mid-word. `.tools-r` is pulled to the head of the rail with `order`, because a "Show: everything / live / dead / watchlist" filter that starts off-screen is a filter most readers never find. DOM order is left alone, so the tab order still runs chips-then-selector. */ .tools { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px 0; overflow-x: auto; scrollbar-width: none; /* Same right-edge fade, same numbers, as the 2026-09-09 chip-rail fix in redesign.css — it is the site's existing "this scrolls" signal. */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); } .tools::-webkit-scrollbar { display: none; } .chips-group { display: contents; } .chips-group .chips, .tools .chips { flex: 0 0 auto; width: auto; min-width: max-content; overflow: visible; mask-image: none; -webkit-mask-image: none; } /* `width: auto` is load-bearing, not tidying. redesign.css's own narrow query sets `.tools-r { width: 100% }` — correct when it was a rail of its own, fatal here: as a flex item in the shared rail it claimed the full 366px and pushed both chip groups off-screen, which looked exactly like the chips had stopped rendering. */ .tools-r { order: -1; flex: 0 0 auto; flex-wrap: nowrap; width: auto; } .tools-r .sel { flex: 0 0 auto; width: auto; min-width: max-content; } /* --- table head: 41px -> ~31px ----------------------------------- Taken entirely from the row padding. `button.srt` keeps its 28px height because it is the sort control and it is tapped. This was `.tbl thead tr { padding: 1px 0 }` while the header was a CSS grid. The header is a real again (see the columns block at the foot of this file) and padding on a table-row paints nothing, so the same 30px is bought on the instead. Identical number, expressed where the table layout can honour it. */ .tbl thead th { height: 30px; } /* --- row: 63px -> ~51px ------------------------------------------ WHAT THIS SAID BEFORE 2026-09-09, and why it no longer holds: the row was two grid rows (28px identity + 15px paired stock + 4/4 padding = 51), on the argument that the paired-stock chip cannot share the name line at 320px. That argument was correct FOR A ROW THAT COULD NOT SCROLL SIDEWAYS. It can now, so the paired stock has its own column and nothing has to share anything: the row is ONE line and the height falls out of the 26px logo plus 4/4 padding. Which is the direction the constraint runs. the operator’s density numbers (2026-09-09) — <=203px of chrome above row 1, <=52px rows, >=12 rows above the fold at 390x844 — are a floor that survived this change, not a thing traded against it. Restoring ten columns costs HORIZONTAL space. If a future change here starts costing vertical space, that is the signal it has taken the wrong approach. */ .tbl tbody tr.r > td { padding-top: 4px; padding-bottom: 4px; } .nm-top { line-height: 15px; } .nm-sub { line-height: 13px; margin-top: 0; } /* Both of these are DATA, not chrome, and both sat at 10px — under the 11px floor for a figure a reader is meant to act on. The density pass is the moment to fix that, not to bank it: market cap is the default sort key and the paired ticker is the product. `.nm-mc` is the market-cap figure that used to be stacked inside the name cell; it now has a column of its own and is switched off down below, so only the chip rule still bites. */ .nm-mc { font-size: 11px; } .plate-t b { font-size: 11px; } } /* =================================================================== ALL TEN COLUMNS ON A NARROW VIEWPORT — product reviewer, 2026-09-09 =================================================================== THE ASK, verbatim: "Bring back all old columns" and "Market cap should be its own column." THE ROOT CAUSE, measured on the live site before this block existed: `#scroller` computed `overflow-x: visible` below 760px. With sideways scrolling switched off, ten columns have nowhere to go, so the layout did the only thing left to it — folded five of them away (Name, Paired stock, Volume 24h, Stock locked in pool, Holders) and stacked the market cap and the paired-stock chip INSIDE the name cell. Every symptom Matt reported came from that one property. THE PATTERN — CoinMarketCap's, and the one app.css already described for itself before the phone layout overrode it: the table stays a TABLE, the region scrolls sideways, and the identity columns (star, rank, name) pin to its left edge while the figures scroll under them. Nothing is hidden and nothing is stacked; the columns cost HORIZONTAL space, which a narrow viewport has an unlimited supply of. WHY THE REGION ALSO GETS A HEIGHT CAP. `overflow-x: auto` cannot be combined with `overflow-y: visible` — CSS computes the `visible` to `auto`, so the wrapper becomes a scroll container on BOTH axes whether or not that was asked for. A `position: sticky` inside it then anchors to that container, and an uncapped container never scrolls vertically, so the header would simply never pin. The cap turns the wrapper into a real frozen-pane grid instead: the header pins to the top of the region, the identity columns pin to its left, and the two stickies compose instead of cancelling. This is not a new invention for the phone — it is exactly what app.css has done at every width below 1400px all along (1280x900 measures `max-height: 768px` today), so narrow now behaves like the rest of the site rather than like an exception. DENSITY IS A FLOOR HERE, NOT A TRADE — G, 2026-09-09: <=203px of chrome above row 1, <=52px rows, >=12 rows fully above the fold at 390x844. Restoring the columns is paid for sideways. The row went from two lines to ONE, so it got SHORTER, not taller. If a change to this block ever needs a second line per coin, the change is wrong: the whole point of scrolling sideways is that a coin is one line. VIEWPORT SHAPE ONLY. Same rule as the density block above — the sole condition is `max-width: 760px`. No user-agent test, no `isMobile`, no `(pointer: coarse)`, no `(hover: none)`. G asked for the mobile-native treatment "on the tall and narrow view, whether it's mobile or not", and a narrow desktop window is exactly the case a touch-capability test would wrongly exclude. CLASSES, NEVER INDEXES. Every selector below keys off `.c-mc`, `.pair-c`, `.c-lock` and friends, which is the rule index.html states above the market-cap . The order there and the order in app.js drawRow() are the only pair that must stay in step. ------------------------------------------------------------------- */ @media (max-width: 760px) { /* --- 1. the region scrolls sideways again ------------------------- Restores what app.css's <=1400px query already says and redesign.css's phone layout switched off. `scrollbar-width: none` because a horizontal scrollbar parked under the last row would eat vertical space to say something the right-edge fade says for free. */ .tbl-scroll { overflow: auto; max-height: calc(100vh - 132px); max-height: calc(100dvh - 132px); border-bottom: 1px solid var(--line); scrollbar-width: none; /* LOAD-BEARING, AND IT COST AN HOUR TO FIND. Without it the 1017px table leaks its width into the document's contents size even though the scroller clips it: `documentElement.scrollWidth` read 642 against a 390px viewport, and mobile Chrome then WIDENS THE LAYOUT VIEWPORT to swallow the overflow — `window.innerWidth` came back 635 and the page renders as a zoomed-out desktop layout. That is the exact bug redesign.css documents at its `html { overflow-x: clip }` rule, and this is the same class of failure arriving from a new direction: `clip` stops it being PAINTED, it does not stop it being COUNTED. `contain: layout` does — it walls the region's layout off from its ancestors' — and it is safe against everything this table needs: `position: sticky` still pins on both axes (measured, not assumed), and the one fixed-position element on the page, #tip, lives at the end of and never inside this region. Verify with tools/measure-density.js: `viewport` must print the size you asked for. If it prints something wider, this line is gone. */ contain: layout; /* The "this scrolls" cue, same gradient and same 24px as the chip rail above and the tab rail — one affordance, used three times, rather than a third dialect. It lifts at the end of the scroll so the Holders figure is never read through a veil; app.js toggles `is-atend` from the same scroll listener that drives the pinned columns' drop shadow. */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); } .tbl-scroll::-webkit-scrollbar { display: none; } .tbl-scroll.is-atend { -webkit-mask-image: none; mask-image: none; } /* --- 2. it is a again ------------------------------------- redesign.css set `display: block` on the table parts to take the table layout algorithm out of the picture so each row could be its own grid. The columns are back, so the algorithm is back: it is the thing that keeps a header cell and its figures in one column. `width: max-content` lets the table be exactly as wide as its content needs and no wider — a hard `min-width` in px would either truncate a column or invent empty scroll distance. */ .tbl { display: table; width: max-content; min-width: 100%; } .tbl thead { display: table-header-group; } .tbl tbody { display: table-row-group; } .tbl thead tr { display: table-row; border-bottom: 0; } .tbl tbody tr.r { display: table-row; position: static; padding: 0; border-bottom: 0; } .tbl tbody tr.r > td { display: table-cell; height: auto; padding-left: 7px; padding-right: 7px; border-bottom: 1px solid var(--line); background: var(--surface); white-space: nowrap; overflow: hidden; vertical-align: middle; } /* Opaque, and it has to be: a transparent pinned cell shows the scrolled figures sliding underneath it. */ .tbl tbody tr:hover td { background: var(--surface-2); } /* --- 3. nothing is hidden ----------------------------------------- The columns redesign.css switched off on the phone. Written as `.tbl tbody tr.r > td.X` and not the shorter `.tbl .c-X`, because the rule being reversed is at that specificity and a shorter selector would silently lose to it — the same trap redesign.css documents for itself. NINE, NOT FIVE, SINCE 2026-09-09 — 1h %, 7d %, Liquidity and Fees 24h were added back to the table and are shown here too. The phone gets the SAME columns as the desktop and pays for them in scroll distance, not in hidden figures: the honest failure mode for a leaderboard on a narrow screen is a longer swipe, and a column the phone silently drops is one a reader cannot know to look for. This list must match redesign.css's hide list exactly. */ .tbl tbody tr.r > td.c-star, .tbl tbody tr.r > td.c-mc, .tbl tbody tr.r > td.c-chg1, .tbl tbody tr.r > td.c-chg7, .tbl tbody tr.r > td.c-vol, .tbl tbody tr.r > td.c-liq, .tbl tbody tr.r > td.c-fees, .tbl tbody tr.r > td.c-lock, .tbl tbody tr.r > td.c-hold { display: table-cell; } /* MARKET CAP IS ITS OWN COLUMN — the second half of Matt's ask. The name cell used to carry a `.nm-mc` copy of the figure because there was no column to put it in. There is one now, so the copy goes: the same number printed twice, once in a column with a sort control and once as a subtitle, is the ambiguity the ask was about. */ .nm-mc { display: none; } /* Same reasoning for the paired stock: its own column, not a subline. */ .tbl tbody tr.r > td.pair-c { display: table-cell; grid-area: auto; padding-left: 7px; width: auto; overflow: hidden; line-height: 1.2; } /* --- 4. the pinned left edge -------------------------------------- Star, rank and name hold their ground while the figures scroll under them. All THREE, not just rank and name: they are the three leftmost cells, and pinning a subset would leave the unpinned one scrolling out from between the others and tearing the seam open. The `left` offsets are NOT written here. app.js measures them off the rendered header row and writes them inline, because the table layout algorithm's actual widths drift from the declared ones and a sticky cell whose natural position is left of its `left` gets shoved right, overlapping its neighbour. Widths below are floors for that measurement, not the offsets themselves. */ .tbl tbody tr.r > td.c-star, .tbl tbody tr.r > td.c-rank, .tbl tbody tr.r > td.c-name { position: sticky; z-index: 10; } .tbl thead .c-star, .tbl thead .c-rank, .tbl thead .c-name { position: sticky; z-index: 30; } /* Budget: 22 + 24 + 146 = 192px pinned of a 366px viewport, leaving ~174px of scroll window. Pinning more than about half the width stops being a frozen pane and starts being a narrower screen. */ .tbl .c-star { width: 22px; min-width: 22px; padding: 0 0 0 3px; } .tbl .c-rank { width: 24px; min-width: 24px; padding-left: 2px; padding-right: 2px; } .tbl .c-name { width: 146px; min-width: 146px; max-width: 146px; } .tbl td.c-rank { font-size: 11px; text-align: left; } /* The ticker is the one thing here allowed to ellipsis. Everything else in the pinned block is fixed-size, so it is also the only thing that CAN absorb a long name without widening the pane. */ .tbl td.c-name .nm-tk { max-width: 62px; } /* The seam. A hairline plus the existing drop shadow, so the edge reads as a deliberate boundary rather than as clipping. `::after` is re-enabled here — redesign.css set it to `display: none` when nothing scrolled sideways, which was correct then. */ .tbl-scroll.is-scrolled .c-name::after { display: block; } .tbl .c-name { border-right: 1px solid var(--line); } /* That `::after` is drawn OUTSIDE the cell — `right: 0` plus `translateX(100%)` — so the cell cannot be `overflow: hidden` or the seam is clipped to nothing and the pinned block ends in a hard edge with no shadow at all. Which is what happened first time round. The ellipsis lives on `.nm-tk`, which clips itself, so nothing is lost by letting this one cell overflow. */ /* The hairline has to be restated at this specificity as well: redesign.css zeroes `border` on `.tbl tbody tr.r > td`, which beats a plain `.tbl .c-name`, so the seam drew on the
and vanished on every row underneath it — a boundary that exists only in the header reads as a rendering fault, not as a frozen pane. */ .tbl tbody tr.r > td.c-name { overflow: visible; border-right: 1px solid var(--line); } /* --- 5. one line per coin ----------------------------------------- `.nm-tx` stacked the ticker over a subline. Side by side instead: ticker, then the chain badge. That is what keeps the row to a single line and the row height to ~35px, comfortably under the operator’s 52px ceiling. */ .nm-tx { display: flex; flex-direction: row; align-items: baseline; gap: 5px; min-width: 0; } .nm-top { display: block; min-width: 0; overflow: hidden; } .nm-sub { flex: 0 0 auto; } /* The expander keeps its full 26px hit area — it is a touch target and the accessibility floor in the density block above applies unchanged. It stops being absolutely positioned because there is no longer a two-line row to hang it off; inline in the name cell, it sits inside the pinned pane where a reader's thumb already is. */ .exp { display: inline-grid; place-items: center; position: static; transform: none; width: 26px; height: 26px; margin-left: 2px; vertical-align: middle; border-radius: 50%; color: var(--muted); background: var(--surface-2); } .tbl tbody tr.r > td.c-name > .nm { display: inline-flex; vertical-align: middle; max-width: calc(100% - 30px); } /* The below-floor / no-trades tags were absolutely positioned into the corner of a two-line cell. There is no second line to sit on, so they ride the rank cell's title instead of overlapping a ticker; the reason text is on the rank cell's `title` either way. */ .tbl tbody tr.r > td.c-name > .tag { display: none; } /* `.lk` is a three-line stack at desktop (units / dollars / meter). Three lines inside a one-line row would set the row height for every coin, so it lays out along the row instead — the column just gets wider, which is the currency this whole block spends. */ .lk { flex-direction: row; align-items: center; justify-content: flex-end; gap: 5px; } .lk-units { font-size: 11.5px; } .lk-usd { font-size: 11px; } .lk-meter { width: 34px; } /* --- 6. the drawer ------------------------------------------------ Still a row of the table, so it is a table-row again. Its contents are pinned to the left edge: the table is now ~770px wide and a drawer that scrolled off with the Holders column would be a panel the reader has to go looking for. */ tr.det { display: table-row; } tr.det[hidden] { display: none; } tr.det > td { display: table-cell; padding: 10px 12px 11px; } tr.det .dw, tr.det .dw-go { position: sticky; left: 0; width: calc(100vw - 2 * var(--gut) - 24px); } .dw dt { font-size: 11px; } .dw dd { font-size: 13px; } } /* 320px. The pinned pane is the only thing that has to give: at 296px of viewport, 192px of frozen columns would leave 104px of scroll window, which is a pane with a peephole beside it. */ @media (max-width: 380px) { .tbl .c-star { width: 20px; min-width: 20px; padding-left: 2px; } .tbl .c-rank { width: 22px; min-width: 22px; } .tbl .c-name { width: 122px; min-width: 122px; max-width: 122px; } .tbl td.c-name .nm-tk { max-width: 44px; } .nm .logo, .nm .logo-ph { width: 22px; height: 22px; flex: 0 0 22px; } .tbl tbody tr.r > td { padding-left: 5px; padding-right: 5px; } } /* Community navigation stays in the existing horizontally scrolling rail. */ .tabs-in > a.community-view { flex: 0 0 auto; padding: 10px 12px; color: inherit; text-decoration: none; font: inherit; white-space: nowrap; } .tbl .c-treasury { white-space: nowrap; } @media (max-width:760px) { .tabs-in > a.community-view { padding: 8px 10px; font-size: 12px; } .tbl tbody tr.r > td.c-treasury { display: table-cell; } } /* Tablet-width table scrolling must not enlarge the mobile layout viewport. */ @media (min-width:761px) and (max-width:1840px) { #scroller { contain: layout; } .bar-nav { min-width:0; overflow-x:auto; } } @media (min-width:761px) and (max-width:1080px) { .stats .card { min-width:0; } .stats .kpis { grid-template-columns:repeat(4,minmax(0,1fr)); } .stats .kpi { min-width:0; } .stats .kpi small { white-space:normal; } }