Search: Fix invisible dashboard toggles by swapping custom FormToggle for WordPress ToggleControl (#48178)

* Search: Swap dashboard CompactFormToggle for @wordpress/components ToggleControl

The "Enable Jetpack Search" and "Enable instant search experience" toggles on the Search admin dashboard were rendering as blank 40×24 regions — the custom `CompactFormToggle` component relied on a CSS selector chain (`.form-toggle + .form-toggle__label .form-toggle__switch { background: ... }`) that assumed the switch span lived inside the label, but the actual rendered DOM puts the switch as a sibling of the input inside a separate container. The selector matched nothing, so the switch track never got painted and only the 20px white ::after circle was left — invisible against the white page.

Replace both call sites with `@wordpress/components`' `ToggleControl` — the same component Publicize uses directly and Boost uses via the jetpack-components wrapper. Self-contained styling, native accessibility, no fragile sibling selectors.

Adaptation notes:
- The old `toggling` prop (showed a saving-in-progress color on the switch) has no native equivalent on `ToggleControl`. Folded it into `disabled`, which was already being driven by `isSavingEitherOption`; the net effect is the toggle stays un-clickable during the in-flight save, just without the optimistic color preview.
- Old `switchClassNames` / `labelClassNames` (two separate class hooks for the switch vs. the label) collapse into a single `className` on `ToggleControl`'s wrapper. Applied `lg-col-span-12 md-col-span-8 sm-col-span-4` so the control fills the existing grid row.
- Dropped the `for` / `aria-label` props — `ToggleControl` renders its own `<label>` with `htmlFor` linkage, so the accessible name comes for free.
- Preserved the Search → Instant Search coupling logic in the handlers unchanged; it's a product-intent dependency (instant search can't run without the main module), not accidental.
- Ported `.form-toggle__label-content { font-size: 1.5em; font-weight: 600 }` to target `.jp-search-dashboard-toggle .components-toggle-control__label` so the heading-sized, bold label styling carries over to the native WP control (with the `(recommended)` span still at normal weight).

* Search: Let toggle descriptions and action buttons fill the row on mobile

Bump `sm-col-span-3` → `sm-col-span-4` on the two `.jp-form-search-settings-group__toggle-description` wrappers and the two action buttons ("Customize search results", "Edit sidebar widgets"). The dashboard's grid is 4-column on phones, so a `sm-col-span-3` element stopped at 75% width, leaving a visible empty strip on the right. Bumping to `sm-col-span-4` makes each element span the full row on phones, stacking cleanly under the toggle. Desktop and tablet are untouched (the `lg-*` and `md-*` spans still apply at their breakpoints).

* Search: Remove unused custom FormToggle component

The dashboard was the only external consumer of this calypso-era component; its two call sites now use `@wordpress/components`' `ToggleControl`. The customberg sidebar (`src/customberg/components/sidebar/sidebar-options.jsx`) has always used the native WP `ToggleControl`, so nothing else in the package references the custom version.

Remove `components/form-toggle/` entirely: `index.jsx`, `compact.jsx`, `style.scss`, `README.md`, and the test. The broken-background CSS selector that made the switch render blank against a white cascade (`.form-toggle + .form-toggle__label .form-toggle__switch`) goes with it.

* changelog: Add entries for Search custom FormToggle swap

* Search: Update dashboard e2e to locate toggles via their checkbox input

The `toggle()` helper was waiting for `span.form-toggle__switch:not([disabled])` to reappear after each API save — a selector tied to the deleted custom FormToggle's rendered DOM. With WP's ToggleControl the visible toggle is a `<span class="components-form-toggle__track">` sibling of a native `<input type="checkbox" class="components-form-toggle__input">`, not a `<span>` with a `disabled` attribute.

Rather than trade one DOM-specific selector for another, assert on the locator we already have: the `getByRole('checkbox', ...)` Locator the test passed in. `toBeEnabled()` is the idiomatic check for "the form control accepts input again," works against any ToggleControl (or raw checkbox) WP might swap in later, and verifies the same element the test just clicked rather than some-other-toggle-on-the-page.

* Search: Align dashboard toggle to label baseline

When the ToggleControl label wraps on narrow viewports, the HStack's
default center alignment leaves the toggle floating in the middle of
the row. Switch the h-stack to baseline alignment so the toggle stays
visually anchored to the first line of the label.

Author: CGastrell

projects/packages/search/changelog/remove-unused-custom-formtoggle

@@ -0,0 +1,4 @@
+Significance: patch
+Type: removed
+
+Remove the unused custom FormToggle component; all call sites now use WordPress ToggleControl.

projects/packages/search/changelog/search-swap-custom-formtoggle

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Swap the custom FormToggle on the Search admin dashboard for WordPress ToggleControl, restoring native rendering of the Enable Jetpack Search and Enable instant search toggles.

projects/packages/search/changelog/search-toggle-baseline-align

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Align Search dashboard toggle to its label baseline so wrapped labels on mobile no longer push the toggle into the middle of the row.