💄 Change Skeleton width and height to max to improve responsiveness

Frontendland · Nov 17, 2024 · 59ea089 · 59ea089
1 parent 8e94c6b
commit 59ea089
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/components/Skeleton/Skeleton.astro b/src/components/Skeleton/Skeleton.astro
@@ -25,8 +25,8 @@ const classes = [
 ]
 
 const styleVariables = classNames([
-    width && `width: ${width}px;`,
-    height && `height: ${height}px;`,
+    width && `max-width: ${width}px;`,
+    height && `max-height: ${height}px;`,
     color && `--w-skeleton-color: ${color};`,
     waveColor && `--w-skeleton-wave-color: ${waveColor};`
 ])

diff --git a/src/components/Skeleton/Skeleton.svelte b/src/components/Skeleton/Skeleton.svelte
@@ -21,8 +21,8 @@
     ])
 
     const styleVariables = classNames([
-        width && `width: ${width}px;`,
-        height && `height: ${height}px;`,
+        width && `max-width: ${width}px;`,
+        height && `max-height: ${height}px;`,
         color && `--w-skeleton-color: ${color};`,
         waveColor && `--w-skeleton-wave-color: ${waveColor};`
     ])

diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
@@ -22,8 +22,8 @@ const Skeleton = ({
     ])
 
     const styleVariables = {
-        ...(width && { width: `${width}px` }),
-        ...(height && { height: `${height}px` }),
+        ...(width && { maxWidth: `${width}px` }),
+        ...(height && { maxHeight: `${height}px` }),
         ...(color && { '--w-skeleton-color': color }),
         ...(waveColor && { '--w-skeleton-wave-color': waveColor })
     } as React.CSSProperties