Skip to content

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

Merged
AlaqmarG merged 11 commits into
mainfrom
feat/mail-reading-composing-improvements
Oct 1, 2026
Merged

AlaqmarG merged 11 commits into
mainfrom
feat/mail-reading-composing-improvements

Conversation

@AlaqmarG

@AlaqmarG AlaqmarG commented Sep 16, 2026 •

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)

…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
…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.
…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.
…, 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
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.
- Admin pages scroll the document on every width; <main> clips sideways
  overflow instead of scrolling, which fixes the page-wide horizontal pan.
- Form controls render at 16px on touch screens so iOS stops zooming in on
  focus. Pinch-zoom is untouched.
- Phone header with back/title/actions driven by useTopBar, a bottom tab
  bar with role-aware pins and an unread badge, and a More page.
- Shared primitives on native <dialog>: Sheet, ActionSheet, BottomToolbar,
  Fab, Segmented, ListGroup and toasts, plus hooks for stack navigation
  mirrored into the URL, scroll lock, the visual viewport and CloseWatcher.
- ask() and the command palette are rebuilt on Sheet; RecipientInput gets
  16px inputs, tokenising on paste and a commit/focus handle.
…tion actions

- List and message are two document-scrolling screens with ?m= history,
  so the message body is no longer squeezed into the bottom of a fixed box.
  Back, Android back and the iOS edge swipe return to the list.
- Message screen: compact header, collapsed thread, attachments below the
  body and a bottom toolbar (Archive, Move, Delete, Reply all, Reply).
- Wide HTML emails are scaled to fit with CSS zoom from the parent frame;
  the iframe sandbox is unchanged. An Original size toggle undoes it.
- Mailboxes sheet for folders, inbox switching and the send allowance;
  a Compose FAB; avatar-tap selection mode with a bulk toolbar.
- Archive, delete and move act on the conversation's messages in the
  current folder, with an Undo toast (z on desktop).
- Compose is a full-screen sheet with Send in the top bar, a format bar
  above the keyboard, and sessionStorage drafts kept on back.
…ning and public site

- Dashboard leads with a "Needs you" list on phones; analytics uses KPI
  tiles, touch-scrubbable charts and a card cost list; exports get 44px,
  16px controls.
- Events, users and profile: person and event editor are stack screens
  (?person=, ?event=) with Save in the top bar and drafts kept on back;
  the event form puts the dates first on every width.
- Mail settings (setup, aliases, shared mailboxes) use grouped lists,
  copyable server settings and a full-screen alias editor.
- Documents: phone viewer, coarse-pointer field placement, select mode
  with a bulk toolbar; Reject is an outlined destructive button.
- Public signing moves to its own (signing) route group with task-only
  chrome and a sticky bottom action bar. URLs are unchanged.
- Public site: full-screen nav menu, sticky header, safe-area gutters,
  an event .ics route, and no sideways overflow.
- Login gets 16px fields and keyboard hints; admin gets its own error and
  404 screens inside the shell.
…ories

npm audit started failing on a critical Next.js advisory (16.2.0-16.3.5)
and high-severity undici and dompurify ones. 16.3.8 is the latest patch on
the same minor; desktop screenshots are pixel-identical before and after.
@AlaqmarG
AlaqmarG merged commit 49a7feb into main Oct 1, 2026
11 of 12 checks passed
@AlaqmarG
AlaqmarG deleted the feat/mail-reading-composing-improvements branch October 1, 2026 23:04

This branch is waiting to be deployed

1 waiting deployment
dev — dd72b067 Waiting Oct 1, 2026 by AlaqmarG via deploy-stack #355
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

Development

Successfully merging this pull request may close these issues.

1 participant