Repository navigation
Fix /join/ email copy box mid-domain wrap at phone widths - #156
Conversation
Prefer wrapping the action icons below the address at narrow widths, and soft-break only after @ via <wbr> with overflow-wrap: break-word instead of anywhere.
There was a problem hiding this comment.
Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.
An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Email display and layout _join-us/index.md, _teaching/2025-Basilisk101-Madrid.md, _teaching/2025-Basilisk101nano-ECS.md, assets/css/styles.css |
Displayed email addresses add a soft break opportunity after @. The email container allows flex items to wrap, and the address uses break-word with a maximum width of 100%. Links and copy-button values retain uninterrupted addresses. |
Priority:
Estimated code review effort: 2 (Simple) | ~7 minutes
Change: Bug fix
Suggested reviewers: cursoragent
Merge Risk: 
3ad1a
-
No merge-blocking risk is identified in the reviewed display-wrapping changes.
Pre-merge checks: 
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check The title clearly and concisely describes the main fix: preventing mid-domain email wrapping in the /join/ copy box at phone widths. Docstring Coverage No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0… Linked Issues check Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Check skipped because no linked issues were found for this pull request. Full details: Docstring Coverage
-
Explanation
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (4 skipped: 4 unsupported.)
-
Finishing Touches
-
✨ Simplify code
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Comment @coderabbitai help to get the list of available commands.
|
@coderabbitai review |
|
comphy-bot review status for Review completed for this exact pull request head. |
|
comphy-bot
left a comment
comphy-bot
left a comment
There was a problem hiding this comment.
Review: email copy-box wrapping
Reviewed all four changed files at 3ad1ad7cdd52d615a9333c280ed09894ba58efbd (+11/-5). No P0/P1 findings.
The shared flex layout allows controls to wrap below the address, and the explicit <wbr> preserves address characters while providing a preferred break after @. The changed markup retains existing mailto targets, copy values and accessible labels. No new script or security-sensitive behavior is introduced.
Verification: packet checks for conflict markers and added trailing whitespace passed; GitHub build, markdown-quality and PR-hygiene checks passed. Deployment was skipped; the observed pending CodeRabbit status is not itself a blocker. Static review only: no PR code or test scripts were executed, and browser screenshots were not independently reproduced.
Description
At phone widths the
/join/contact email copy box broke the address mid-domain (durham.ac.u/k) because.email-textusedoverflow-wrap: anywherefrom the 19 Oct copy-box restyle. A copyable value should read as one unit. This change lets the mailto/copy icons wrap below the address on narrow viewports and soft-breaks only after@via<wbr>withoverflow-wrap: break-word. Desktop layout stays side-by-side.Type of Change
Changes Made
assets/css/styles.css:.email-containergetsflex-wrap: wrap;.email-textusesflex: 1 0 auto,max-width: 100%, andoverflow-wrap: break-word(no moreanywhere). Tokens only — no raw hex/px, no local token redefinition._join-us/index.mdand the shared teaching email boxes: insert<wbr>after@so any forced wrap is after the local part. Address strings anddata-clipboard-text/ mailto hrefs are unchanged.Testing Done
bundle exec jekyll serve./scripts/lint-check.shpassed.npm test(215 passed).npm run lintpassed (existing ESLint unused-var warnings only)../scripts/build.shcompleted. Playwright screenshots of.email-containerat 390 / 360 / 1440 in light and dark: before from production, after from the local build.Screenshots
Before
390 light
390 dark
360 light
360 dark
1440 light
1440 dark
After
390 light
390 dark
360 light
360 dark
1440 light
1440 dark
Related Issues
Design-audit finding:
/join/email copy box mid-domain wrap at 390px (light and dark).Checklist
Additional Notes
Copy behaviour and the address
vatsal.sanjay@durham.ac.ukare unchanged. Teaching pages that reuse.email-containerget the same soft-break habit so they do not regress under the shared CSS.Summary by CodeRabbit