💄 Change Skeleton width and height to max to improve responsiveness

Author: Frontendland

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};`
 ])

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};`
     ])

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