fix: sd-select dropdown resizing (#2749)

## Description:
Closes:
https://github.com/orgs/solid-design-system/projects/1/views/68?pane=issue&itemId=145154220&issue=solid-design-system%7Csolid%7C2660

Previously this PR:
#2666

Fixed the issue with the sd-select not resizing properly. The option
drop down was also changed to wrap the words to the next line. The tags
when inside the sd-select are also now handled and three points are
added when the word is too big. Example:

<img width="252" height="563" alt="image"
src="https://github.com/user-attachments/assets/2211bf7a-b424-4aa2-abc3-f3221907a3ba"
/>


## Definition of Reviewable:
- [X] relevant tickets are linked

---------

Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com>

Author: martascorreia

.changeset/crisp-groups-obey.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/components': minor
+---
+
+Fixed the resizing of the `sd-select`, including the way the `sd-option` and `sd-tag` resize inside this component

packages/components/src/components/option/option.ts

@@ -137,8 +137,9 @@ export default class SdOption extends SolidElement {
     return html`
       <div
         part="base"
+        style="word-break: break-word;"
         class=${cx(
-          'px-4 flex items-center w-full transition-colors duration-fast ease-in-out text-left text-base relative',
+          'px-4 flex items-start w-full transition-colors duration-fast ease-in-out text-left text-base relative',
           {
             sm: 'text-sm py-1',
             md: 'text-base py-2',
@@ -166,6 +167,11 @@ export default class SdOption extends SolidElement {
               part="control ${this.selected ? ' control--checked' : 'control--unchecked'}"
               class=${cx(
                 'relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2',
+                {
+                  sm: 'mt-0.5',
+                  md: 'mt-1',
+                  lg: 'mt-1'
+                }[this.size],
                 this.disabled
                   ? 'sd-option--disabled-color-border'
                   : this.selected

packages/components/src/components/select/select.ts

@@ -207,7 +207,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
   @property() getTag: (option: SdOption, index: number) => TemplateResult | string | HTMLElement = option => {
     return html`
       <sd-tag
-        class="relative z-10"
+        class="relative z-10 min-w-0 max-w-full"
         ?disabled=${this.disabled}
         part="tag"
         exportparts="
@@ -693,7 +693,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
         if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
           const tag = this.getTag(option, index);
           // Wrap so we can handle the remove
-          return html` <div @sd-remove=${(e: CustomEvent) => this.handleTagRemove(e, option)}>
+          return html` <div @sd-remove=${(e: CustomEvent) => this.handleTagRemove(e, option)} class="max-w-full">
             ${typeof tag === 'string' ? unsafeHTML(tag) : tag}
           </div>`;
         }
@@ -703,7 +703,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
       return [
         html`
           <sd-tag
-            class="z-10"
+            class="z-10 min-w-0 max-w-full"
             ?disabled=${this.disabled}
             part="tag"
             exportparts="
@@ -1047,7 +1047,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
             >
               <div
                 class=${cx(
-                  'input-container items-center w-full h-full px-4 flex',
+                  'input-container items-center w-full h-full px-4 flex min-w-0',
                   {
                     sm: 'py-1',
                     md: 'py-1',
@@ -1061,7 +1061,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
                   form=${this.form}
                   part="display-input"
                   class=${cx(
-                    'top-0 left-0 appearance-none outline-none flex-grow bg-transparent flex-1 placeholder:text-neutral-700',
+                    'top-0 left-0 appearance-none outline-none flex-grow bg-transparent flex-1 placeholder:text-neutral-700 min-w-0',
                     cursorStyles,
                     this.multiple && this.useTags && this.value.length > 0 ? 'hidden' : '',
                     this.size === 'sm'
@@ -1094,10 +1094,10 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
                   tabindex="-1"
                 />
 
-                ${this.multiple && this.useTags
+                ${this.multiple && this.useTags && this.tags && this.tags.length > 0
                   ? html` <div
                       part="tags"
-                      class=${cx('flex-grow flex flex-wrap items-center gap-1', this.floatingLabel && 'pt-6')}
+                      class=${cx('flex-grow flex flex-wrap items-center gap-1 min-w-0', this.floatingLabel && 'pt-6')}
                     >
                       ${this.tags}
                     </div>`
@@ -1126,7 +1126,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
                         class=${cx(
                           'select__clear flex justify-center',
                           iconMarginLeft,
-                          this.value.length > 0 ? 'visible' : 'invisible'
+                          this.value.length > 0 ? 'visible' : 'hidden'
                         )}
                         type="button"
                         aria-label=${this.localize.term('clearEntry')}

packages/components/src/components/tag/tag.ts

@@ -143,7 +143,7 @@ export default class SdTag extends SolidElement {
         @focus=${this.handleFocus}
         class=${cx(
           /* basic styles of the wrapper */
-          'inline-flex border box-border sd-tag-border-radius items-center leading-none whitespace-nowrap transition-colors duration-fast ease-in-out focus-visible:focus-outline',
+          'flex border box-border sd-tag-border-radius items-center leading-none whitespace-nowrap transition-colors duration-fast ease-in-out focus-visible:focus-outline',
           {
             /* sizes, fonts */
             lg: 'h-8 sd-tag-font-weight sd-tag--size-lg-font-size gap-2',

packages/docs/src/stories/components/select.test.stories.ts

@@ -209,7 +209,7 @@ export const ValidInvalid = {
     return html`<form class="h-[260px] w-full flex gap-4">
         ${generateTemplate({
           options: {
-            classes: 'w-full [&>tbody>tr>td]:align-top'
+            classes: 'w-full [&>tbody>tr>td]:align-top [&>tbody>tr>td]:w-[50%]'
           },
           axis: {
             y: {