/* ============================================================================ MOBILE LAYER — OGalo Loaded last. Everything here is inside a `max-width: 700px` (or coarse pointer) query and exists to answer a measured defect found by reviewing the product on a 390x844 phone. Desktop must not be able to see this file. SPECIFICITY NOTE: view stylesheets are injected into at runtime by `useStyles()`, so they land AFTER this link and win at equal specificity. Rules here that have to beat a view stylesheet must say so explicitly — prefix with `html` or repeat the class. Do not use !important; if a rule is not winning, measure which selector beat it and out-rank that one. ========================================================================== */ @media (max-width: 700px) { /* The tab strip is a fixed-pitch row, and a view that names its tabs after data ("Top", "Latest", "People", "Photos" with counts) runs out of screen before it runs out of tabs: on /topic at 320px the last tab measured 255→361 against a 320px viewport and took the whole document with it (scrollWidth 362). Tabs are a scroller on a phone, the same way the explore chips and the diary's week rail already are. The fade is the only thing that says so once the last tab is off the right edge. */ html .topbar .tabs, html .tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html .tabs::-webkit-scrollbar { display: none; } html .tabs > .tabs__tab { flex: 0 0 auto; } }