@nexxtmove/ui 1.0.10 → 1.0.11

package/dist/index.js

@@ -6123,7 +6123,7 @@ var _s = /* @__PURE__ */ _({
 			_: 1
 		}, 8, ["placement"]));
 	}
-}), Ls = { class: "flex max-w-full items-center justify-start gap-4" }, Rs = {
+}), Ls = { class: "flex max-w-full min-w-0 flex-1 items-center justify-start gap-4" }, Rs = {
 	key: 0,
 	class: "col-span-1 col-start-2 flex justify-center"
 }, zs = /* @__PURE__ */ _({
@@ -6141,7 +6141,7 @@ var _s = /* @__PURE__ */ _({
 		}
 	},
 	setup(e) {
-		return (t, n) => (k(), u("div", { class: T(["header flex items-center", t.$slots.center ? "grid grid-cols-3" : ""]) }, [
+		return (t, n) => (k(), u("div", { class: T(["header flex w-full max-w-full min-w-0 items-center", t.$slots.center ? "grid grid-cols-3" : ""]) }, [
 			d("div", Ls, [M(t.$slots, "back-button", {}, () => [e.backButtonText && e.backButtonAction && !t.$slots["back-button"] ? (k(), c(Nt, {
 				key: 0,
 				class: "shrink-0",
@@ -6150,11 +6150,11 @@ var _s = /* @__PURE__ */ _({
 			}, {
 				default: B(() => [m(F(e.backButtonText), 1)]),
 				_: 1
-			}, 8, ["onClick"])) : l("", !0)]), d("span", { class: T(["block truncate text-sapphire-500", e.headingType]) }, F(e.title), 3)]),
+			}, 8, ["onClick"])) : l("", !0)]), d("span", { class: T(["min-w-0 flex-1 truncate text-sapphire-500", e.headingType]) }, F(e.title), 3)]),
 			t.$slots.center ? (k(), u("div", Rs, [M(t.$slots, "center")])) : l("", !0),
 			t.$slots.right ? (k(), u("div", {
 				key: 1,
-				class: T(t.$slots.center ? "col-span-1 col-start-3 flex justify-end" : "ml-auto")
+				class: T([t.$slots.center ? "col-span-1 col-start-3 flex justify-end" : "ml-auto", "shrink-0"])
 			}, [M(t.$slots, "right")], 2)) : l("", !0)
 		], 2));
 	}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Header/Header.vue

@@ -22,8 +22,11 @@ const {
 </script>
 
 <template>
-  <div class="header flex items-center" :class="$slots.center ? 'grid grid-cols-3' : ''">
-    <div class="flex max-w-full items-center justify-start gap-4">
+  <div
+    class="header flex w-full max-w-full min-w-0 items-center"
+    :class="$slots.center ? 'grid grid-cols-3' : ''"
+  >
+    <div class="flex max-w-full min-w-0 flex-1 items-center justify-start gap-4">
       <slot name="back-button">
         <Button
           v-if="backButtonText && backButtonAction && !$slots['back-button']"
@@ -34,7 +37,7 @@ const {
           {{ backButtonText }}
         </Button>
       </slot>
-      <span class="block truncate text-sapphire-500" :class="headingType">
+      <span class="min-w-0 flex-1 truncate text-sapphire-500" :class="headingType">
         {{ title }}
       </span>
     </div>
@@ -44,6 +47,7 @@ const {
     <div
       v-if="$slots.right"
       :class="$slots.center ? 'col-span-1 col-start-3 flex justify-end' : 'ml-auto'"
+      class="shrink-0"
     >
       <slot name="right" />
     </div>