Skip to content

The phone layout items from the #129 thread - #3

Merged
zelfroster merged 2 commits into
zelfroster:feat/design-systemfrom
jolavillette:fix/phone-layout-for-129
Sep 19, 2026
Merged

zelfroster merged 2 commits into
zelfroster:feat/design-systemfrom
jolavillette:fix/phone-layout-for-129

Conversation

@jolavillette

Copy link
Copy Markdown

defnax's phone list from the RetroShare#129 thread (items 11–14 and 19 of my review), each located and fixed at its cause. I have no phone at hand, so this is verified from the stylesheets and a narrow desktop window only — @defnax, your screenshots are the test.

  • Header status pill: the header went from dark to --chrome but the pill kept near-white text over a white tint (1.2:1). Now --ink-dim on --sunken with a --line border, the dot outlined in --surface.
  • Composer on phones: the ≤700px File / Picture menu is back inside the shared ChatComposer — one paperclip opening the menu (the existing .mobile-chat-attachment rules), the two wide tools hidden there — and the send button is a round glyph, as on master. The three copies of the old menu's click-outside guard, which watched an element nothing rendered any more, go with it.
  • Emoji picker: no media rule touched .emoji-picker any more, so the 320px box anchored on the emoji tool ran past the panes' overflow: hidden. It opens at the strip's left padding now, capped to the viewport width and the visible height.
  • Boards on a phone: the detail widget is a three-row grid with only two children placed, so the board's name and Subscribe button auto-placed under the post list; the heading is placed in row 2 and the body in row 3. The view toggle keeps its glyphs only, since toggle plus pagination outgrew a 360px toolbar by ~50px.
  • The overflow menu's Subscribe was painted as a destructive action (is-danger on both states); only Unsubscribe is.
  • Two blank icons: external-link-alt (Web Help "Open link") had no sprite symbol — mapped to arrow-square-out — and the Friends' Files friend row asked for user-friends in duotone, which does not exist; it uses users, the same glyph, which does. Sprite regenerated (133 symbols).

Left alone as design calls: the --ink-dim contrast token, the contacts select sharing the tabs' row, the forum composer's picker inside its modal.

Checked: sass reproduces styles.css, icons.js regenerates byte-identical, eslint clean, build.js --check passes.

Prepared with AI assistance (Claude), driven and reviewed by me.

🤖 Generated with Claude Code

jolavillette and others added 2 commits September 16, 2026 03:15
defnax's list, each located and fixed at its cause:

- Phone header status pill: the header went from dark to --chrome but
  the pill kept near-white text over a white tint (1.2:1). Now
  --ink-dim on --sunken with a --line border, the dot outlined in
  --surface.

- Composer: the <= 700px File / Picture menu came back inside the
  shared ChatComposer -- one paperclip opening the menu (the shared
  .mobile-chat-attachment rules), the two wide tools hidden there --
  and the send button is a round glyph on phones, as on master. The
  three copies of the old menu's click-outside guard, which watched an
  element nothing rendered any more, are removed with it.

- Emoji picker: no media rule touched .emoji-picker any more, so the
  320px box anchored on the emoji tool ran past the panes' overflow:
  hidden. It now opens at the strip's left padding, capped to the
  viewport width and to the visible height.

- Boards on a phone: the detail widget is a three-row grid with only
  two children placed, so the board's name and Subscribe button
  auto-placed under the post list; the heading is placed in row 2 and
  the body in row 3. The view toggle keeps its glyphs only, since
  toggle plus pagination outgrew a 360px toolbar by ~50px.

- The overflow menu's Subscribe was painted as a destructive action
  (is-danger on both states); only Unsubscribe is.

- Two blank icons: external-link-alt (Web Help "Open link") had no
  sprite symbol -- mapped to arrow-square-out -- and the Friends'
  Files friend row asked for user-friends in duotone, which does not
  exist; it uses users, the same glyph, which does.

Not touched, as they are design calls: the --ink-dim contrast token,
the contacts select sharing the tabs' row, the forum composer's picker
inside its modal.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@zelfroster
zelfroster merged commit b058b57 into zelfroster:feat/design-system Sep 19, 2026
@jolavillette
jolavillette deleted the fix/phone-layout-for-129 branch September 19, 2026 03:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants