Skip to content

fix(web): unify MiniApp market typography and alignment - #1876

Merged
bobleer merged 1 commit into
GCWing:mainfrom
bobleer:miniapp-market-ui-typography
Jul 30, 2026
Merged

fix(web): unify MiniApp market typography and alignment#1876
bobleer merged 1 commit into
GCWing:mainfrom
bobleer:miniapp-market-ui-typography

Conversation

@bobleer

@bobleer bobleer commented Jul 30, 2026

Copy link
Copy Markdown
Collaborator

Summary

The MiniApp submission workspace defined its own font sizes and paddings rather than reusing the gallery/form primitives, so the text read as ragged: section headings sat indented past the fields below them (the heading icon pushed title and description right by ~26px), hints rendered at three different sizes — several still inheriting the browser's 80% <small> default — and the textarea's box didn't match the inputs above and below it.

Everything in the view now follows one scale, each row borrowed from a component that already existed:

Role Spec Borrowed from
Section title 13px / 600 / primary .gallery-zone__title
Section hint 12px / 400 / muted .gallery-zone__subtitle
Field label 13px / 500 / secondary, 0.2px tracking .bitfun-input-label
Field value 13px .select__value
Inline hint 12px / muted .bitfun-input-hint

Concretely:

  • Alignment — section headings put the icon inline with the title, so title, description, labels, inputs, file rows, the advanced toggle and the submit button all share one left edge.
  • LabelsSelect/Input use their own label prop instead of hand-rolled <span> labels (which had a different colour, weight and gap), with one 6px label-to-control gap across the form.
  • Textarea — now copies .bitfun-input-container's box (transparent background, --border-base, 12px inset, hover/focus ring) so the caret lines up with the single-line fields; Input (14px) and Select (13px) values are pinned to 13px within this view.
  • Screenshot rowspace-between across three children was pulling the two buttons apart; copy now sits left with the buttons grouped right (and "choose" gets a distinct icon from "capture").
  • Measure — the form is capped at 620px instead of stretching single-line inputs across the full 1360px, with the history column pinned right.
  • History icons — the submission list rendered the icon name as text (box) inside a 32px box; it now renders the icon via renderMiniAppIcon.

The market detail modal picks up the same title/body scale so the two tabs match.

No behaviour, i18n keys or API calls changed — markup structure, class names and styles only.

Testing

  • npm run type-check clean
  • eslint on the modified view clean
  • Both SCSS files compile with sass
  • Verified alignment by rendering the compiled stylesheets (plus the dark preset's theme variables) against a static copy of the form markup — the real app was not launched, so a visual pass in the Tauri app is still worth doing.

The submission workspace defined its own sizes and paddings instead of
reusing the gallery/form primitives, so the section headings sat indented
past the fields below them, hints rendered at three different sizes (a few
still relying on the browser's 80% <small> default), and the textarea's box
did not match the inputs it sat between.

Everything in the view now follows one scale borrowed from the existing
components: 13px/600 section titles, 12px muted hints, 13px/500 field
labels, 13px values. Concretely:

- Section headings put the icon inline with the title so the title, the
  description and every field below share one left edge.
- Selects and inputs use the components' own `label` prop instead of
  hand-rolled <span> labels, with a shared 6px label-to-control gap.
- The textarea copies .bitfun-input-container's box (transparent, base
  border, 12px inset, focus ring) so carets line up across fields.
- The screenshot row no longer space-betweens three children; copy sits
  left, the two buttons group right.
- The form is capped at a 620px measure instead of stretching to 1360px.
- Submission history rendered the icon *name* as text in a 32px box; it now
  renders the icon.

The market detail modal picks up the same title/body scale.
@bobleer
bobleer merged commit ad15d77 into GCWing:main Jul 30, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant