set width to all images by using the inbuilt attribute, skeleton profile pictures are closer to their actual size

Author: StackOverflowIsBetterThanAnyAI

src/components/UI/Icon.tsx

@@ -68,8 +68,9 @@ const Icon: FC<IconProps> = ({ code, language, type }) => {
         <img
             src={`https://flagcdn.com/w40/${code}.png`}
             alt={language}
-            className="mx-2 w-8"
-        ></img>
+            className="mx-2"
+            width={32}
+        />
     )
     const search = (
         <svg

src/components/UI/navigation/HomeIcon.tsx

@@ -31,6 +31,7 @@ export const HomeIcon = () => {
                 alt="Twitch-App Homepage"
                 loading="lazy"
                 className="rounded-md"
+                width={48}
             />
             {(contextScreenWidth === 'TABLET' ||
                 contextScreenWidth === 'DESKTOP') && (

src/components/skeleton/SkeletonProfilePicture.tsx

@@ -2,7 +2,7 @@ const SkeletonProfilePicture = () => {
     return (
         <div
             className="rounded-full p-1 col-span-1 mx-auto animate-pulse bg-zinc-50"
-            style={{ width: 'min(48px, 80%)', aspectRatio: '1/1' }}
+            style={{ width: 'max(36px, 80%)', aspectRatio: '1/1' }}
         ></div>
     )
 }

src/components/streamFeed/StreamThumbnail.tsx

@@ -35,7 +35,8 @@ const StreamThumbnail: FC<StreamThumbnailProps> = ({
                         'THUMBNAIL'
                     )}
                     alt={`${user_name} Livestream`}
-                    className="rounded-xl w-full"
+                    className="rounded-xl"
+                    width="100%"
                     loading="lazy"
                     title={
                         stream_game
@@ -54,7 +55,8 @@ const StreamThumbnail: FC<StreamThumbnailProps> = ({
                         'THUMBNAIL'
                     )}
                     alt={`loading ${user_name}`}
-                    className="rounded-xl w-full"
+                    className="rounded-xl"
+                    width="100%"
                     loading="lazy"
                     onLoad={() => setLoaded(true)}
                     data-testid={testid}