fix: 🤔 sd-combobox – visual issues on mobile (background, clipping, alignment)

[coraliefeil]

Title: sd-combobox – visual issues on mobile (background, clipping, alignment)

---

Current behavior

On mobile devices / in mobile view, the sd-combobox default implementation shows several visual issues:

• When the component is active (focused/open), the field has a gray background, but it should have a white background fill (consistent with the rest of the form fields and design specs).
• On the right-hand side, the combobox and/or its flyout are cut off in mobile view (content is not fully visible within the viewport).
• The input field and its flyout are not properly aligned on iPhone (tested on iPhone 14, iOS 26.2, Chrome) – the dropdown appears slightly shifted relative to the field.

Reference: sd-combobox default story in the Solid Design System Storybook (iframe docs view, viewMode=story).

---

Expected behavior

• Active background:
  When the sd-combobox is active (focused or opened), the input field should keep a white background fill, consistent with its inactive state and other input components.
• No clipping:
  The combobox and its flyout should never be cut off on the right side. The component and dropdown should remain fully visible within the viewport in mobile view, without requiring horizontal scrolling.
• Proper alignment:
  The input field and the flyout should be visually aligned (no offset, overlap, or gap) on mobile devices, including iPhone 14 in Chrome on iOS 26.2, as defined in the design specifications.

---

Steps to reproduce

1. Open the Solid Design System Storybook and navigate to the sd-combobox default story (iframe docs view, viewMode=story).
2. Switch to a mobile viewport (e.g. using browser dev tools) or open the page directly on a mobile device.
3. Test device used: iPhone 14, iOS 26.2, Chrome.
4. Tap into the sd-combobox to focus the field and open the dropdown/flyout.
5. Observe:
   • The field background turns gray instead of remaining white.
   • The right side of the component and/or its flyout is cut off in the viewport.
   • The input field and flyout are slightly misaligned vertically/horizontally.

---

Technical Information

• Component: sd-combobox (default story)
• Environment: Solid Design System Storybook (iframe docs, viewMode=story)
• Device: iPhone 14
• OS: iOS 26.2
• Browser: Chrome (version as of testing time, assumed current)
• Context:
  • Issue reproducible in mobile view / small viewport.
  • Issues appear to be layout/styling related (background color state, horizontal overflow, and positioning of the flyout in relation to the input).

---

DoR

• Item has business value
• Item has been estimated by the team
• Item is clear and well-defined
• Item dependencies have been identified