Make the daily mail readable on mobile devices - #144
Draft
tricknotes wants to merge 1 commit into
Draft
tricknotes wants to merge 1 commit into
tricknotes wants to merge 1 commit into
Conversation
The HTML mail reused the web app's stylesheet, so Roadie inlined rules meant for browsers: `min-width: 550px` and `overflow-x: hidden` on <html>, floats for the stargazer avatars, and font sizes expressed through CSS custom properties and calc(). On a phone the mail was laid out at the desktop width and either zoomed out or cut off on the right, and Gmail drops every declaration that uses var() or calc(). Give the mail its own stylesheet with a fluid `max-width: 650px` container, no floats, and plain px/hex values, and declare a viewport so mobile clients lay it out at the device width. The stargazer avatars now sit on their own line below the repository name, and long repository names wrap. Closes #17 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0167LtQxWaHUwAyFb1seN2de
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
2 participants
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.
Closes #17
Problem
The HTML part of
MyHotRepository#notifyreused the web app'sapplication.cssandnormalize.css, and Roadie inlined rules that are meant for browsers:html { min-width: 550px; overflow-x: hidden }was inlined onto<html>, forcing a desktop-width layout that gets zoomed out or cut off on phones.<meta name="viewport">, so mobile rendering engines lay the mail out at their default ~980px width.calc(). Gmail drops declarations that usevar()(https://github.com/hteumeuleu/caniemail/blob/master/_features/css-variables.md) and the Gmail apps dropcalc()for non-Google accounts (https://github.com/hteumeuleu/caniemail/blob/master/_features/css-unit-calc.md).float: right, colliding with the repository name on narrow screens.@font-facefor ABeeZee is ignored by Gmail (https://github.com/hteumeuleu/caniemail/blob/master/_features/css-at-font-face.md).Change
app/assets/stylesheets/mailer.css: a fluidmax-width: 650pxcontainer, nomin-width, no floats, plain px/hex values, no custom properties,calc()or@font-face. Long repository names wrap withword-break: break-all.notify.html.hamlas a full document with a viewport meta and a.mailwrapper. The stargazer avatars now sit on their own line under the repository name.application.cssis untouched apart from its header comment; web styling and mail styling no longer affect each other.max-width:650px, and must not containmin-width,float:,var(,calc(or@font-face. Both new examples fail onmainand pass here.Verification
Notes
app/assets/images/sample-mail.pngon the top page still shows the old mail design.html { min-width: 550px }has the same problem on phones but is out of scope for モバイル端末でメールを見た時に、適切な大きさで閲覧したい #17.🤖 Generated with Claude Code
https://claude.ai/code/session_0167LtQxWaHUwAyFb1seN2de
Generated by Claude Code