Repository navigation
Fix incoming mail, richer compose, attachment previews, and a mobile polish pass - #138
Merged
Merged
Conversation
…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.
…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.
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.
This branch is waiting to be deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Incoming mail
sandbox=""blocked even opening a new tab. Now allows popups only.Compose
Attachments
Mobile polish pass (audited every admin page against an iPhone-13-sized viewport)
<main>'s fade-in animation traps fixed overlays below it; portaled them todocument.body.viewport-fit=cover+ safe-area-inset padding on every full-screen overlay, for notch/dynamic-island devices.Checklist
npm run typecheck,npm run lint,npm run format:checkandnpm run buildpassnpm run db:generate).env.example,.env.local.example,deploy/docker-compose.ymlandkomodo/deploy-context.mjsrequireAdmin/requireApproverTesting 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)