From dc0c6401de3f983eb30fab208e2164c2343a7fd8 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 3 Jan 2026 06:31:42 -0800
Subject: [PATCH] fix image column skeleton aspect ratio

---
 .../columns/image-column.module.css           | 21 ++++++++++++-------
 .../item-table-list/columns/image-column.tsx  |  2 ++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/item-list/item-table-list/columns/image-column.module.css b/src/renderer/components/item-list/item-table-list/columns/image-column.module.css
index 850c5aaac..215e72d21 100644
--- a/src/renderer/components/item-list/item-table-list/columns/image-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/columns/image-column.module.css
@@ -4,6 +4,15 @@
     border-radius: 0;
 }
 
+.image-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
 .compact-image-container .skeleton {
     border-radius: 0;
 }
@@ -24,11 +33,9 @@
 }
 
 .image-container-with-aspect-ratio {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
+    width: auto;
     height: 100%;
+    aspect-ratio: 1 / 1;
     border-radius: var(--theme-radius-md);
 }
 
@@ -40,10 +47,10 @@
     object-position: center;
 }
 
-.image-container {
-    position: relative;
-    width: 100%;
+.skeleton-with-aspect-ratio {
+    width: auto;
     height: 100%;
+    aspect-ratio: 1 / 1;
 }
 
 .play-button-overlay {
diff --git a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx b/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
index c0ecf27aa..633509aff 100644
--- a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
@@ -125,6 +125,8 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
             <div
                 className={clsx(styles.imageContainer, {
                     [styles.compactImageContainer]: props.size === 'compact',
+                    [styles.skeletonWithAspectRatio]:
+                        props.size === 'default' || props.size === 'large',
                 })}
             >
                 <Skeleton containerClassName={styles.skeleton} />