跳到主要内容

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

· 阅读需 2 分钟
工具坞
工具坞团队

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.