From 360f33e9405cfa08f75dfb3733c1507be51ac626 Mon Sep 17 00:00:00 2001
From: Alexandru Cambose <alexcambose@yahoo.com>
Date: Fri, 26 Sep 2025 18:52:27 +0100
Subject: [PATCH 1/5] fix: skeleton fill

---
 .../src/Skeleton/index.module.scss                  |  8 ++++----
 .../src/Skeleton/index.stories.tsx                  | 13 ++++++++++++-
 packages/component-library/src/Skeleton/index.tsx   |  8 +-------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/component-library/src/Skeleton/index.module.scss b/packages/component-library/src/Skeleton/index.module.scss
index 151bac6fe2..2c8c9b044b 100644
--- a/packages/component-library/src/Skeleton/index.module.scss
+++ b/packages/component-library/src/Skeleton/index.module.scss
@@ -11,13 +11,13 @@
   }
 }
 
-.fullSkeleton {
-  display: inline-block;
-}
-
 .skeleton {
   border-radius: theme.border-radius("lg");
 
+  .fullSkeleton {
+    width: 100%;
+  }
+
   .skeletonInner {
     display: inline flow-root;
     width: calc(theme.spacing(1) * var(--skeleton-width));
diff --git a/packages/component-library/src/Skeleton/index.stories.tsx b/packages/component-library/src/Skeleton/index.stories.tsx
index 3db5fddce7..58668d52e8 100644
--- a/packages/component-library/src/Skeleton/index.stories.tsx
+++ b/packages/component-library/src/Skeleton/index.stories.tsx
@@ -31,6 +31,17 @@ export const Skeleton = {
   args: {
     label: "Loading",
     width: 20,
-    fill: false,
   },
 } satisfies StoryObj<typeof SkeletonComponent>;
+
+export const SkeletonFill: StoryObj<typeof SkeletonComponent> = {
+  render: (args) => (
+    <div style={{ width: "100vw" }}>
+      <SkeletonComponent {...args} />
+    </div>
+  ),
+  args: {
+    label: "Loading",
+    fill: true,
+  },
+};
diff --git a/packages/component-library/src/Skeleton/index.tsx b/packages/component-library/src/Skeleton/index.tsx
index d6506c6712..e146d0f363 100644
--- a/packages/component-library/src/Skeleton/index.tsx
+++ b/packages/component-library/src/Skeleton/index.tsx
@@ -12,21 +12,15 @@ type Props = Omit<ComponentProps<"span">, "children"> & {
 };
 
 export const Skeleton = ({ className, label, width, fill, ...props }: Props) =>
-  fill ? (
-    <span className={clsx(styles.fullSkeleton, className)} {...props}>
-      <Label>{label ?? "Loading"}</Label>
-    </span>
-  ) : (
     <span
       data-fill-width={width === undefined ? "" : undefined}
       {...(width && { style: { "--skeleton-width": width } as CSSProperties })}
-      className={clsx(styles.skeleton, { [className ?? ""]: fill })}
+      className={clsx(styles.skeleton, { [styles.fullSkeleton ?? '']: fill }, { [className ?? ""]: fill })}
     >
       <span className={clsx(styles.skeletonInner, className)} {...props}>
         <Label>{label ?? "Loading"}</Label>
       </span>
     </span>
-  );
 
 const Label = ({ children }: { children: string | undefined }) => (
   <span className={styles.skeletonLabel}>{children ?? "Loading"}</span>

From 786c54315f33f00a29bd4f1849871a52631bdb5f Mon Sep 17 00:00:00 2001
From: Alexandru Cambose <alexcambose@yahoo.com>
Date: Fri, 26 Sep 2025 18:59:23 +0100
Subject: [PATCH 2/5] fix: formatting

---
 .../component-library/src/Skeleton/index.tsx  | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/component-library/src/Skeleton/index.tsx b/packages/component-library/src/Skeleton/index.tsx
index e146d0f363..6d120b68b5 100644
--- a/packages/component-library/src/Skeleton/index.tsx
+++ b/packages/component-library/src/Skeleton/index.tsx
@@ -11,16 +11,27 @@ type Props = Omit<ComponentProps<"span">, "children"> & {
   fill?: boolean | undefined;
 };
 
-export const Skeleton = ({ className, label, width, fill, ...props }: Props) =>
-    <span
-      data-fill-width={width === undefined ? "" : undefined}
-      {...(width && { style: { "--skeleton-width": width } as CSSProperties })}
-      className={clsx(styles.skeleton, { [styles.fullSkeleton ?? '']: fill }, { [className ?? ""]: fill })}
-    >
-      <span className={clsx(styles.skeletonInner, className)} {...props}>
-        <Label>{label ?? "Loading"}</Label>
-      </span>
+export const Skeleton = ({
+  className,
+  label,
+  width,
+  fill,
+  ...props
+}: Props) => (
+  <span
+    data-fill-width={width === undefined ? "" : undefined}
+    {...(width && { style: { "--skeleton-width": width } as CSSProperties })}
+    className={clsx(
+      styles.skeleton,
+      { [styles.fullSkeleton ?? ""]: fill },
+      { [className ?? ""]: fill },
+    )}
+  >
+    <span className={clsx(styles.skeletonInner, className)} {...props}>
+      <Label>{label ?? "Loading"}</Label>
     </span>
+  </span>
+);
 
 const Label = ({ children }: { children: string | undefined }) => (
   <span className={styles.skeletonLabel}>{children ?? "Loading"}</span>

From bbc4c4e2f6d08398f4626ab10c385c984176c5ff Mon Sep 17 00:00:00 2001
From: Alexandru Cambose <alexcambose@yahoo.com>
Date: Fri, 26 Sep 2025 19:27:48 +0100
Subject: [PATCH 3/5] fix

---
 .../src/Skeleton/index.module.scss                 |  2 +-
 .../src/Skeleton/index.stories.tsx                 | 14 ++++----------
 packages/component-library/src/Skeleton/index.tsx  |  3 ++-
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/component-library/src/Skeleton/index.module.scss b/packages/component-library/src/Skeleton/index.module.scss
index 2c8c9b044b..4b2d2265b9 100644
--- a/packages/component-library/src/Skeleton/index.module.scss
+++ b/packages/component-library/src/Skeleton/index.module.scss
@@ -14,7 +14,7 @@
 .skeleton {
   border-radius: theme.border-radius("lg");
 
-  .fullSkeleton {
+  &.fullSkeleton {
     width: 100%;
   }
 
diff --git a/packages/component-library/src/Skeleton/index.stories.tsx b/packages/component-library/src/Skeleton/index.stories.tsx
index 58668d52e8..f796fedb5a 100644
--- a/packages/component-library/src/Skeleton/index.stories.tsx
+++ b/packages/component-library/src/Skeleton/index.stories.tsx
@@ -28,20 +28,14 @@ const meta = {
 export default meta;
 
 export const Skeleton = {
-  args: {
-    label: "Loading",
-    width: 20,
-  },
-} satisfies StoryObj<typeof SkeletonComponent>;
-
-export const SkeletonFill: StoryObj<typeof SkeletonComponent> = {
   render: (args) => (
-    <div style={{ width: "100vw" }}>
+    <div style={{ width: "100vw", display: "flex", justifyContent: "center" }}>
       <SkeletonComponent {...args} />
     </div>
   ),
   args: {
     label: "Loading",
-    fill: true,
+    fill: false,
+    width: 20,
   },
-};
+} satisfies StoryObj<typeof SkeletonComponent>;
diff --git a/packages/component-library/src/Skeleton/index.tsx b/packages/component-library/src/Skeleton/index.tsx
index 6d120b68b5..edcc130e28 100644
--- a/packages/component-library/src/Skeleton/index.tsx
+++ b/packages/component-library/src/Skeleton/index.tsx
@@ -20,7 +20,8 @@ export const Skeleton = ({
 }: Props) => (
   <span
     data-fill-width={width === undefined ? "" : undefined}
-    {...(width && { style: { "--skeleton-width": width } as CSSProperties })}
+    {...(width &&
+      !fill && { style: { "--skeleton-width": width } as CSSProperties })}
     className={clsx(
       styles.skeleton,
       { [styles.fullSkeleton ?? ""]: fill },

From 9faafbd644d5ce8a651b8c4c6bf80c2e61995ce3 Mon Sep 17 00:00:00 2001
From: Alexandru Cambose <alexcambose@yahoo.com>
Date: Mon, 29 Sep 2025 10:24:45 +0100
Subject: [PATCH 4/5] fix

---
 packages/component-library/src/Skeleton/index.module.scss | 2 +-
 packages/component-library/src/Skeleton/index.tsx         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/component-library/src/Skeleton/index.module.scss b/packages/component-library/src/Skeleton/index.module.scss
index 4b2d2265b9..27cbe576ef 100644
--- a/packages/component-library/src/Skeleton/index.module.scss
+++ b/packages/component-library/src/Skeleton/index.module.scss
@@ -14,7 +14,7 @@
 .skeleton {
   border-radius: theme.border-radius("lg");
 
-  &.fullSkeleton {
+  &[data-fill] {
     width: 100%;
   }
 
diff --git a/packages/component-library/src/Skeleton/index.tsx b/packages/component-library/src/Skeleton/index.tsx
index edcc130e28..06ad2ae0c8 100644
--- a/packages/component-library/src/Skeleton/index.tsx
+++ b/packages/component-library/src/Skeleton/index.tsx
@@ -22,10 +22,10 @@ export const Skeleton = ({
     data-fill-width={width === undefined ? "" : undefined}
     {...(width &&
       !fill && { style: { "--skeleton-width": width } as CSSProperties })}
+    data-fill={fill ? "" : undefined}
     className={clsx(
       styles.skeleton,
-      { [styles.fullSkeleton ?? ""]: fill },
-      { [className ?? ""]: fill },
+      className,
     )}
   >
     <span className={clsx(styles.skeletonInner, className)} {...props}>

From bf22b39581a454c0006d8aa9bc97a0abe22d7c99 Mon Sep 17 00:00:00 2001
From: Alexandru Cambose <alexcambose@yahoo.com>
Date: Mon, 29 Sep 2025 10:49:23 +0100
Subject: [PATCH 5/5] fix

---
 packages/component-library/src/Skeleton/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/component-library/src/Skeleton/index.tsx b/packages/component-library/src/Skeleton/index.tsx
index 06ad2ae0c8..08e6055c1a 100644
--- a/packages/component-library/src/Skeleton/index.tsx
+++ b/packages/component-library/src/Skeleton/index.tsx
@@ -23,10 +23,7 @@ export const Skeleton = ({
     {...(width &&
       !fill && { style: { "--skeleton-width": width } as CSSProperties })}
     data-fill={fill ? "" : undefined}
-    className={clsx(
-      styles.skeleton,
-      className,
-    )}
+    className={clsx(styles.skeleton, className)}
   >
     <span className={clsx(styles.skeletonInner, className)} {...props}>
       <Label>{label ?? "Loading"}</Label>