in the HTML, because these tables are re-rendered from JavaScript and a static wrapper is only as durable as the next innerHTML that replaces it. */ .settings-card, .ac-card .span-3 { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- the Reports tab strip --------------------------------------- Six buttons, flex-wrap:nowrap, no overflow rule -- so it ran 247px past the edge of the screen. It scrolls sideways now, the same way the top nav used to before it became the sidebar. */ .rp-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; } .rp-tabs > * { flex-shrink: 0; } /* ---- touch targets ----------------------------------------------- 106 controls measured under 32px tall, most of them 26-28px, and 82 of those on Settings alone. That is fine with a mouse and fiddly with a thumb; Apple asks for 44px and Android for 48dp. 36px is the compromise that does not make every dense table twice as tall. Scoped to main so the sidebar keeps its own sizing, and checkboxes and radios are excluded -- stretching a 16px box to 36px just puts a large invisible target around a small visible control. */ main button, main input, main select, main textarea { min-height: 36px; } main input[type="checkbox"], main input[type="radio"] { min-height: 0; } /* ---- fixed-layout tables whose columns are declared in pixels ----- `table-layout: fixed` hands each column exactly the width it declares and gives whatever is left to the ones that declare nothing. On the Automation activity log that is 130 + 160 + 200 = 490px of declared columns inside a 317px phone screen, so Details -- the only column with no declared width -- got LITERALLY ZERO. Its cell also carries `overflow-wrap: anywhere`, so instead of overflowing it wrapped after every single character: 111 characters became 107 lines and one row stood 1,926px tall. That is the column of single letters in the screenshot. The cure is to stop pretending the table fits. Give it a real width, wider than the screen, and let the container scroll -- which is what every other table in the app already does. Details then gets 230px and wraps like ordinary text. !important throughout because these widths are inline attributes on the elements, and an inline style beats a stylesheet without it. */ #ac-activity-table { width: 650px !important; min-width: 650px !important; } /* 05-tables.css sets "td { white-space: nowrap }" for every table in the app. With table-layout:fixed that is a bad pair: a cell too narrow for its text cannot wrap, and nothing clips it either, so it paints straight over the column to its right -- which is why the User column had "(super_admin)" sitting underneath "Automation settings". Let these cells wrap. break-word is the backstop for a username with no space in it to break at. */ #ac-activity-table th, #ac-activity-table td { white-space: normal !important; overflow-wrap: break-word; word-break: break-word; } #ac-activity-table th:nth-child(1), #ac-activity-table td:nth-child(1) { width: 110px !important; } #ac-activity-table th:nth-child(2), #ac-activity-table td:nth-child(2) { width: 140px !important; } #ac-activity-table th:nth-child(3), #ac-activity-table td:nth-child(3) { width: 170px !important; } #ac-activity-table th:nth-child(4), #ac-activity-table td:nth-child(4) { width: 230px !important; } /* The Activity tab has the same bug in a six-column table: 745px of declared widths, Details declaring none. It lives in a .table-wrap, whose cells are already nowrap above, so the honest fix there is to drop the fixed layout entirely and let the content size the columns -- exactly how the Transactions table behaves. */ #tab-activity .table-wrap > table { table-layout: auto !important; } #tab-activity .table-wrap > table th, #tab-activity .table-wrap > table td { width: auto !important; } /* Two more of the same on Settings, found by looking for the pattern rather than waiting for them to be reported: · the PDGFID check-name card declares 110px + 250px of a 317px screen, so "Active SKU" -- the