Fix - Search block input renders taller than its Search button

[rajatgautam755421]

Changes proposed in this Pull Request:

Free-theme part of themegrill/spacious-pro#152. Pro PR: themegrill/spacious-pro#194.

The theme's global button { margin-bottom: 30px; } also hits the core Search block's button. Inside the block's flex row that margin makes the row 30px taller, and the input stretches to fill it. So the input renders at 75px next to a 45px button.

This adds .wp-block-search__button { margin-bottom: 0; } right after the global button rule, in assets/scss/_theme-style.scss and the compiled style.css / style-rtl.css. The compiled rule is byte-identical to what the gulp Sass settings produce.

The selector is limited to the Search block button. .wp-element-button was left out on purpose: it also matches File, WooCommerce and other block buttons, which would change their spacing on existing sites.

Effect on existing sites

• Only Search blocks change: the input shrinks to the button's height and the block is 30px shorter.
• Every other <button> (comment form, WooCommerce, widgets) keeps its 30px margin.

How to test the changes in this Pull Request:

1. Add a core Search block to a page and to a sidebar (the default "Search" widget).
2. Before: the input is visibly taller than the Search button (75px vs 45px).
3. After: input and button have the same height, on desktop and mobile.
4. Try the block's variants: button inside, icon button, hidden label, no button. All stay aligned; "no button" is unchanged.
5. Check that other buttons (comment form submit, WooCommerce buttons) look exactly as before.

Types of changes:

• Bug fix (non-breaking change which fixes an issue)
• Enhancement (modification of the currently available functionality)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully ran tests with your changes locally? Verified manually in the browser with Playwright (details below). No automated test was added.
• Have you updated the documentation accordingly?

Changelog entry

Fix - Search block input renders taller than its Search button.

Verification (WordPress 7.1.2, theme 1.9.12, 1366px and 375px)

Search block variant	Before (input / button)	After (input / button)
Default (button outside)	75 / 45	45 / 45
Button inside	75 / 45	45 / 45
Icon button	79 / 49	49 / 49
Label hidden	75 / 45	45 / 45
No button	38	38
Sidebar Search widget	75 / 45	45 / 45

• Front page, a post (comment form), a page with sidebar, the Shop page, a carousel page and an Elementor page: every other button kept the same margin and height, and page heights are identical before and after.
• No console errors.

Screenshots (1366px, Search block test page + sidebar Search widget)

Before	After

🤖 Generated with Claude Code

[github-actions]

QA suite — refused, no regression spec

This PR changes product source but adds no spec, so the suite was
refused before booting WordPress — running it just to report the same
thing at the end costs runner minutes for nothing. Run
/claudegrill:verify-fix locally and let write-spec add the guard
to this branch, then push again.

Source files changed with no matching spec

assets/scss/_theme-style.scss
style-rtl.css
style.css

[Copilot]

Copilot review overview

🟢 Approval recommended

The scoped fix is consistently applied across source and compiled stylesheets with no unresolved issues.

Review effort: Lite
Findings: None

What changed in this PR

Fixes the Search block’s stretched input by removing the inherited bottom margin from its button.

Changes:

• Adds a scoped Search block button margin reset.
• Updates source Sass and compiled LTR/RTL stylesheets.

File	Change
style.css	Compiled LTR CSS fix
style-rtl.css	Compiled RTL CSS fix
assets/​scss/​_theme-style.scss	Source Sass override

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.