Skip to main content

Fix: tool pages no longer cram inputs, buttons and results together

· 2 min read
工具坞
工具坞团队

Many tool pages had their input boxes, action buttons and result panels pressed right against each other, with no breathing room. The cause turned out to be a spacing value the UI library did not recognise, so instead of a large gap it applied none at all.

What was happening​

Sections on a tool page are stacked with a spacer that accepts a short list of named gap presets. The tool pages were asking for values outside that list. The spacer quietly ignored them, which meant the real gap between sections was zero — the input box, the action buttons and the output box all sat flush against one another. This affected 40+ tool pages, plus the cards on the homepage.

What changed​

  • 40+ tool pages now use a 24px gap between their main sections, so inputs, action buttons and results are clearly separated.
  • Homepage tool cards and related-tool cards use 8px of internal spacing instead of none.
  • The Docker command generator's option switches now wrap, so they are no longer clipped on narrow phone screens.

Verified​

  • All 212 unit tests pass, including a new regression test that rejects unrecognised spacing values.
  • On a local production build, browser measurements show the input → buttons and buttons → output gaps went from 0 to 24px. At 375px phone width, the homepage, Docker and full-screen text pages show no horizontal overflow.

Spotted another cramped corner of the site? Let us know in the comments.