From 3345fadad465f7910641fc8b9a545a9d9461c581 Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Wed, 18 Mar 2026 15:12:14 +0000
Subject: [PATCH 01/12] fix: combobox story in mobile

---
 packages/components/src/components/combobox/combobox.ts  | 2 +-
 packages/docs/src/stories/components/combobox.stories.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts
index 7aec2df86e..c4b71d26d6 100644
--- a/packages/components/src/components/combobox/combobox.ts
+++ b/packages/components/src/components/combobox/combobox.ts
@@ -1319,7 +1319,7 @@ 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.disabled && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
                 this.open && 'shadow transition-shadow duration-medium ease-in-out',
                 ['invalid', 'activeInvalid'].includes(selectState) && 'form-control--invalid-color-background',
                 {
diff --git a/packages/docs/src/stories/components/combobox.stories.ts b/packages/docs/src/stories/components/combobox.stories.ts
index 9e95cdb139..f02a58b478 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>`;
   }
 };
 

From 8bdeaeccef48aa41aa220f12a48eb38b38a6b881 Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Thu, 19 Mar 2026 11:43:37 +0000
Subject: [PATCH 02/12] fix: grey background when selected in mobile

---
 packages/components/src/components/combobox/combobox.ts | 4 +++-
 packages/components/src/components/input/input.ts       | 4 +++-
 packages/components/src/components/select/select.ts     | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts
index c4b71d26d6..b20ce3397f 100644
--- a/packages/components/src/components/combobox/combobox.ts
+++ b/packages/components/src/components/combobox/combobox.ts
@@ -1319,7 +1319,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.disabled && !this.visuallyDisabled ? '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',
                 {
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"

From b17ad557a7228ac35d30770dad034118851331ef Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Thu, 19 Mar 2026 11:50:16 +0000
Subject: [PATCH 03/12] fix: fixed grey background for the remaining form
 components

---
 packages/components/src/components/datepicker/datepicker.ts | 4 +++-
 packages/components/src/components/textarea/textarea.ts     | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/datepicker/datepicker.ts b/packages/components/src/components/datepicker/datepicker.ts
index 74861a3a94..5a25fba835 100644
--- a/packages/components/src/components/datepicker/datepicker.ts
+++ b/packages/components/src/components/datepicker/datepicker.ts
@@ -2024,7 +2024,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/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'

From 4e28ba9fa36d5471f26229b79624b6d18e1537e4 Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Thu, 19 Mar 2026 11:51:42 +0000
Subject: [PATCH 04/12] chore: adding changeset

---
 .changeset/quiet-bugs-trade.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/quiet-bugs-trade.md

diff --git a/.changeset/quiet-bugs-trade.md b/.changeset/quiet-bugs-trade.md
new file mode 100644
index 0000000000..cebe6fe3c6
--- /dev/null
+++ b/.changeset/quiet-bugs-trade.md
@@ -0,0 +1,7 @@
+---
+'@solid-design-system/components': minor
+'@solid-design-system/docs': minor
+---
+
+- 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

From 8d8e322e6677f7533401ff94ee5897b92a34906e Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Thu, 19 Mar 2026 13:22:44 +0000
Subject: [PATCH 05/12] fix: fixing all the other stories

---
 .../stories/components/combobox.stories.ts    | 154 ++++++++++--------
 1 file changed, 90 insertions(+), 64 deletions(-)

diff --git a/packages/docs/src/stories/components/combobox.stories.ts b/packages/docs/src/stories/components/combobox.stories.ts
index f02a58b478..91fb483f94 100644
--- a/packages/docs/src/stories/components/combobox.stories.ts
+++ b/packages/docs/src/stories/components/combobox.stories.ts
@@ -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-[400px] md: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">

From 42735e3823c07c6ca663c8366d9aac3ac572fd34 Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Thu, 19 Mar 2026 15:44:55 +0000
Subject: [PATCH 06/12] fix: fixing sd-combox with multiple tags responsiveness

---
 .../src/components/combobox/combobox.ts       | 112 ++++++++++--------
 .../stories/components/combobox.stories.ts    |   2 +-
 2 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts
index b20ce3397f..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="
@@ -1342,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/docs/src/stories/components/combobox.stories.ts b/packages/docs/src/stories/components/combobox.stories.ts
index 91fb483f94..8a62cde26e 100644
--- a/packages/docs/src/stories/components/combobox.stories.ts
+++ b/packages/docs/src/stories/components/combobox.stories.ts
@@ -421,7 +421,7 @@ export const Search = {
 
 export const Multiple = {
   render: () => html`
-    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px] md:max-w-[700px]">
+    <div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[700px]">
       <sd-combobox
         size="lg"
         label="Funds name"

From 6abbde74a3b6c9473947a5fdf074478214639cf9 Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Thu, 19 Mar 2026 15:47:06 +0000
Subject: [PATCH 07/12] chore: adding more to changeset

---
 .changeset/wet-glasses-agree.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/wet-glasses-agree.md

diff --git a/.changeset/wet-glasses-agree.md b/.changeset/wet-glasses-agree.md
new file mode 100644
index 0000000000..9c5433cc3e
--- /dev/null
+++ b/.changeset/wet-glasses-agree.md
@@ -0,0 +1,8 @@
+---
+'@solid-design-system/components': minor
+'@solid-design-system/docs': minor
+---
+
+- Fixed the mobile view responsiveness or `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

From 80aadde3baf63899719c9a205e59361351f47546 Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Thu, 19 Mar 2026 15:47:45 +0000
Subject: [PATCH 08/12] fix: typo in changeset

---
 .changeset/wet-glasses-agree.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/wet-glasses-agree.md b/.changeset/wet-glasses-agree.md
index 9c5433cc3e..59f5e09527 100644
--- a/.changeset/wet-glasses-agree.md
+++ b/.changeset/wet-glasses-agree.md
@@ -3,6 +3,6 @@
 '@solid-design-system/docs': minor
 ---
 
-- Fixed the mobile view responsiveness or `sd-combobox` when using multiple tags.
+- 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

From bf5c9a63098bb934becf5d684ddd6a8d20004713 Mon Sep 17 00:00:00 2001
From: Marta Correia <48736172+martascorreia@users.noreply.github.com>
Date: Thu, 19 Mar 2026 15:49:38 +0000
Subject: [PATCH 09/12] delete .changeset/quiet-bugs-trade.md

---
 .changeset/quiet-bugs-trade.md | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 .changeset/quiet-bugs-trade.md

diff --git a/.changeset/quiet-bugs-trade.md b/.changeset/quiet-bugs-trade.md
deleted file mode 100644
index cebe6fe3c6..0000000000
--- a/.changeset/quiet-bugs-trade.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@solid-design-system/components': minor
-'@solid-design-system/docs': minor
----
-
-- 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

From 5e7eee70d1adf78b237eff319d295f132994d096 Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Tue, 24 Mar 2026 14:55:27 +0000
Subject: [PATCH 10/12] chore: fixing changeset

---
 .changeset/silent-views-roll.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/silent-views-roll.md

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

From b67e6a2c37f64d4b65a983bdb2aef861684988fd Mon Sep 17 00:00:00 2001
From: Marta Correia <48736172+martascorreia@users.noreply.github.com>
Date: Tue, 24 Mar 2026 14:56:17 +0000
Subject: [PATCH 11/12] delete old .changeset/wet-glasses-agree.md

---
 .changeset/wet-glasses-agree.md | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 .changeset/wet-glasses-agree.md

diff --git a/.changeset/wet-glasses-agree.md b/.changeset/wet-glasses-agree.md
deleted file mode 100644
index 59f5e09527..0000000000
--- a/.changeset/wet-glasses-agree.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-'@solid-design-system/components': minor
-'@solid-design-system/docs': minor
----
-
-- 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

From d80ba1770d3568aba15ab61725d7f31c1151a2bc Mon Sep 17 00:00:00 2001
From: martascorreia <marta.correia@virtual-identity.com>
Date: Wed, 25 Mar 2026 16:19:00 +0000
Subject: [PATCH 12/12] fix: screenshot testes partially fixed

---
 .../components/combobox.test.stories.ts       | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

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,