Repository navigation
Home: stop clipping the site tags line at 355px - #643
Conversation
The wrapper was a fixed 355px and the typewriter animation ended at 350px, so a site_tags value longer than ~40 characters was cut off. The wrapper now sizes to the text and the animation runs to 100% of it. Below 600px the line wraps instead of typing. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The change is a small, self-contained CSS/template fix that the author verified in a browser, with no objective logic, correctness, or convention issues found.
Review effort: Balanced
Findings: None
What changed in this PR
This PR fixes a layout bug in the default theme's home page where the site_tags line was clipped mid-word because it was placed in a fixed-width 355px container with a typewriter animation that only ran to 350px. It replaces the fixed width with a content-sized wrapper and makes the animation span the full line, while gracefully degrading to wrapped text on narrow screens.
Changes:
- Replace the fixed
width: 355pxwrapper withwidth: fit-content; max-width: 100%so the container sizes to the tag line. - Change the
animated-textkeyframes to animatewidthfrom0%to100%of the wrapper instead of a fixed350px. - Add a
@media (max-width: 600px)rule that disables the animation/cursor and allows the line to wrap on small screens.
| File | Description |
|---|---|
| themes/default/templates/home.html | Swaps the fixed 355px wrapper for a fit-content wrapper capped at 100% so long tag lines are not clipped. |
| themes/default/static/css/goblog.css | Makes the typewriter animation span the full wrapper width and adds a small-screen fallback that wraps instead of clipping. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Problem
The default theme's home page put
site_tagsin a fixed 355px box, and the typewriter animation ended at 350px. Any tag line longer than about 40 characters was cut off mid-word.Fix
home.html: the wrapper isfit-content(capped at 100%) instead of 355px.goblog.css:animated-textruns from 0% to 100% of that wrapper, so it types out the full line whatever its length.Testing
Rendered a test page using the real stylesheet in headless Chrome: at 1000px a 66-character line and a short line both type out fully and stay centred; at 400px the long line wraps to two rows with nothing clipped. Not run inside a live GoBlog instance.
Known limit: a tag line wider than the window on a screen over 600px still clips.
🤖 Generated with Claude Code