fix: misc website fixes — decrypt UX, dark-mode, QR popup width (#213)

rubenhensen · web-flow · commit 2db2dcf868b9 · 2026-05-12T16:05:12.000+02:00
* fix: dark-mode email body legibility and cross-subdomain visited flag - EmailView: render decrypted email in a forced light-themed iframe so emails that hardcode dark text on no background stay legible when the host page is in dark mode (#159). - Marketing page: store the returning-visitor flag in a cookie scoped to the registrable domain so it carries across postguard.eu subdomains instead of being trapped per-origin in localStorage (#208). * fix(decrypt): theme-aware plain-text rendering, leave HTML emails alone Previously the iframe forced a light surface unconditionally. That fixed the original dark-mode bug for HTML emails (which set their own dark text on no background), but it also overrode the site theme for plain- text emails — leaving them stuck in light mode forever. - HTML emails: don't touch the styling. Email designs are self-contained. - Plain-text emails: wrap the text in <pre> and inject body styles that follow the host theme (background, color, color-scheme), reactively switching when the user toggles the theme via a MutationObserver on the <html> class. * fix(decrypt): mobile-friendly upload affordance, hide desktop-only banner On mobile the "install Thunderbird/Outlook extension" banner is irrelevant, and the dashed "drop the postguard.encrypted file here" zone implies a drag-and-drop interaction that isn't available on touch. - Hide the extension banner under 768px. - Restyle the upload label as a solid primary button on mobile and swap its text to "Upload \"postguard.encrypted\"" so it reads as a tappable action rather than a drop target. The underlying <input type="file"> already opens the native picker on tap. - Add the new fallback.upload i18n key in EN and NL. * fix(decrypt): single-screen list/reader flow on mobile On a phone the side-by-side panels squeezed both lists and the email view into ~40vh slices. Switch to a phone-style two-step flow instead. - Inbox view: full-screen panel with search/cog at the top, email list filling the middle, and the upload button pinned to the bottom (via flex order — desktop layout is unchanged). - Reader view: clicking an email or hitting Decrypt swaps to a full-screen right panel with a "Back to inbox" button up top. - "Back" resets currSelected and hashMode so the effect collapses currRight back to Nothing, restoring the list view. - Add fallback.back i18n key in EN and NL. * fix(decrypt,addons): anchor mobile flex heights, drop left-border accents - decrypt mobile: anchor .fallback-page to the viewport height and add min-height:0 + explicit flex bases to the panel/list chain so the email list can shrink instead of growing to fit content and pushing the upload button below the fold. - ListView: replace the 3px left-border selected accent with a solid primary-coloured background and white text — clearer affordance and drops the "AI-template" stripe look. - Addons callout: drop the left-border stripe in favour of a full bordered, slightly muted amber card. * revert: drop pg_visited cookie migration (#208) Cookies cannot be shared across different registrable domains (e.g. postguard.eu ↔ postguard.nl), so the cookie-scoped flag only solved the subdomain case — which already worked well enough via the existing localStorage approach for our deployed surfaces. Cross-TLD sharing would require either consolidating to a single canonical domain or a third-party tracker iframe, neither of which is in scope. Revert to localStorage and close #208. * fix(decrypt): plain-text emails in monospace, define semibold token Two notes from the dobby review. - Define --pg-font-weight-semibold in global.scss. It was referenced in five places (Header, marketing root, marketing layout, blog post page, and the new .mobile-back button) but never declared, silently falling back to 400. Mapping it to 600 matches the existing --medium token. - Switch the plain-text email <pre> to a monospace face. text/plain bodies routinely rely on column alignment (ASCII tables, quoted replies with leading '>', signatures), which broke under system-ui. Drop the font-family from <body> so it doesn't shadow the <pre>. * refactor(styles): consolidate font-weight-semibold into font-weight-medium Both pointed at 600, so there were two tokens for one value. Drop the just-added --pg-font-weight-semibold and migrate the existing five callers (Header, marketing root + layout, blog post page, decrypt .mobile-back) to --pg-font-weight-medium. * fix(filesharing): constrain Yivi QR popup to QR width The desktop Sign & send popup referenced an undefined --popup-width variable, so it fell back to auto and stretched to fit the unwrapped instruction text. Cap width to the QR (330px) plus tight padding and let the text wrap.
diff --git a/src/lib/components/filesharing/SendButton.svelte b/src/lib/components/filesharing/SendButton.svelte
@@ -739,8 +739,9 @@
         background: var(--pg-soft-background);
         border-radius: var(--pg-border-radius-md);
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-        padding: 1rem 1.5rem 1.5rem 1.5rem;
-        width: var(--popup-width);
+        padding: 1rem;
+        width: fit-content;
+        max-width: calc(330px + 2rem);
         z-index: 4;
     }
 
