fix(web): unify MiniApp market typography and alignment - #1876
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
.gallery-zone__title.gallery-zone__subtitle.bitfun-input-label.select__value.bitfun-input-hintConcretely:
Select/Inputuse their ownlabelprop instead of hand-rolled<span>labels (which had a different colour, weight and gap), with one 6px label-to-control gap across the form..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) andSelect(13px) values are pinned to 13px within this view.space-betweenacross 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").box) inside a 32px box; it now renders the icon viarenderMiniAppIcon.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-checkcleaneslinton the modified view cleansass