diff --git a/.changeset/silent-views-roll.md b/.changeset/silent-views-roll.md
new file mode 100644
index 0000000000..b9316eb9b3
--- /dev/null
+++ b/.changeset/silent-views-roll.md
@@ -0,0 +1,8 @@
+---
+'@solid-design-system/components': patch
+'@solid-design-system/docs': patch
+---
+
+- Fixed the mobile view responsiveness of `sd-combobox` when using multiple tags.
+- Fixed the mobile clipping for the `sd-combobox` stories in the Documentation.
+- Fixed the mobile background when focused for the components `sd-combobox`, `sd-input`, `sd-select`, `sd-datepicker` and `sd-textarea`.
\ No newline at end of file
diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts
index 7aec2df86e..daf3e90c78 100644
--- a/packages/components/src/components/combobox/combobox.ts
+++ b/packages/components/src/components/combobox/combobox.ts
@@ -267,6 +267,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
   @property() getTag: (option: SdOption, index: number) => TemplateResult | string | HTMLElement = option => {
     return html`
       <sd-tag
+        class="min-w-0 max-w-full"
         ?disabled=${this.disabled}
         part="tag"
         exportparts="
@@ -349,6 +350,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
       return [
         html`
           <sd-tag
+            class="min-w-0 max-w-full"
             ?disabled=${this.disabled}
             part="tag"
             exportparts="
@@ -1319,7 +1321,9 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
               part="combobox"
               class=${cx(
                 'relative w-full px-4 flex flex-row items-center rounded-default transition-colors hover:duration-fast ease-in-out',
-                this.visuallyDisabled || this.disabled ? 'hover:bg-transparent' : 'hover:bg-neutral-200',
+                this.visuallyDisabled || this.disabled
+                  ? 'hover:bg-transparent'
+                  : 'hover:[@media(hover:hover)]:bg-neutral-200',
                 this.open && 'shadow transition-shadow duration-medium ease-in-out',
                 ['invalid', 'activeInvalid'].includes(selectState) && 'form-control--invalid-color-background',
                 {
@@ -1340,55 +1344,67 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
                     class="${cx('inline-flex', iconMarginRight, iconColor, iconSize)}"
                   ></slot>`
                 : ''}
-              ${this.multiple && this.useTags && this.tags.length > 0
-                ? html`<div
-                    part="tags"
-                    class="${cx('flex items-center gap-1', iconMarginRight, this.floatingLabel && 'mt-4')}"
-                  >
-                    ${this.tags}
-                  </div>`
-                : null}
-              <input
-                id="display-input"
-                name=${this.name}
-                form=${this.form}
-                part="display-input"
-                class=${cx(
-                  'appearance-none outline-none bg-transparent flex-auto min-w-0',
-                  cursorStyles,
-                  this.selectedTextLabel && !this.multiple
-                    ? 'placeholder:form-control-color-text'
-                    : 'placeholder:text-neutral-700',
-                  this.size === 'sm' ? (isFloatingLabelActive ? 'h-4' : 'h-6') : isFloatingLabelActive ? 'h-6' : 'h-8',
-                  isFloatingLabelActive && 'leading-none mt-4'
-                )}
-                type="text"
-                placeholder=${!this.floatingLabel || isFloatingLabelActive
-                  ? this.selectedTextLabel && !this.multiple
-                    ? this.selectedTextLabel
-                    : this.placeholder || this.localize.term('comboboxDefaultPlaceholder')
-                  : ''}
-                .disabled=${this.disabled}
-                .value=${this.displayInputValue}
-                autocomplete="off"
-                spellcheck="false"
-                autocapitalize="off"
-                aria-controls="listbox"
-                aria-expanded=${this.open}
-                aria-haspopup="listbox"
-                aria-labelledby="label"
-                aria-disabled=${this.disabled || this.visuallyDisabled}
-                aria-describedby="help-text invalid-message"
-                aria-invalid="${this.showInvalidStyle}"
-                role="combobox"
-                tabindex="0"
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-                aria-autocomplete="list"
-                aria-owns="listbox"
-                @input=${this.handleInput}
-                @change=${this.handleChange}
-              />
+              <div class="flex flex-wrap items-center gap-1 w-full min-w-0 relative">
+                ${this.multiple && this.useTags && this.tags && this.tags.length > 0
+                  ? html`<div
+                      part="tags"
+                      class="${cx(
+                        'flex flex-wrap items-center gap-1 min-w-0',
+                        iconMarginRight,
+                        this.floatingLabel && 'mt-4'
+                      )}"
+                    >
+                      ${this.tags}
+                    </div>`
+                  : null}
+                <input
+                  id="display-input"
+                  name=${this.name}
+                  form=${this.form}
+                  part="display-input"
+                  class=${cx(
+                    'appearance-none outline-none bg-transparent flex-auto min-w-0',
+                    cursorStyles,
+                    this.selectedTextLabel && !this.multiple
+                      ? 'placeholder:form-control-color-text'
+                      : 'placeholder:text-neutral-700',
+                    this.size === 'sm'
+                      ? isFloatingLabelActive
+                        ? 'h-4'
+                        : 'h-6'
+                      : isFloatingLabelActive
+                        ? 'h-6'
+                        : 'h-8',
+                    isFloatingLabelActive && 'leading-none mt-4'
+                  )}
+                  type="text"
+                  placeholder=${!this.floatingLabel || isFloatingLabelActive
+                    ? this.selectedTextLabel && !this.multiple
+                      ? this.selectedTextLabel
+                      : this.placeholder || this.localize.term('comboboxDefaultPlaceholder')
+                    : ''}
+                  .disabled=${this.disabled}
+                  .value=${this.displayInputValue}
+                  autocomplete="off"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  aria-controls="listbox"
+                  aria-expanded=${this.open}
+                  aria-haspopup="listbox"
+                  aria-labelledby="label"
+                  aria-disabled=${this.disabled || this.visuallyDisabled}
+                  aria-describedby="help-text invalid-message"
+                  aria-invalid="${this.showInvalidStyle}"
+                  role="combobox"
+                  tabindex="0"
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                  aria-autocomplete="list"
+                  aria-owns="listbox"
+                  @input=${this.handleInput}
+                  @change=${this.handleChange}
+                />
+              </div>
               <div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">
                 ${this.selectedOptions.map(option => option?.getTextLabel()).join(', ')}
               </div>
diff --git a/packages/components/src/components/datepicker/datepicker.ts b/packages/components/src/components/datepicker/datepicker.ts
index d5feb17400..b895bb03e9 100644
--- a/packages/components/src/components/datepicker/datepicker.ts
+++ b/packages/components/src/components/datepicker/datepicker.ts
@@ -2106,7 +2106,9 @@ export default class SdDatepicker extends SolidElement implements SolidFormContr
               part="base"
               class=${cx(
                 'px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast w-full',
-                !this.disabled && !this.readonly && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
+                !this.disabled && !this.readonly && !this.visuallyDisabled
+                  ? 'hover:[@media(hover:hover)]:bg-neutral-200'
+                  : '',
                 this.readonly ? 'bg-neutral-100' : 'bg-white',
                 inputState === 'disabled' || inputState === 'visuallyDisabled' ? 'text-neutral-500' : 'text-black'
               )}
diff --git a/packages/components/src/components/input/input.ts b/packages/components/src/components/input/input.ts
index 689584a779..bb0679a7fc 100644
--- a/packages/components/src/components/input/input.ts
+++ b/packages/components/src/components/input/input.ts
@@ -635,7 +635,9 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               'px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast',
               this.floatingLabel && 'has-floating-label',
               // States
-              !this.disabled && !this.readonly && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
+              !this.disabled && !this.readonly && !this.visuallyDisabled
+                ? 'hover:[@media(hover:hover)]:bg-neutral-200'
+                : '',
               this.readonly ? 'bg-neutral-100' : 'bg-white',
               ['disabled', 'visuallyDisabled'].includes(inputState) ? 'text-neutral-500' : 'form-control-color-text',
               ['invalid', 'activeInvalid'].includes(inputState) && 'form-control--invalid-color-background',
diff --git a/packages/components/src/components/select/select.ts b/packages/components/src/components/select/select.ts
index 15e7ea425f..e8147831ad 100644
--- a/packages/components/src/components/select/select.ts
+++ b/packages/components/src/components/select/select.ts
@@ -1050,7 +1050,9 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
             <div
               class=${cx(
                 'relative w-full h-full grid rounded-default transition-colors hover:duration-fast ease-in-out',
-                this.visuallyDisabled || this.disabled ? 'hover:bg-transparent' : 'hover:bg-neutral-200',
+                this.visuallyDisabled || this.disabled
+                  ? 'hover:bg-transparent'
+                  : 'hover:[@media(hover:hover)]:bg-neutral-200',
                 ['invalid', 'activeInvalid'].includes(selectState) && 'form-control--invalid-color-background'
               )}
               slot="anchor"
diff --git a/packages/components/src/components/textarea/textarea.ts b/packages/components/src/components/textarea/textarea.ts
index 88a62fc022..290874fc21 100644
--- a/packages/components/src/components/textarea/textarea.ts
+++ b/packages/components/src/components/textarea/textarea.ts
@@ -447,7 +447,9 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
                 md: 'textarea-md',
                 lg: 'textarea-lg'
               }[this.size],
-              !this.disabled && !this.readonly && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
+              !this.disabled && !this.readonly && !this.visuallyDisabled
+                ? 'hover:[@media(hover:hover)]:bg-neutral-200'
+                : '',
               this.readonly ? 'bg-neutral-100' : 'bg-white',
               textareaState === 'disabled' || textareaState === 'visuallyDisabled'
                 ? 'text-neutral-500'
diff --git a/packages/docs/src/stories/components/combobox.stories.ts b/packages/docs/src/stories/components/combobox.stories.ts
index 9e95cdb139..8a62cde26e 100644
--- a/packages/docs/src/stories/components/combobox.stories.ts
+++ b/packages/docs/src/stories/components/combobox.stories.ts
@@ -85,7 +85,7 @@ export const Default = {
     delete args['getOption'];
     delete args['getOption-attr'];
 
-    return html`<div class="h-[260px] w-[400px]">${generateTemplate({ args })}</div>`;
+    return html`<div class="h-[260px] w-full max-w-[400px]">${generateTemplate({ args })}</div>`;
   }
 };
 
@@ -100,30 +100,34 @@ export const Default = {
 
 export const Size = {
   render: () => html`
-    <div class="flex gap-12 h-[500px]">
-      <sd-combobox size="lg" label="Label" placeholder="Large" placement="bottom" value="" class="test">
-        <sd-option value="option-1" size="lg">Option 1</sd-option>
-        <sd-option value="option-2" size="lg">Option 2</sd-option>
-        <sd-option value="option-3" size="lg">Option 3</sd-option>
-        <sd-option value="option-4" size="lg">Option 4</sd-option>
-        <sd-option value="option-5" size="lg">Option 5</sd-option>
-      </sd-combobox>
-
-      <sd-combobox size="md" label="Label" placeholder="Medium" placement="bottom" value="" class="test">
-        <sd-option value="option-1" size="md">Option 1</sd-option>
-        <sd-option value="option-2" size="md">Option 2</sd-option>
-        <sd-option value="option-3" size="md">Option 3</sd-option>
-        <sd-option value="option-4" size="md">Option 4</sd-option>
-        <sd-option value="option-5" size="md">Option 5</sd-option>
-      </sd-combobox>
-
-      <sd-combobox size="sm" label="Label" placeholder="Small" placement="bottom" value="">
-        <sd-option value="option-1" size="sm">Option 1</sd-option>
-        <sd-option value="option-2" size="sm">Option 2</sd-option>
-        <sd-option value="option-3" size="sm">Option 3</sd-option>
-        <sd-option value="option-4" size="sm">Option 4</sd-option>
-        <sd-option value="option-5" size="sm">Option 5</sd-option>
-      </sd-combobox>
+    <div class="flex flex-wrap md:flex-nowrap gap-12 h-[400px]">
+      <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]">
+        <sd-combobox size="lg" label="Label" placeholder="Large" placement="bottom" value="" class="test">
+          <sd-option value="option-1" size="lg">Option 1</sd-option>
+          <sd-option value="option-2" size="lg">Option 2</sd-option>
+          <sd-option value="option-3" size="lg">Option 3</sd-option>
+          <sd-option value="option-4" size="lg">Option 4</sd-option>
+          <sd-option value="option-5" size="lg">Option 5</sd-option>
+        </sd-combobox>
+      </div>
+      <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]">
+        <sd-combobox size="md" label="Label" placeholder="Medium" placement="bottom" value="" class="test">
+          <sd-option value="option-1" size="md">Option 1</sd-option>
+          <sd-option value="option-2" size="md">Option 2</sd-option>
+          <sd-option value="option-3" size="md">Option 3</sd-option>
+          <sd-option value="option-4" size="md">Option 4</sd-option>
+          <sd-option value="option-5" size="md">Option 5</sd-option>
+        </sd-combobox>
+      </div>
+      <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]">
+        <sd-combobox size="sm" label="Label" placeholder="Small" placement="bottom" value="">
+          <sd-option value="option-1" size="sm">Option 1</sd-option>
+          <sd-option value="option-2" size="sm">Option 2</sd-option>
+          <sd-option value="option-3" size="sm">Option 3</sd-option>
+          <sd-option value="option-4" size="sm">Option 4</sd-option>
+          <sd-option value="option-5" size="sm">Option 5</sd-option>
+        </sd-combobox>
+      </div>
     </div>
   `
 };
@@ -135,16 +139,21 @@ export const Size = {
  */
 export const Placement = {
   render: () => html`
-    <div class="flex items-center gap-12 h-[500px]">
-      <sd-combobox class="self-baseline" size="lg" label="Label" placement="bottom" value="">
+    <div class="flex flex-wrap md:flex-nowrap items-center gap-12 h-[400px]">
+      <sd-combobox
+        class="self-baseline min-w-[200px] md:min-w-0 max-w-[400px]"
+        size="lg"
+        label="Label"
+        placement="bottom"
+        value=""
+      >
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
         <sd-option value="option-3">Option 3</sd-option>
         <sd-option value="option-4">Option 4</sd-option>
         <sd-option value="option-5">Option 5</sd-option>
       </sd-combobox>
-
-      <sd-combobox size="lg" label="Label" placement="top" value="">
+      <sd-combobox class="min-w-[200px] md:min-w-0 max-w-[400px]" size="lg" label="Label" placement="top" value="">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
         <sd-option value="option-3">Option 3</sd-option>
@@ -162,23 +171,26 @@ export const Placement = {
  */
 export const Label = {
   render: () => html`
-    <div class="flex gap-12 h-[500px]">
-      <sd-combobox size="lg" label="Label attribute" placement="bottom" value="">
-        <sd-option value="option-1">Option 1</sd-option>
-        <sd-option value="option-2">Option 2</sd-option>
-        <sd-option value="option-3">Option 3</sd-option>
-        <sd-option value="option-4">Option 4</sd-option>
-        <sd-option value="option-5">Option 5</sd-option>
-      </sd-combobox>
-
-      <sd-combobox size="lg" placement="bottom" value="">
-        <div slot="label" class="text-lg">Label slot</div>
-        <sd-option value="option-1">Option 1</sd-option>
-        <sd-option value="option-2">Option 2</sd-option>
-        <sd-option value="option-3">Option 3</sd-option>
-        <sd-option value="option-4">Option 4</sd-option>
-        <sd-option value="option-5">Option 5</sd-option>
-      </sd-combobox>
+    <div class="flex flex-wrap md:flex-nowrap gap-6">
+      <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px] h-[350px]">
+        <sd-combobox size="lg" label="Label" placement="bottom" value="" class="w-full">
+          <sd-option value="option-1">Option 1</sd-option>
+          <sd-option value="option-2">Option 2</sd-option>
+          <sd-option value="option-3">Option 3</sd-option>
+          <sd-option value="option-4">Option 4</sd-option>
+          <sd-option value="option-5">Option 5</sd-option>
+        </sd-combobox>
+      </div>
+      <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px] h-[350px]">
+        <sd-combobox size="lg" placement="bottom" value="" class="w-full">
+          <div slot="label" class="text-lg">Label slot</div>
+          <sd-option value="option-1">Option 1</sd-option>
+          <sd-option value="option-2">Option 2</sd-option>
+          <sd-option value="option-3">Option 3</sd-option>
+          <sd-option value="option-4">Option 4</sd-option>
+          <sd-option value="option-5">Option 5</sd-option>
+        </sd-combobox>
+      </div>
     </div>
   `
 };
@@ -190,7 +202,7 @@ export const Label = {
  */
 export const FloatingLabel = {
   render: () => html`
-    <div class="flex gap-12 h-[500px] w-[400px]">
+    <div class="flex gap-12 h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox size="lg" label="Floating Label" floating-label placement="bottom" value="">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -207,7 +219,7 @@ export const FloatingLabel = {
  */
 export const Placeholder = {
   render: () => html`
-    <div class="w-[400px] h-[500px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox size="lg" label="Label" placeholder="Placeholder example" placement="bottom" value="">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -224,7 +236,7 @@ export const Placeholder = {
  */
 export const Disabled = {
   render: () => html`
-    <div class="w-[400px]">
+    <div class="min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox size="lg" label="Label" placeholder="Disabled" placement="bottom" value="" disabled>
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -245,7 +257,7 @@ export const Disabled = {
  */
 export const VisuallyDisabled = {
   render: () => html`
-    <div class="w-[400px] h-[200px] pt-12">
+    <div class="h-[200px] pt-12 min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
         <sd-combobox
           size="lg"
@@ -273,8 +285,15 @@ export const VisuallyDisabled = {
  */
 export const HelpText = {
   render: () => html`
-    <div class="flex gap-12 h-[500px]">
-      <sd-combobox size="lg" label="Label" placement="bottom" value="" help-text="Help text attribute">
+    <div class="flex flex-wrap md:flex-nowrap gap-12 h-[400px]">
+      <sd-combobox
+        class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]"
+        size="lg"
+        label="Label"
+        placement="bottom"
+        value=""
+        help-text="Help text attribute"
+      >
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
         <sd-option value="option-3">Option 3</sd-option>
@@ -282,7 +301,13 @@ export const HelpText = {
         <sd-option value="option-5">Option 5</sd-option>
       </sd-combobox>
 
-      <sd-combobox size="lg" label="Label" placement="bottom" value="">
+      <sd-combobox
+        class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]"
+        size="lg"
+        label="Label"
+        placement="bottom"
+        value=""
+      >
         <div slot="help-text" class="text-lg">Help text slot</div>
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -303,7 +328,7 @@ export const Focus = {
     elm?.focus();
   },
   render: () => html`
-    <div class="h-[260px] w-[400px]">
+    <div class="h-[260px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox label="Label">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -318,7 +343,7 @@ export const Focus = {
  */
 export const SuggestionContainerHeight = {
   render: () => html`
-    <div class="h-[260px] w-[400px]">
+    <div class="h-[260px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <style>
         #max-height::part(listbox) {
           max-height: 100px;
@@ -335,7 +360,7 @@ export const SuggestionContainerHeight = {
 
 export const Clearable = {
   render: () => html`
-    <div class="w-[400px] h-[500px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox size="lg" label="Label" placement="bottom" clearable value="option-1">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -356,7 +381,7 @@ export const Clearable = {
  */
 export const Icons = {
   render: () => html`
-    <div class="w-[400px] h-[400px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox size="lg" clearable label="Label">
         <sd-icon slot="left" name="system/image" aria-hidden="true" color="currentColor"></sd-icon>
         ${createColorOptionsHtml()}
@@ -373,7 +398,7 @@ export const Icons = {
  */
 export const Search = {
   render: () => html`
-    <div class="w-[400px] h-[500px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox size="lg" label="Label" placement="bottom" type="search" value="">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -396,13 +421,14 @@ export const Search = {
 
 export const Multiple = {
   render: () => html`
-    <div class="w-[700px] h-[400px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[700px]">
       <sd-combobox
         size="lg"
         label="Funds name"
         placement="bottom"
         multiple
         value="BBBank_Dynamik_Union BBBank_Kontinuität_Union"
+        style="--tag-max-width: 100px"
       >
         <sd-option value="BBBank_Dynamik_Union" checkbox>BBBank Dynamik Union</sd-option>
         <sd-option value="BBBank_Kontinuität_Union" checkbox>BBBank Kontinuität Union</sd-option>
@@ -423,7 +449,7 @@ export const Multiple = {
  */
 export const MaxOptionsVisible = {
   render: () => html`
-    <div class="w-[700px] h-[400px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[700px]">
       <sd-combobox
         size="lg"
         label="Funds name"
@@ -448,7 +474,7 @@ export const MaxOptionsVisible = {
 
 export const Required = {
   render: () => html`
-    <div class="w-[400px] h-[400px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox
         size="lg"
         label="Required"
@@ -475,7 +501,7 @@ export const Required = {
 
 export const Valid = {
   render: () => html`
-    <div class="w-[400px] h-[400px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox
         size="lg"
         placement="bottom"
@@ -508,7 +534,7 @@ export const Valid = {
 
 export const Invalid = {
   render: () => html`
-    <div class="w-[400px] h-[300px]">
+    <div class="h-[300px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox
         size="lg"
         placement="bottom"
@@ -541,7 +567,7 @@ export const Invalid = {
  */
 export const AsyncOptions = {
   render: () => html`
-    <div class="w-[400px] h-[500px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox label="Async options" class="async-combobox">
         <sd-option class="option" value="option-1">Option 1</sd-option>
         <sd-option class="option" value="option-2">Option 2</sd-option>
@@ -572,7 +598,7 @@ export const AsyncOptions = {
  */
 export const CustomFilter = {
   render: () => html`
-    <div class="w-[400px] h-[500px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
       <sd-combobox label="Custom filter" class="filter-combobox"> ${createColorOptionsHtml()} </sd-combobox>
     </div>
     <script type="module">
diff --git a/packages/docs/src/stories/components/combobox.test.stories.ts b/packages/docs/src/stories/components/combobox.test.stories.ts
index 298e7b355d..e91eff5b35 100644
--- a/packages/docs/src/stories/components/combobox.test.stories.ts
+++ b/packages/docs/src/stories/components/combobox.test.stories.ts
@@ -120,7 +120,7 @@ export default {
 export const Default = {
   name: 'Default',
   render: (args: any) => {
-    return html`<div class="h-[260px] w-[400px]">${generateTemplate({ args })}</div>`;
+    return html`<div class="h-[260px] w-full max-w-[400px]">${generateTemplate({ args })}</div>`;
   }
 };
 
@@ -134,7 +134,7 @@ export const Labels = {
     label: 'Label'
   },
   render: (args: any) => {
-    return html`<div class="h-[260px] w-[400px]">${generateTemplate({ args })}</div>`;
+    return html`<div class="h-[260px] w-full max-w-[400px]">${generateTemplate({ args })}</div>`;
   }
 };
 
@@ -148,14 +148,14 @@ export const FloatingLabel = {
   },
   render: (args: any) => {
     return html`
-      <div class="h-[260px] w-[400px]">
+      <div class="h-[260px] w-full max-w-[400px]">
         ${generateTemplate({
           constants: [{ type: 'attribute', name: 'floating-label', value: true }],
           args
         })}
       </div>
       <br />
-      <div class="h-[260px] w-[400px]">
+      <div class="h-[260px] w-full max-w-[400px]">
         ${generateTemplate({
           constants: [
             { type: 'attribute', name: 'value', value: 'option-1' },
@@ -187,7 +187,7 @@ export const SizeMultiple = {
 
     return html` <div>Default</div>
       <br />
-      <div class="h-[340px] w-[700px]">
+      <div class="min-h-[340px] w-full max-w-[700px]">
         ${generateTemplate({
           options: {
             classes: 'w-full'
@@ -205,7 +205,7 @@ export const SizeMultiple = {
       <br />
       <div>Floating Label</div>
       <br />
-      <div class="h-[340px] w-[700px]">
+      <div class="min-h-[340px] w-full max-w-[700px]">
         ${generateTemplate({
           options: {
             classes: 'w-full'
@@ -242,10 +242,10 @@ export const DisabledMultiple = {
   render: (args: { 'open-attr'?: string }) => {
     delete args['open-attr'];
     return html` <div>Default</div>
-      <div class="h-[340px] w-full">
+      <div class="min-h-[340px] w-full">
         ${generateTemplate({
           options: {
-            classes: 'w-full [&>tbody>tr>td]:w-[50%]'
+            classes: 'w-full [&>tbody>tr>td]:w-[50%] [&_*]:min-w-0'
           },
           axis: {
             x: {
@@ -268,10 +268,10 @@ export const DisabledMultiple = {
         })}
       </div>
       <div>Floating Label</div>
-      <div class="h-[340px] w-full">
+      <div class="min-h-[340px] w-full">
         ${generateTemplate({
           options: {
-            classes: 'w-full [&>tbody>tr>td]:w-[50%]'
+            classes: 'w-full [&>tbody>tr>td]:w-[50%] [&_*]:min-w-0'
           },
           axis: {
             x: {
@@ -397,7 +397,7 @@ export const BorderVisibility = {
   render: () => {
     return html` <div>Default</div>
       <br />
-      <div class="h-[150px] w-[420px]">
+      <div class="h-[150px] w-full max-w-[400px]">
         ${generateTemplate({
           args: overrideArgs([
             twentyOptionsConstant,
@@ -411,7 +411,7 @@ export const BorderVisibility = {
       <br />
       <div>Floating Label</div>
       <br />
-      <div class="h-[150px] w-[420px]">
+      <div class="h-[150px] w-full max-w-[400px]">
         ${generateTemplate({
           args: overrideArgs([
             twentyOptionsConstant,
@@ -587,7 +587,7 @@ export const Focus = {
   render: () => html`
     <div>Default</div>
     <br />
-    <div class="h-[260px] w-[400px]">
+    <div class="h-[260px] w-full max-w-[400px]">
       <sd-combobox label="Label">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -597,7 +597,7 @@ export const Focus = {
     <br />
     <div>Floating Label</div>
     <br />
-    <div class="h-[260px] w-[400px]">
+    <div class="h-[260px] w-full max-w-[400px]">
       <sd-combobox label="Label" floating-label>
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -686,7 +686,7 @@ export const Tags = {
   render: () => html`
     <div>Default</div>
     <br />
-    <div class="h-[260px] w-[400px]">
+    <div class="h-[260px] w-full max-w-[400px]">
       <sd-combobox label="Label" multiple value="option-1 option-2">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -696,7 +696,7 @@ export const Tags = {
     <br />
     <div>Floating Label</div>
     <br />
-    <div class="h-[260px] w-[400px]">
+    <div class="h-[260px] w-full max-w-[400px]">
       <sd-combobox label="Label" floating-label multiple value="option-1 option-2">
         <sd-option value="option-1">Option 1</sd-option>
         <sd-option value="option-2">Option 2</sd-option>
@@ -714,7 +714,7 @@ export const SimpleSuggests = {
   render: (args: { 'open-attr'?: string }) => {
     delete args['open-attr'];
     return html`
-      <div class="h-[260px] w-[400px]">
+      <div class="h-[260px] w-full max-w-[400px]">
         <sd-combobox label="Preferred color"> ${createColorOptionsHtml()} </sd-combobox>
       </div>
     `;
@@ -738,7 +738,7 @@ export const NotFoundMessage = {
   render: (args: { 'open-attr'?: string }) => {
     delete args['open-attr'];
     return html`
-      <div class="h-[260px] w-[400px]">
+      <div class="h-[260px] w-full max-w-[400px]">
         <sd-combobox label="Preferred Color"> ${createColorOptionsHtml()} </sd-combobox>
       </div>
     `;
@@ -764,7 +764,7 @@ export const HighlightQuery = {
   render: () => {
     const optionRenderer = highlightOptionRenderer;
     return html`
-      <div class="h-[260px] w-[400px]">
+      <div class="h-[260px] w-full max-w-[400px]">
         <sd-combobox label="Preferred color" class="highlight-combobox"> ${createColorOptionsHtml()} </sd-combobox>
       </div>
       <script type="module">
@@ -809,7 +809,7 @@ export const Mouseless = {
 
     return html` <div>Default</div>
       <br />
-      <div class="mouseless h-[260px] w-full flex gap-4">
+      <div class="mouseless h-[400px] flex flex-wrap gap-4 [&>*]:basis-[calc(33.333%-1rem)] [&>*]:flex-none">
         ${generateTemplate({
           constants: [twoOptionsConstant, { type: 'attribute', name: 'label', value: 'Default' }],
           args
@@ -830,7 +830,7 @@ export const Mouseless = {
       </div>
       <div>Floating Label</div>
       <br />
-      <div class="mouseless h-[260px] w-full flex gap-4">
+      <div class="mouseless h-[400px] flex flex-wrap gap-4 [&>*]:basis-[calc(33.333%-1rem)] [&>*]:flex-none">
         ${generateTemplate({
           constants: [
             twoOptionsConstant,
@@ -877,7 +877,7 @@ export const SampleGroupingOptions = {
   render: (args: any) => {
     return generateTemplate({
       options: {
-        classes: 'w-full'
+        classes: 'w-full max-w-[400px]'
       },
       axis: {
         y: {
@@ -920,7 +920,7 @@ export const SampleForm = {
 
     return html`
       <form action="" method="get" id="testForm" name="testForm" class="w-[370px]">
-        <div class="mb-6">
+        <div class="mb-6 w-full max-w-[400px]">
           ${generateTemplate({
             constants: [
               ...sharedConstants,
@@ -930,7 +930,7 @@ export const SampleForm = {
             args
           })}
         </div>
-        <div class="mb-6">
+        <div class="mb-6 w-full max-w-[400px]">
           ${generateTemplate({
             constants: [
               ...sharedConstants,
@@ -941,7 +941,7 @@ export const SampleForm = {
             args
           })}
         </div>
-        <div class="mb-8">
+        <div class="mb-8 w-full max-w-[400px]">
           ${generateTemplate({
             constants: [
               ...sharedConstants,