codexly-ui 0.10.20 → 0.10.21

package/fesm2022/codexly-ui.mjs

@@ -3898,7 +3898,7 @@ class ClxSelectComponent {
     }, ...(ngDevMode ? [{ debugName: "_singleDisplayClass" }] : /* istanbul ignore next */ []));
     _tagContainerClass = computed(() => {
         const s = this._sizeConfig();
-        return `flex flex-wrap flex-1 items-center ${s.py} pl-3 pr-10 ${s.gap}`;
+        return `flex flex-wrap flex-1 items-center min-w-0 ${s.py} pl-3 ${s.gap}`;
     }, ...(ngDevMode ? [{ debugName: "_tagContainerClass" }] : /* istanbul ignore next */ []));
     _placeholderClass = computed(() => `${this._sizeConfig().text} ${CLX_TEXT_IDLE}`, ...(ngDevMode ? [{ debugName: "_placeholderClass" }] : /* istanbul ignore next */ []));
     _chevronBtnClass = computed(() => this._isOpen() ? 'transition-transform duration-200 rotate-180' : 'transition-transform duration-200', ...(ngDevMode ? [{ debugName: "_chevronBtnClass" }] : /* istanbul ignore next */ []));
@@ -4059,8 +4059,10 @@ class ClxSelectComponent {
         <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+      <!-- Right controls: clear + chevron — in normal flow (not absolute) so they never overlap
+           wrapped tag chips in multi mode; reserving fixed pr-* space instead couldn't account
+           for however many rows the chips wrap into. -->
+      <div class="shrink-0 flex items-center gap-0.5 pr-2">
         @if (_hasValue() && !_disabled() && multiple()) {
           <button
             clx-button
@@ -4208,8 +4210,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+      <!-- Right controls: clear + chevron — in normal flow (not absolute) so they never overlap
+           wrapped tag chips in multi mode; reserving fixed pr-* space instead couldn't account
+           for however many rows the chips wrap into. -->
+      <div class="shrink-0 flex items-center gap-0.5 pr-2">
         @if (_hasValue() && !_disabled() && multiple()) {
           <button
             clx-button