diff options
Diffstat (limited to 'packages/meshbay-hub/src')
8 files changed, 440 insertions, 28 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py index 0d9d1f8..05485e0 100644 --- a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py +++ b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py @@ -34,7 +34,7 @@ _ASSETS = ("style.css", "keyderive.js", "crypto.js", "transport.js", "app.js", # app.js or group-page.js, so a change to any of them is a change # to what the browser must fetch. "icon.js", "file-utils.js", "hub-client.js", "apps.js", - "source-merge.js", + "source-merge.js", "sticky.js", "chat-app.js", "files-app.js", "video-player.js", "video-app.js", "music-app.js", "music-player.js", "photos-app.js", "group-settings.js", "group-page.js", @@ -184,7 +184,15 @@ _HTML = """\ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- `interactive-widget=resizes-content`: on Android the soft keyboard + shrinks the visual viewport and leaves the layout viewport alone, which + is the platform default. `position: sticky` anchors to the layout + viewport, so with a keyboard up the pinned header of a group or of + Search sits at a coordinate the reader can no longer see — it reads as + though it had scrolled away. This asks for the keyboard to resize the + layout viewport instead, so what is pinned stays where it is looked at. + Ignored by browsers that do not know it. --> + <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content"> <title>MeshBay</title> <link rel="stylesheet" href="/a/{v}/style.css"> </head> diff --git a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js index 65860ec..882a8fa 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js @@ -9,6 +9,7 @@ import { FILE_ICONS, formatSize, formatDate, canPreview, CHUNK_SIZE, MEMORY_CEILING, pipelinedDownload, downloadEntry, downloadDirectory as sharedDownloadDirectory, } from './file-utils.js'; +import { useStickyBand } from './sticky.js'; // ── Files ──────────────────────────────────────────────────────────────────── // @@ -35,6 +36,11 @@ function FilesPanel({ const [filter, setFilter] = useState(''); const [currentPath, setCurrentPath] = useState(''); const [refreshing, setRefreshing] = useState(false); + // The toolbar pins below the page's own band and tells the column heads how + // far down to pin. Its height is not a constant — it wraps to three rows on + // a phone and grows a field while a folder is being named — so it is + // measured rather than written down (sticky.js). + const toolbarBand = useStickyBand('--toolbar-h'); // Only the cross-group Search page shows this (`showRefresh`): it has no // live node connection pushing index deltas, so its file list really is @@ -406,7 +412,7 @@ function FilesPanel({ `} ${status === 'connected' && html` - <div class="file-toolbar"> + <div class="file-toolbar" ref=${toolbarBand}> <div class="toolbar-group"> ${currentPath && currentRootWritable && html` <label class="tb-btn primary"> @@ -495,7 +501,7 @@ function FilesPanel({ <th class="sortable" onClick=${() => toggleSort('size')}> ${t('group.col_size')} ${sortKey === 'size' ? (sortAsc ? '▲' : '▼') : ''} </th> - ${showGroup && html`<th>${t('search.col_group')}</th>`} + ${showGroup && html`<th class="td-group">${t('search.col_group')}</th>`} <th class="sortable th-type" onClick=${() => toggleSort('type')}> ${t('group.col_type')} ${sortKey === 'type' ? (sortAsc ? '▲' : '▼') : ''} </th> @@ -514,7 +520,7 @@ function FilesPanel({ <td>${'\u{1F4C1}'}</td> <td>..</td> <td class="file-size"></td> - ${showGroup && html`<td></td>`} + ${showGroup && html`<td class="td-group"></td>`} <td class="td-type"></td> <td class="td-date"></td> </tr> @@ -536,7 +542,15 @@ function FilesPanel({ onChange=${() => toggle(dirKey(d))} /> </td> <td>${isEjected ? '\u{23CF}' : isUnavail ? '\u{26A0}' : '\u{1F4C1}'}</td> - <td>${d}${isEjected ? html` + ${/* `file-name`, like a file's own name cell. Without it this + was a bare <td>, so a folder called + `Rage_Against_The_Machine_Discography_1992-2000_FLAC` — + one unbreakable word, which is how music libraries are + named — set the column's minimum width to the whole + string. Measured on a phone: a 527px table in a 390px + window, and on Android a page wider than the screen takes + every pinned header out of the visible area with it. */''} + <td class="file-name">${d}${isEjected ? html` <span class="root-offline"> ${t('group.root_ejected')}</span> ` : isUnavail ? html` <span class="root-offline"> ${t('group.root_unavailable')}</span> @@ -559,7 +573,7 @@ function FilesPanel({ }}>${isEjected ? '\u{1F50C}' : '\u{23CF}'}</button> ` : ''}</td> <td class="file-size">${inside.length ? formatSize(bytes) : ''}</td> - ${showGroup && html`<td></td>`} + ${showGroup && html`<td class="td-group"></td>`} <td class="td-type"></td> <td class="td-date"></td> </tr> @@ -582,7 +596,7 @@ function FilesPanel({ onClick=${() => { setFilter(''); setCurrentPath(e.path); }}>${e.path}</a>`} </td> <td class="file-size">${formatSize(e.size)}</td> - ${showGroup && html`<td> + ${showGroup && html`<td class="td-group"> <a href="#/group/${e.groupId}" class="badge">${e.groupName || ''}</a> </td>`} <td class="file-type td-type">${e.type}</td> diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js index e897646..1b7ed53 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js @@ -11,6 +11,7 @@ import { } from './hub-client.js'; import { APPS, visibleApps } from './apps.js'; import { GroupName } from './group-name.js'; +import { useStickyBand } from './sticky.js'; import { FilePreview } from './files-app.js'; import { VideoPlayer } from './video-player.js'; import { GroupSettingsPanel } from './group-settings.js'; @@ -26,6 +27,9 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs, onRefreshAuth, onJoined, onGroupUpdated, onPresence, onLeft, onPlayQueue: parentOnPlayQueue, onStopMusic }) { const [status, setStatus] = useState('idle'); + // The tab bar pins under the navigation bar and tells the application's own + // toolbar how far down to pin (style.css, "Sticky chrome"). + const tabBand = useStickyBand('--chrome-h'); // Whether this connection has identified a device to the node (`device_hello`). // Held as state, not read off the transport at render time: it is settled // inside connect() and re-settled by every reconnect, and the Chat composer @@ -711,7 +715,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs, }; return html` - <div> + <div class="sticky-chrome"> <div class="group-header"> <div> <h2 style="margin-bottom:${group && group.description ? '4px' : '0'}"> @@ -811,7 +815,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs, would otherwise have made them unreachable exactly when a node is down — which is when someone is most likely to want them. The apps below still need the node and say so. */ group && html` - <div class="group-tabs"> + <div class="group-tabs" ref=${tabBand}> ${apps.map(a => html` <button key=${a.key} class="group-tab ${tab === a.key ? 'active' : ''}" onClick=${() => setTab(a.key)} title=${t(a.labelKey)}> diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js index 437af8b..dce5833 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js @@ -318,15 +318,23 @@ function SharedDirectoriesTable({ roots, groupId, transport, signFn, </td> ${hasPaths && html` <td class="sdt-col-path" title=${r.path || ''}>${r.path || ''}</td>`} + ${/* The same string as the column head above, and deliberately + the same key: below 768px the head is gone — the row is two + stacked lines there, not a table row — and a bare switch with + nothing beside it says nothing at all. The label is hidden by + the stylesheet at every width where the column head is + doing the job. */''} ${canEdit && html` <td class="sdt-col-toggle"> <${ToggleSwitch} checked=${!!r.writable} disabled=${busy || !!r.ejected} + label=${t('node.root_rw')} onChange=${(v) => doUpdateRoot(r.name, { writable: v })} /> </td> `} ${canEdit && !isLocal && html` <td class="sdt-col-toggle"> <${ToggleSwitch} checked=${!!r.removable} disabled=${busy} + label=${t('node.removable')} onChange=${(v) => doUpdateRoot(r.name, { removable: v })} /> </td> `} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js index a58af8c..2c4356c 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js @@ -353,13 +353,19 @@ function PhotosApp({ <p class="page-message">${t('photo.no_roots_configured')}</p> `} ${status === 'connected' && (photoDirectories || []).length > 0 && !openAlbum && html` - <div class="photo-toolbar"> - ${!hideFilter && html`<div class="tb-search"> - <${Icon} name="search" /> - <input type="text" placeholder="${t('group.filter')}" - value=${filter} onInput=${(e) => setFilter(e.target.value)} /> - </div>`} - </div> + ${/* The filter is the only thing in it, so under `hideFilter` there is + no toolbar rather than an empty one — an empty band still pins, + and would hold a strip of the page open under the search field + for nothing. */ + !hideFilter && html` + <div class="photo-toolbar"> + <div class="tb-search"> + <${Icon} name="search" /> + <input type="text" placeholder="${t('group.filter')}" + value=${filter} onInput=${(e) => setFilter(e.target.value)} /> + </div> + </div> + `} ${filteredAlbums.length === 0 && html` <p class="page-message">${needle ? t('group.empty_filter') : t('photo.empty')}</p> `} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/search-page.js b/packages/meshbay-hub/src/meshbay_hub/static/search-page.js index 4ed3df1..81d4ac2 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/search-page.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/search-page.js @@ -14,6 +14,7 @@ import { PhotosApp, groupPhotoAlbums } from './photos-app.js'; import { VideoPlayer } from './video-player.js'; import { transfers } from './transfers.js'; import { mergeUnitEntries } from './source-merge.js'; +import { useStickyBand } from './sticky.js'; const BATCH_SIZE = 3; // One WebRTC peer connection per group the search view touches. The cap bounds @@ -653,6 +654,10 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs }) // No-op setters for FilesPanel const noop = useCallback(() => {}, []); + // The search field and its view toggle are this page's equivalent of a + // group's tab bar: the same band, pinned the same way, publishing the same + // property for the toolbar underneath (style.css, "Sticky chrome"). + const searchBand = useStickyBand('--chrome-h'); // -- Render -- @@ -662,8 +667,8 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs }) const defaultGRef = useRef(null); return html` - <div> - <div class="search-bar"> + <div class="sticky-chrome"> + <div class="search-bar" ref=${searchBand}> <${Icon} name="search" /> <input type="text" placeholder=${t('search.placeholder')} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/sticky.js b/packages/meshbay-hub/src/meshbay_hub/static/sticky.js new file mode 100644 index 0000000..e48d88d --- /dev/null +++ b/packages/meshbay-hub/src/meshbay_hub/static/sticky.js @@ -0,0 +1,84 @@ +import { useRef, useCallback } from './vendor/htm-preact.js'; + +// ── Sticky chrome ──────────────────────────────────────────────────────────── +// +// Files, Videos, Music and Photos are read by scrolling, and everything that +// steers that reading — which application, where in the tree, which filter — +// used to scroll away with the first screenful. The controls stay pinned under +// the navigation bar instead: the group's tab bar (or, on the Search page, the +// search field and its view toggle), then the application's own toolbar, then +// the file table's column heads. `style.css`'s "Sticky chrome" section holds +// the rules; this holds the one thing CSS cannot supply. +// +// A band's `top` is the sum of the heights of the bands above it, and those +// heights are not constants: the toolbar wraps to two or three rows on a phone +// (`.video-toolbar { flex-wrap: wrap }` is deliberate), grows a field while a +// folder is being named, and loses its filter entirely under `hideFilter`. +// Writing a number down would be the second subtraction in a second file that +// CLAUDE.md already records twice — a page permanently a few pixels wrong, and +// nothing in either file to show it. So each band measures itself and publishes +// its height as a custom property; the stylesheet does the arithmetic in +// `calc()`, from the one measurement. +// +// This is not the mutate-then-measure loop that made the chat panel re-enter +// itself 120 times a second. The property a band writes moves the `top` of a +// *different*, lower band and nothing else: `--chrome-h` is read only by the +// toolbars, `--toolbar-h` only by `.file-table th`. Neither can change the +// height of the element being observed, so the observer cannot wake itself. +// +// The property lands on the band's **parent**, which is the page's own root +// element and therefore an ancestor of every band under it. An application +// returns a fragment rather than a single element (all four do), so there is no +// per-application node to hang it on — but every one of those fragments is +// rendered into the same page root, which is also where the tab bar and the +// search bar sit. + +/** + * A ref for an element that pins under the navigation bar and publishes its + * own height as `name` for whatever pins under *it*. + * + * Returns a ref callback rather than taking a `useRef` object because these + * bands are rendered conditionally — the toolbar exists only once the node has + * answered — and an effect keyed on a ref would not run when the element + * finally appears. A ref callback is invoked when it does, and again with + * `null` when it goes, which is also where the property is withdrawn: a stale + * `--toolbar-h` left behind by Files would offset a table that is no longer + * on the page. + */ +export function useStickyBand(name) { + const attached = useRef(null); + + return useCallback((el) => { + const prev = attached.current; + if (prev) { + if (prev.observer) prev.observer.disconnect(); + prev.host.style.removeProperty(name); + attached.current = null; + } + // `parentElement` is null for the brief moment a ref is applied to an + // element not yet inserted; there is nothing to publish onto then, and the + // next mount calls this again. + if (!el || !el.parentElement) return; + + const host = el.parentElement; + // Height **plus the band's own bottom margin**. What the band below needs + // is not where this one ends but where it ends *including the gap it keeps + // in the flow* — pinning absorbs that margin, and a band pinned flat + // against the one above it is what the first version of this shipped. + // The same number paints the gap (style.css's `--band-margin`), so the two + // cannot drift. + const publish = () => { + const gap = parseFloat(getComputedStyle(el).marginBottom) || 0; + host.style.setProperty(name, `${el.offsetHeight + gap}px`); + }; + publish(); + + // Older engines without ResizeObserver keep the height measured at mount, + // which is right until the toolbar wraps. The band is still pinned; only + // the one below it can end up a row too high. + const observer = typeof ResizeObserver === 'undefined' + ? null : new ResizeObserver(publish); + if (observer) observer.observe(el); + attached.current = { host, observer }; + }, [name]); +} diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 5e08a6a..774c9bc 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -51,6 +51,28 @@ --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3); } +/* ── Metrics ──────────────────────────────────────────────────────────────── */ + +/* Not a palette: these are the layout's own numbers, so they sit outside the + theme blocks and neither theme overrides them. + + `--nav-h` is the height of `.nav`, which is `position: sticky` at the top of + every page — the offset everything else pins beneath. The other two are + *measured* at runtime by sticky.js and published onto the page's root + element, which shadows the value declared here. They are declared anyway, and + as `0px` rather than as nothing: an undefined custom property invalidates the + whole `calc()` that names it (test_css_variables.py has the story), so + without these a toolbar would silently lose its `top` — and lose it exactly + in the window between the first paint and the first measurement, which is + also the window a screenshot is most likely to catch. At `0px` the band pins + directly under the navigation bar instead, which is where it belongs when + there is nothing above it. */ +:root { + --nav-h: 52px; + --chrome-h: 0px; + --toolbar-h: 0px; +} + /* ── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -96,7 +118,12 @@ a:hover { text-decoration: underline; } border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); - margin-bottom: 12px; + /* A pinned band keeps this gap: `--band-margin` is both the margin in + the flow and the width of the opaque ring the band paints around + itself once pinned, so the two can never disagree (style.css, + "Sticky chrome"). */ + --band-margin: 12px; + margin-bottom: var(--band-margin); } .search-bar .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim); } .search-bar input { @@ -454,6 +481,103 @@ a:hover { text-decoration: underline; } visible and removes the duplicated arithmetic rather than adding more. */ .main:has(> .page-center) { padding: 0; } +/* ── Sticky chrome ────────────────────────────────────────────────────────── */ + +/* Files, Videos, Music and Photos are read by scrolling, and until now the + controls that steer that reading went with the first screenful: which + application, where in the tree, which filter, which column sorts. They pin + under the navigation bar instead, in three bands, on the two pages that show + those applications — a group (`group-page.js`) and Search (`search-page.js`), + both of which mark their root `.sticky-chrome`: + + .nav 52px, already sticky, --nav-h + .group-tabs / .search-bar which application / what is being searched + the application's toolbar where in the tree, the filter, the actions + .file-table th the column heads + + The group's name and description are deliberately *not* in the stack. They + say nothing a reader needs while walking a directory, and the height they + would cost is height the list does not get. + + Each band pins below the ones above it, so its `top` is their heights added + up — heights that change with the window (`.video-toolbar` wraps on a phone, + by design), with the state (naming a folder grows the toolbar; `hideFilter` + shrinks it) and with the theme's font. sticky.js measures them and publishes + `--chrome-h` and `--toolbar-h`; everything here reads those rather than + repeating a number that would be right in one file and wrong in another. + + `>` throughout, and not by accident: a band publishes its height onto its + own parent, so these rules and sticky.js are asserting the same structural + fact — these elements are children of the page root. Nest one deeper and + both stop applying, rather than the stylesheet pinning something the script + is no longer measuring. + + `.file-toolbar` is also the toolbar of the public directory + (`explore-page.js`), which is not one of these pages and is left alone. */ + +.sticky-chrome > .group-tabs, +.sticky-chrome > .search-bar { + position: sticky; + top: var(--nav-h); + z-index: 30; +} + +.sticky-chrome > .file-toolbar, +.sticky-chrome > .video-toolbar, +.sticky-chrome > .photo-toolbar, +.sticky-chrome > .photo-album-bar { + position: sticky; + top: calc(var(--nav-h) + var(--chrome-h)); + z-index: 20; +} + +.sticky-chrome > .file-table th { + position: sticky; + top: calc(var(--nav-h) + var(--chrome-h) + var(--toolbar-h)); + z-index: 10; +} + +/* A pinned band has the list running underneath it and must be opaque, which + most of these were not: only `.search-bar` and `.file-toolbar` came with a + surface of their own. So the bare bands take the page colour outright. */ +.sticky-chrome > .group-tabs, +.sticky-chrome > .video-toolbar, +.sticky-chrome > .photo-toolbar, +.sticky-chrome > .photo-album-bar, +.sticky-chrome > .file-table th { + background: var(--bg-base); +} + +/* **The gap a band keeps when it pins.** In the flow every band is followed by + a margin — 16px under the tab bar, 12px under the search field and the file + toolbar, 14px under the media ones. Pinning absorbs it: the band below stops + at the bottom edge of the band above and the two come into contact. Reported + on both counts, and they are the same fault — two rounded panels flush + against each other in Files read as *encastrés*, and the row of controls in + Videos/Music/Photos reads as glued to the tab bar. + + So each band paints its own margin as a ring of page colour around itself, + and the band below pins past it: `--chrome-h`/`--toolbar-h` are published by + sticky.js as **height plus that margin**, which is why the ring and the + offset can never disagree — they are the same number, declared once beside + the component's own `margin-bottom` and nowhere else. The pinned layout is + then pixel-identical to the flow layout, so nothing shifts at the moment a + band pins. + + The ring must be exactly the margin, not more: it is painted at the band's + own z-index, above every band below it, so a ring wider than the gap would + paint page colour over the top of the next band down. It is also what covers + the four transparent corners a border radius leaves, where a row's rule + sliding past would read as a flicker nobody can reproduce. */ +.sticky-chrome > .group-tabs, +.sticky-chrome > .search-bar, +.sticky-chrome > .file-toolbar, +.sticky-chrome > .video-toolbar, +.sticky-chrome > .photo-toolbar, +.sticky-chrome > .photo-album-bar { + box-shadow: 0 0 0 var(--band-margin) var(--bg-base); +} + /* ── Cards ────────────────────────────────────────────────────────────────── */ .card { @@ -583,7 +707,12 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } .group-tabs { display: flex; gap: 0; - margin-bottom: 16px; + /* A pinned band keeps this gap: `--band-margin` is both the margin in + the flow and the width of the opaque ring the band paints around + itself once pinned, so the two can never disagree (style.css, + "Sticky chrome"). */ + --band-margin: 16px; + margin-bottom: var(--band-margin); border-bottom: 2px solid var(--border); } @@ -798,7 +927,12 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } display: flex; align-items: center; gap: 10px; - margin-bottom: 12px; + /* A pinned band keeps this gap: `--band-margin` is both the margin in + the flow and the width of the opaque ring the band paints around + itself once pinned, so the two can never disagree (style.css, + "Sticky chrome"). */ + --band-margin: 12px; + margin-bottom: var(--band-margin); padding: 8px; background: var(--bg-raised); border: 1px solid var(--border); @@ -924,7 +1058,15 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } .file-table { width: 100%; - border-collapse: collapse; + /* Separated, with no spacing, rather than collapsed. A collapsed border is + shared between two cells and so belongs to the table rather than to either + of them — it stays where the table's flow put it while a `position: + sticky` column head moves away, so the head loses its rule the moment it + pins. Only the bottom edge of any cell here carries a border, so nothing + was being shared and the drawn result is the same single line; it now + travels with the head. */ + border-collapse: separate; + border-spacing: 0; font-size: 0.9em; } @@ -954,10 +1096,30 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } .dir-row { cursor: pointer; } .dir-row td { font-weight: 500; } -.file-name { +/* Every cell whose text is a name somebody else chose. + + A table column is never narrower than its widest cell's minimum, and a name + with no spaces in it — `Rage_Against_The_Machine_Discography_1992-2000_FLAC`, + `musique_de_la_maison_2024` — is one unbreakable word. Left to itself such a + cell sets the column's minimum to the whole string and the table grows past + the window: measured on a phone at 390px, a 527px table from a folder name + and a 442px one from a group name. That is not merely ugly. **On Android a + document wider than the screen takes everything `position: sticky` out of + the visible area with it** — the navigation bar included — so the reported + symptom was "the header does not stay", and the cause was a table column. + + Both cells used to be bare `<td>`s: `.file-name` was on a file's name and on + nothing else, so a *folder* row and the Search page's group column had no + wrapping rule at all. `test_sticky_header.py::test_no_view_scrolls_sideways` + measures the page against its window in both engines and at three widths. */ +.file-name, +.td-group { word-break: break-word; min-width: 0; } +/* The column heads are `white-space: nowrap` like every other one; the group + head is two syllables and never needed the exception. */ +.file-table th.td-group { white-space: normal; } /* Where a search result lives, under its name; click to open that folder and clear the filter. */ .file-loc { @@ -2127,6 +2289,13 @@ a.transfer-name { .page-center { padding: 16px; } .th-type, .td-type { display: none; } .th-date, .td-date { display: none; } + /* And the group column, on the same grounds as those two: there is no room + for it, and the name column is what a phone is short of. Nothing is lost + with it. Search's Files view re-roots every result under a folder named + after its group, so you are always inside exactly one group and the + breadcrumb above the table already says which — the column repeated it on + every row. */ + .td-group { display: none; } /* The toolbar's three groups each take a line rather than competing for one. `margin-left: auto` on the right-hand group is what pushed it off the @@ -2145,9 +2314,104 @@ a.transfer-name { .video-toolbar { flex-wrap: wrap; } .video-toolbar .tb-search { flex-basis: 100%; margin-left: 0; } + /* ── Shared directories: not a table on a phone ──────────────────────── + Four columns — name, Writable, Removable, and the eject/remove pair — + have a combined minimum of about 440px, and none of it is padding that + can be squeezed: the two switches are 90px apiece by design and the + buttons are touch targets. On a 390px screen that is ~100px hanging off + the right, with the two buttons the first thing to go over the edge. + Reported from a phone, with short directory names, so no amount of + wrapping the *name* would have helped. + + So the row stops being a row. The head goes (each switch carries its own + label instead, see `.sdt-col-toggle .toggle-switch-label`), the name + takes a line of its own, and the two switches sit under it with the + actions pushed to the right margin: + + 📁 Musique + [•] Writable [•] Removable ⏏ ✕ + + Everything that was on screen is still on screen, and nothing is + truncated. The rules are scoped to `.shared-directories-table` on + purpose: `folder-tree.js` borrows `.shared-dirs-tbl` for a two-column + list — a name and one button — which fits a phone as it is, and stacking + it would only make it taller. */ + .shared-directories-table .shared-dirs-tbl, + .shared-directories-table .shared-dirs-tbl tbody, + .shared-directories-table .shared-dirs-tbl tr, + .shared-directories-table .shared-dirs-tbl td { display: block; } + .shared-directories-table .shared-dirs-tbl thead { display: none; } + + /* Two rows, not three. Left to wrap, the eject/remove pair ends up alone on + a line of its own under the switches — legible, but a third of the height + for two buttons, and they read as belonging to nothing. A grid puts them + back beside the name they act on, which is where they were: + + ┌──────────────────────────┬────────┐ + │ 📁 Musique │ ⏏ ✕ │ + ├──────────────────────────┴────────┤ + │ [•] Writable [•] Removable │ + └───────────────────────────────────┘ + + The switches are not placed: they fall into the second row on their own, + so a group with one switch (the create-group page has no Removable) or + none needs no rule of its own. */ + .shared-directories-table .shared-dirs-tbl tr { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 8px 16px; + padding: 10px 0; + } + .shared-directories-table .shared-dirs-tbl td { padding: 0; } + /* The separator moves to the row: with the cells turned into blocks, a + border on each of them draws four lines instead of one. */ + .shared-directories-table .shared-dirs-tbl tbody tr + tr td { border-top: none; } + .shared-directories-table .shared-dirs-tbl tbody tr + tr { + border-top: 1px solid var(--border); + } + + .shared-directories-table .sdt-col-dir { + grid-column: 1; + grid-row: 1; + min-width: 0; + } + /* No longer a single truncated line: it has the width of the row to itself + and there is no column left to protect from it. */ + .shared-directories-table .sdt-col-path { + grid-column: 1 / -1; + max-width: none; + white-space: normal; + overflow-wrap: anywhere; + } + .shared-directories-table .sdt-col-toggle { + width: auto; + min-width: 0; + text-align: left; + } + .shared-directories-table .sdt-col-toggle .toggle-switch { + justify-content: flex-start; + gap: 8px; + } + .shared-directories-table .sdt-col-toggle .toggle-switch-label { display: inline; } + /* Beside the name, against the right margin, exactly where the wide layout + puts them. */ + .shared-directories-table .sdt-col-actions { + grid-column: 2; + grid-row: 1; + justify-self: end; + } + /* Every pixel here is one the conversation does not get. */ .group-header { margin-bottom: 10px; gap: 8px; } - .group-tabs { margin-bottom: 10px; } + .group-tabs { --band-margin: 10px; } + /* Six tabs at 18px of padding a side come to 380px, plus the main column's + own 32px — wider than a 360px phone, and a page wider than the screen is + what takes every pinned band out of the visible area on Android. They + share the row instead of each claiming a fixed width, which also means a + seventh application costs nothing: the icon is what identifies a tab, the + padding around it never did. */ + .group-tab { flex: 1 1 0; min-width: 0; padding: 10px 0; } .chat-messages { padding: 12px; } /* The transfers panel stops hanging off its button. @@ -2671,6 +2935,10 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } .sdt-col-toggle { width: 90px; text-align: center; } .sdt-col-toggle th { text-align: center; } .sdt-col-toggle .toggle-switch { justify-content: center; } +/* The switch carries its own label for the phone layout below, where there is + no column head to read it from. Wherever the head *is* there, it would be + the same word twice on every row. */ +.sdt-col-toggle .toggle-switch-label { display: none; } .sdt-col-actions { white-space: nowrap; text-align: right; } .sdt-action-btn { background: none; border: 1px solid var(--border); border-radius: 4px; @@ -3093,7 +3361,12 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } display: flex; align-items: center; gap: 6px; - margin-bottom: 14px; + /* A pinned band keeps this gap: `--band-margin` is both the margin in + the flow and the width of the opaque ring the band paints around + itself once pinned, so the two can never disagree (style.css, + "Sticky chrome"). */ + --band-margin: 14px; + margin-bottom: var(--band-margin); } .video-toolbar .tb-search { margin-left: auto; } @@ -3897,7 +4170,12 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } display: flex; align-items: center; gap: 6px; - margin-bottom: 14px; + /* A pinned band keeps this gap: `--band-margin` is both the margin in + the flow and the width of the opaque ring the band paints around + itself once pinned, so the two can never disagree (style.css, + "Sticky chrome"). */ + --band-margin: 14px; + margin-bottom: var(--band-margin); } .photo-toolbar .tb-search { margin-left: auto; } @@ -3910,7 +4188,12 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; } align-items: center; justify-content: space-between; gap: 12px; - margin-bottom: 16px; + /* A pinned band keeps this gap: `--band-margin` is both the margin in + the flow and the width of the opaque ring the band paints around + itself once pinned, so the two can never disagree (style.css, + "Sticky chrome"). */ + --band-margin: 16px; + margin-bottom: var(--band-margin); } .photo-album-heading { display: flex; |