Phone: the details bottom sheet never shows — sidebar-hiding rule `#app > aside` also hides #detpane below 820px #675

New issue

Open

opened 2026-09-23 03:09:27 +00:00 by Cordy · 0 comments

Cordy commented

2026-09-23 03:09:27 +00:00

Owner

Found by the #656 QA pass (v0.6.247, both dogfoods).

Matrix row: §3 Details pane — "Phone bottom sheet | Viewport < 820px | Pane becomes sheet; sections usable".

Steps

files-bao as sharer1 at 375×812 (in-app browser mobile preset), or files _qa in a 375px frame.
Tap a file row. The pane's content is populated (#detpane .detttl = "qa-doc.pdf"; the HTML snippet for docs.html is rendered).
Nothing appears. getComputedStyle(#detpane).display is none. It is the same at 720px.

Root cause (from the live CSS): #detpane is an <aside> directly under #app. The rules that hide the desktop sidebar on phones,

@media (max-width: 820px) { #app > aside { display: none } }
@media (max-width: 819px) { #app > aside { display: none } }

have specificity (1,0,1) and beat #detpane { display: flex } (1,0,0). The sheet styling itself exists (@media (max-width: 819px) #detpane { position: fixed; inset: auto 0 0; max-height: 78vh; border-radius: 14px 14px 0 0 … }) but can never be seen. Scoping the sidebar rule (e.g. #app > aside#sidebar or a class) should bring the sheet back.

Expected: a bottom sheet with hero, facts and Shares/Versions/Activity drills.
Seen: no details surface on phone at all. Shares, Versions and Activity are unreachable below 820px.

Screenshot: 675-no-phone-sheet.jpg (375px frame, qa-doc selected, no sheet)

Found by the #656 QA pass (v0.6.247, both dogfoods). **Matrix row:** §3 Details pane — "Phone bottom sheet | Viewport < 820px | Pane becomes sheet; sections usable". **Steps** 1. files-bao as sharer1 at 375×812 (in-app browser mobile preset), or files `_qa` in a 375px frame. 2. Tap a file row. The pane's content is populated (`#detpane .detttl` = "qa-doc.pdf"; the HTML snippet for docs.html is rendered). 3. Nothing appears. `getComputedStyle(#detpane).display` is `none`. It is the same at 720px. **Root cause (from the live CSS):** `#detpane` is an `<aside>` directly under `#app`. The rules that hide the desktop sidebar on phones, ``` @media (max-width: 820px) { #app > aside { display: none } } @media (max-width: 819px) { #app > aside { display: none } } ``` have specificity (1,0,1) and beat `#detpane { display: flex }` (1,0,0). The sheet styling itself exists (`@media (max-width: 819px) #detpane { position: fixed; inset: auto 0 0; max-height: 78vh; border-radius: 14px 14px 0 0 … }`) but can never be seen. Scoping the sidebar rule (e.g. `#app > aside#sidebar` or a class) should bring the sheet back. **Expected:** a bottom sheet with hero, facts and Shares/Versions/Activity drills. **Seen:** no details surface on phone at all. Shares, Versions and Activity are unreachable below 820px. **Screenshot:** `675-no-phone-sheet.jpg` (375px frame, qa-doc selected, no sheet)