fix(StyledSearchBar): make fullWidth configurable, drop hardcoded width: 100%#1507
Merged
leecalcote merged 3 commits intomasterfrom May 7, 2026
Merged
Conversation
…th: 100%
The styled OutlinedInput wrapper hardcoded `width: 100%`, and the component
hardcoded `fullWidth` on its rendered input. In a flex toolbar (e.g. catalog,
designs and views in meshery-cloud), this forced siblings such as table view
toggles or action buttons to wrap onto a new row even when the viewport had
plenty of horizontal space, and the duplicate width rule made caller-side `sx`
overrides fight specificity.
Make `fullWidth` an optional prop (default `true`, preserving existing layout)
and remove the redundant `width: 100%` from the styled wrapper. Callers placing
the search bar inside a horizontal toolbar can now pass `fullWidth={false}` and
control width through `sx` without overriding internal styles.
Signed-off-by: Lee Calcote <leecalcote@gmail.com>
leecalcote
force-pushed
the
claude/investigate-sistent-toolbars-jrdtU
branch
from
36f9c28 to
d3a34d0
Compare
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces a fullWidth prop to the StyledSearchBar component, defaulting to true to maintain backward compatibility. It removes the hardcoded width: 100% from the styled component, allowing the component to be used in horizontal flex toolbars without forcing a new row. Additionally, comprehensive tests were added to verify the default behavior and the ability to control width via the sx prop when fullWidth is set to false. I have no feedback to provide.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates StyledSearchBar to avoid forcing full-width behavior in flex toolbars by making fullWidth configurable (defaulting to the historical true behavior) and removing a redundant hardcoded width: 100% style from the styled input wrapper. This fits the codebase’s custom/ component layer by improving layout composability while preserving backward compatibility.
Changes:
- Add an optional
fullWidth?: booleanprop toStyledSearchBar(defaulttrue) and wire it through to the underlyingOutlinedInput. - Remove the hardcoded
width: '100%'rule fromStyledSearchInputso callers can control width viasxwhenfullWidth={false}. - Add a new test suite for
StyledSearchBarcovering default/fullWidth behavior and caller-controlled width.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/custom/StyledSearchBar/StyledSearchBar.tsx | Adds fullWidth prop (default true) and forwards it to the input to allow non-full-width usage in toolbars. |
| src/custom/StyledSearchBar/style.tsx | Removes hardcoded width: 100% from the styled wrapper to avoid overriding caller sizing. |
| src/testing/StyledSearchBar.test.tsx | Introduces tests for default fullWidth behavior and sizing when fullWidth={false}. |
Comment on lines
+27
to
+30
| // The styled wrapper used to hardcode width: 100% which made siblings | ||
| // wrap onto a new row inside flex toolbars (catalog, designs, views). | ||
| // With fullWidth=false there must be no inline 100% width applied. | ||
| expect(root?.style.width).toBe(''); |
Comment on lines
+33
to
+41
| it('lets callers control width via sx when fullWidth is false', () => { | ||
| const { container } = renderWithTheme( | ||
| <StyledSearchBar fullWidth={false} sx={{ width: '32rem' }} /> | ||
| ); | ||
| const root = getInputRoot(container); | ||
|
|
||
| expect(root).not.toBeNull(); | ||
| expect(window.getComputedStyle(root as Element).width).toBe('32rem'); | ||
| }); |
The third test asserted `getComputedStyle(root).width === '32rem'`, which
returns inconsistent values across JSDOM environments (it can return the
literal string, an empty string, or a px-normalised value depending on the
runtime). Switch to a numeric `sx={{ width: 512 }}` so MUI emits `512px`,
which JSDOM reports consistently.
Also drop the `root?.style.width === ''` assertion from the second test:
the original `width: 100%` rule was applied via a CSS class on the styled
wrapper, not as an inline `style` attribute, so that line passed both
before and after the fix and did not actually verify the regression.
The remaining `MuiInputBase-fullWidth` class assertion plus the third
test together cover the behavior change.
Signed-off-by: Lee Calcote <leecalcote@gmail.com>
PR #1501 bumped react to 19.2.6 but left react-dom at 19.2.5, which makes all @testing-library/react-based test suites in CI fail with "Incompatible React versions: react: 19.2.6, react-dom: 19.2.5". Bumping react-dom to the matching 19.2.6 patch release restores test execution. Signed-off-by: Lee Calcote <leecalcote@gmail.com>
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
StyledSearchBarforced its containing flex row to break onto a new line whenever the search bar was placed alongside other toolbar controls. Two stacked rules caused this:OutlinedInput(StyledSearchInputinsrc/custom/StyledSearchBar/style.tsx) hardcodedwidth: '100%'.StyledSearchBarhardcodedfullWidthon the rendered input.In a flex toolbar (the catalog / My Designs / My Views toolbars in
meshery-clouduse this exact pattern), the search bar therefore claimed the full main-axis width and pushed sibling controls — table view-mode toggles, Create / Import buttons — to a new row, even at desktop widths where everything fit comfortably. Callers were forced to override the styled rule with explicit&.MuiTextField-root { width: ... }shims to fight specificity.This change:
width: '100%'rule from the styled wrapper. MUI'sfullWidthprop already produceswidth: 100%on the underlying input, so the duplicate rule served only to win specificity battles.fullWidth?: booleanprop toStyledSearchBar, defaulting totrueso existing callers see no behavior change.fullWidth={false}and size the search bar viasx(e.g.sx={{ width: { xs: '100%', md: '32rem' } }}), keeping siblings on the same row.Test plan
npm test— all 12 suites, 32 tests pass (including the existingCatalogFilterSectiontest, which usesStyledSearchBarinternally and exercises the defaultfullWidth: truepath).src/__testing__/StyledSearchBar.test.tsxcovers:MuiInputBase-fullWidth(no behavior change for existing callers),fullWidth={false}removes the class and does not forcewidth: 100%,fullWidth={false}+sx={{ width: '32rem' }}lets caller-supplied width win.npm run build(tsup ESM + CJS + DTS) succeeds; the bundled styled rule now starts withfontFamily→@media (max-width: 590px)with no interveningwidth: '100%'.eslintclean on the changed files.Downstream adoption
Once this lands and is published, the three meshery-cloud toolbars (
ui/components/catalog/catalog/index.js,ui/components/catalog/designs/index.js,ui/components/catalog/views/index.js) can passfullWidth={false}to theStyledSearchBarand remove the localflexWrap: 'nowrap'and&.MuiTextField-rootwidth overrides currently used to mask the wrap.Generated by Claude Code