Skip to content

Fix incoming mail, richer compose, attachment previews, and a mobile polish pass - #138

Open
AlaqmarG wants to merge 7 commits into
mainfrom
feat/mail-reading-composing-improvements
Open

Fix incoming mail, richer compose, attachment previews, and a mobile polish pass#138
AlaqmarG wants to merge 7 commits into
mainfrom
feat/mail-reading-composing-improvements

Conversation

@AlaqmarG

@AlaqmarG AlaqmarG commented Sep 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Description

Incoming mail

  • Links did nothing on click — the body iframe's sandbox="" blocked even opening a new tab. Now allows popups only.
  • Fixed the missing gap between a reply and the quoted message below it.
  • Message body was squeezed into whatever space was left over by the sender/attachments block — now sizes to its content and scrolls as one page.

Compose

  • Fuller toolbar (strikethrough, lists, quote, clear formatting), active-state highlighting, Shift+Enter for a soft line break vs. Enter for a new paragraph.
  • Fixed Insert Link silently doing nothing when no text was selected first.

Attachments

  • Images, PDF, audio, video and text/JSON/CSV now preview inline in a lightbox instead of forcing a download.

Mobile polish pass (audited every admin page against an iPhone-13-sized viewport)

  • Compose, attachment preview, and the event editor were all rendering behind the mobile tab bar — <main>'s fade-in animation traps fixed overlays below it; portaled them to document.body.
  • Message action toolbar (Reply/Forward/Archive/...) collapses to icon-only on mobile instead of wrapping into 3 rows.
  • Command palette had no close button on mobile.
  • Bottom tab bar pins Email + Profile, logo corners now rounded, header icon buttons now consistent sizes.
  • viewport-fit=cover + safe-area-inset padding on every full-screen overlay, for notch/dynamic-island devices.
  • Dashboard tile grid: rows no longer stretch every tile to the tallest sibling's height, and an odd tile out no longer sits alone next to a blank column.
  • Analytics: the cost table was blowing out the whole page's width and dragging unrelated cards off-screen with it.
  • Users: directory entries with no linked account no longer show a lone "—" line; term chip remove buttons had almost no tap target.
  • Aliases: the catch-all address could overflow past its card instead of truncating; shared mailbox detail rows now stay two-column on phone.
  • Events: Edit/Delete buttons now match height; the poster thumbnail no longer leaves a dead gap under it.

Checklist

  • npm run typecheck, npm run lint, npm run format:check and npm run build pass
  • Schema changes have a committed migration (npm run db:generate)
  • New env vars added to .env.example, .env.local.example, deploy/docker-compose.yml and komodo/deploy-context.mjs
  • Admin-only routes gated with requireAdmin / requireApprover
  • Tested on the branch's preview deploy, in light and dark themes
  • No secrets, internal hostnames or IPs committed

Testing Evidence

Verified live on the preview deploy, in both light and dark themes, on desktop and a mobile (iPhone-13-sized) viewport.

Dashboard tiles — before
Dashboard tiles — after

Odd tile out — before
Odd tile out — after

Event sheet — before (hidden behind tab bar)
Event sheet — after

Analytics: table no longer overflows the page
Compact mobile toolbar + full-height body + attachment previews

PDF preview
Image preview (multi-attachment nav)

@AlaqmarG
Fix incoming mail links and add richer compose formatting + attachmen…
a7fc464 
…t previews

- Links in message bodies were completely inert (iframe sandbox blocked
  even opening a new tab); now sandboxed but allow-popups.
- Fix the gap between a reply and the quoted message it's replying to.
- Compose editor: fuller toolbar (strikethrough, lists, quote, clear
  formatting), active-state highlighting, Shift+Enter for a soft line
  break.
- Attachments (images, PDF, audio, video, text/JSON/CSV) preview inline
  instead of forcing a download.
@AlaqmarG AlaqmarG added bug Something does not work as intended feature New capability for the people using the site area: mail Mailboxes, the mail client, sending or delivery labels Sep 16, 2026
@AlaqmarG
Fix mobile mail experience: modals trapped behind the tab bar, crampe…
a0f4f3c 
…d action bar

- Compose and the attachment preview portal to document.body: <main>'s
  fade-in animation creates a stacking context that otherwise traps
  their fixed overlay below the mobile tab bar, making Send unreachable.
- Message action buttons (Reply, Forward, Archive, Delete, ...) go
  icon-only below sm, instead of wrapping their full labels into three
  rows above the message content.
@AlaqmarG
Fix mobile polish issues: tiny message body, palette exit, safe-area …
94e3a4f 
…insets

- Message body now sizes to its content and scrolls as one page with the
  header instead of being squeezed into whatever space is left over,
  which on a phone could be a couple of lines of text.
- Command palette had no way to close it without a keyboard; add a
  visible close button on mobile.
- Bottom tab bar pins Email + Profile specifically (what execs use most)
  instead of whatever happens to be first in the sections list, and its
  logo now matches the rounded corners used elsewhere.
- Header icon buttons (search, theme, view site, log out) now share the
  same height/padding instead of subtly different sizes.
- viewport-fit=cover + safe-area-inset padding on every edge-to-edge
  mobile overlay (admin header, palette, attachment preview, event
  editor) so a notch or dynamic island doesn't sit over their controls.
@AlaqmarG
Mobile polish pass across the rest of the admin: dashboard, analytics…
85979ec 
…, events, users, aliases

- Dashboard tile grid: rows no longer stretch every tile to the tallest
  sibling's height, and an odd tile out no longer sits alone with a
  blank column next to it.
- Analytics: the cost table was blowing out the whole page's width and
  dragging unrelated cards off-screen with it; scoped the scroll to the
  table itself.
- Events: New Event sheet was rendering behind the mobile tab bar for
  the same stacking-context reason as the mail modals; Edit/Delete
  buttons now match height; the poster thumbnail no longer leaves a
  dead gap under it.
- Users: directory entries with no linked account no longer show a
  lone "—" line; the "About you" term chips' remove button had almost
  no tap target.
- Aliases: the catch-all address could overflow past its card instead
  of truncating; shared mailbox detail rows now stay two-column on
  phone instead of stacking into twice as many lines.
@AlaqmarG AlaqmarG changed the title Fix incoming mail links, add richer compose formatting and attachment previews Fix incoming mail, richer compose, attachment previews, and a mobile polish pass Sep 16, 2026
@AlaqmarG AlaqmarG added the design Visual design, layout or interaction label Sep 16, 2026
@AlaqmarG
Fix washed-out modal backdrops in dark mode
b0ded7f 
bg-ink resolves to a light color in dark mode (it's the foreground/text
token, not a fixed dark shade), so the attachment preview, confirm
dialog and command palette overlays rendered as a bright, barely-dimmed
veil instead of darkening the page behind them. compose.tsx and the
event editor already had the right dark:bg-surface override; apply the
same fix to the other three.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

area: mail Mailboxes, the mail client, sending or delivery bug Something does not work as intended design Visual design, layout or interaction feature New capability for the people using the site

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@AlaqmarG