feat(design-system): reduce default form-control height to 32px#6699
Merged
macko911 merged 4 commits intoJul 7, 2026
Merged
Conversation
Inputs and their inline buttons rendered at 36px, reading heavier than the rest of the redesigned UI. Drop the Input/InputGroup default to 32px (h-8) and match the webapp Select trigger and ScopesInput chips container. Buttons that sit inline with an input move from lg to md (Combobox, MultiSelect, FilterMultiSelect, PeriodSelector and IntegrationDropdown triggers, the KeyValueInput remove button, and the AuthCredentials refresh buttons). The lg size is kept for prominent CTAs and full-width form submits, which stay intentionally larger.
Contributor
Preview Deploy
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Extend the 32px control height to lg buttons on content pages that sit in a header, toolbar, or form row next to inputs: the integrations list and detail headers, the functions filter toolbar and View code button, connection list/create/settings actions, and team settings. Shrink the LineSnippet command box to match the adjacent View code button. The lg size stays for auth submit buttons, Getting Started onboarding, centered empty-state CTAs, and dialog footer actions.
macko911
marked this pull request as ready for review
July 7, 2026 09:51
Input, InputGroup and Textarea used radius/sm (4px). Move them to radius/xs (2px) to match the button radius.
Match the Select trigger radius to the 2px input radius.
gabrielle-svg
approved these changes
Jul 7, 2026
macko911
deleted the
matej/nan-6160-reduce-default-form-control-height-to-32px
branch
July 7, 2026 18:46
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
2 participants
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.
Problem
Inputs and the buttons/controls beside them rendered at 36px with a 4px corner radius, reading heavier and rounder than the rest of the redesigned UI. Inputs and inline buttons only stayed aligned because both were pinned to 36px.
Solution
Input/InputGroup/Textareaand the webappSelecttrigger andScopesInputto a 32px control height.lgtomd: the DS component triggers (Combobox,MultiSelect,FilterMultiSelect,PeriodSelector,IntegrationDropdown), theAuthCredentialsrefresh buttons, and content-page actions across integrations, connections, function detail, and team settings. ShrinkLineSnippetto match the adjacent "View code" button.rounded-ds-sm) to 2px (rounded-ds-xs) onInput/InputGroup/Textareaand theSelecttrigger, matching the button radius.lgbutton size for prominent CTAs and full-width form submits (auth pages, Getting Started, empty-state create buttons, dialog actions), which stay intentionally larger.Fixes NAN-6160
Testing
lgCTAs still measure 36px.