fix

Author: alexcambose

packages/component-library/src/Skeleton/index.module.scss

@@ -14,7 +14,7 @@
 .skeleton {
   border-radius: theme.border-radius("lg");
 
-  .fullSkeleton {
+  &.fullSkeleton {
     width: 100%;
   }
 

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>;

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 },