From 000dafb61ca9198caa908bf9d058911b46bd1a37 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Mon, 12 Dec 2022 17:00:46 +0100
Subject: [PATCH] fix image aspect ratio

---
 src/lib/components/anilistItems.svelte | 5 ++++-
 src/lib/components/item.svelte         | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/anilistItems.svelte b/src/lib/components/anilistItems.svelte
index e342705..122e900 100644
--- a/src/lib/components/anilistItems.svelte
+++ b/src/lib/components/anilistItems.svelte
@@ -66,7 +66,7 @@
     {#each lists as list}
         <h2>{list.name}</h2>
         {#each list.entries.sort((a, b) => a.priority - b.priority) as entry (entry.media.id)}
-            <div animate:flip transition:blur>
+            <div class="h-full" animate:flip transition:blur>
                 <Item
                     r18={entry.media.isAdult}
                     cover={entry.media.coverImage.large}
@@ -107,4 +107,7 @@
 	.items.list {
 		grid-template-columns: 1fr;
 	}
+    .h-full {
+        height: 100%;
+    }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/item.svelte b/src/lib/components/item.svelte
index ae0a2e1..c59a8a0 100644
--- a/src/lib/components/item.svelte
+++ b/src/lib/components/item.svelte
@@ -74,7 +74,7 @@
         text-overflow: ellipsis;
     }
     .item.grid {
-        width: 100%;
+        height: 100%;
     }
     h3 {
         margin: 0;
@@ -98,6 +98,7 @@
     .flex {
         display: flex;
         gap: 1rem;
+        height: 100%;
     }
     .cover-container {
         position: relative;
@@ -147,6 +148,10 @@
         --box-shadow-color: white;
 		border-radius: 5px;
         max-width: 100%;
+        max-height: 100%;
+        height: 100%;
+        width: auto;
+        object-fit: cover;
 		box-shadow: 0 0 0 var(--box-shadow-color);
 		transition: .4s box-shadow, .3s max-height, .4s filter;
 	}