fix(design): give the icon sprite a viewBox so the icons are not cropped

[protonspy]

One commit. Follows #3, which merged before this fix was pushed, so main currently carries the draft with every icon clipped.

The defect

The sprite drew each icon inside <g id="i-book">. A <g> groups elements; it establishes no viewport and carries no viewBox. None of the 81 consuming <svg class="icon"> elements had one either.

With no viewport an SVG maps one user unit to one pixel, so 24 units of Lucide artwork inside a 13px box rendered as the top-left corner of the drawing. Every icon was clipped, and each one appeared offset differently depending on where its art happens to sit in the 24×24 grid — which is what reads, from outside, as "the icons are not aligned".

The fix

<g id="i-x"> becomes <symbol id="i-x" viewBox="0 0 24 24">. With <use>, the symbol's viewBox establishes the viewport and scales the artwork into whatever box the consumer sizes, so one change in the sprite fixes all 81 usages and no individual <svg> needed touching.

A second defect the first one was hiding

Only .icon carried flex: 0 0 auto, and .icon-sm / .icon-lg are used standalone throughout. An icon in a flex row is a flex item, so without it the glyph compresses horizontally into an ellipse whenever the row is tight — buttons with long labels, the sources table, the dialog headings. All three classes now carry it, plus display: block to drop the baseline gap in any non-flex context.

Verified

22 symbols defined, 22 referenced, none orphaned in either direction, every one carrying a viewBox, zero <g> remaining, HTML balanced.

That is a structural check and it is not what found the bug. Nothing in this repository renders the page, so the missing viewBox passed every automated check I have and was caught by a person looking at the file. Open it rather than trusting the list.

Stroke width is left at 1.75, which is about 0.95px effective at 13px — the thin stroke that matches the density task 8.1 asks for. Now that the icons actually draw, that is a number worth judging on a real screen.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GRMARM7Kd1HoRnGLVqSkAe

Summary by CodeRabbit

• Bug Fixes
  • Improved icon sizing consistency across small, standard, and large icons.
  • Prevented icons from shrinking unexpectedly in flexible layouts.
  • Updated embedded icon rendering to use consistent dimensions while preserving existing artwork and identifiers.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c147557c-2424-417e-b862-f1dea23b696b

📥 Commits

Reviewing files that changed from the base of the PR and between 784c325 and d9b2f7a.

📒 Files selected for processing (1)

• design/desktop-draft.html

---

📝 Walkthrough

Walkthrough

The draft design prevents icon variants from shrinking in flex layouts. It also converts inline SVG sprite groups to 24×24 symbols while preserving existing artwork and identifiers.

Changes

Icon sprite update

Layer / File(s)	Summary
Icon sizing and sprite definitions design/desktop-draft.html	The .icon, .icon-sm, and .icon-lg variants now use flex-shrink: 0. Inline sprite icons now use <symbol> elements with viewBox="0 0 24 24".

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a viewBox to the icon sprite to prevent icon cropping.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/icon-sprite-viewbox

---

_{Comment @coderabbitai help to get the list of available commands.}