From b0b5446035cabd185c482833f37bbd5ade1b23dc Mon Sep 17 00:00:00 2001
From: Ember <a.arac@student.maastrichtuniversity.nl>
Date: Mon, 25 May 2026 10:56:05 +0200
Subject: [PATCH] Fixed non-square album art pushing adjacent albums out of
 alignment in the Album view. Addressing issue #108.

---
 flo/AlbumsView.swift | 53 +++++++++++++++-----------------------------
 1 file changed, 18 insertions(+), 35 deletions(-)

diff --git a/flo/AlbumsView.swift b/flo/AlbumsView.swift
index ba2f4e0..85576b3 100644
--- a/flo/AlbumsView.swift
+++ b/flo/AlbumsView.swift
@@ -22,54 +22,24 @@ struct AlbumsView: View {
             contentsOfFile: viewModel.getAlbumCoverArt(
               id: album.id, artistName: album.artist, albumName: album.name, albumCover: album.albumCover))
           {
-            Image(uiImage: image)
-              .resizable()
-              .aspectRatio(contentMode: .fill)
-              .frame(maxWidth: .infinity, maxHeight: 300)
-              .clipShape(
-                RoundedRectangle(cornerRadius: 5, style: .continuous)
-              )
+            albumArtwork(Image(uiImage: image))
           } else {
             if let image = UIImage(named: "placeholder") {
-              Image(uiImage: image)
-                .resizable()
-                .aspectRatio(contentMode: .fill)
-                .frame(maxWidth: .infinity, maxHeight: 300)
-                .clipShape(
-                  RoundedRectangle(cornerRadius: 5, style: .continuous)
-                )
+              albumArtwork(Image(uiImage: image))
             }
           }
         } else {
           if let image = UIImage(
             contentsOfFile: viewModel.getAlbumCoverArt(id: album.id, albumCover: album.albumCover))
           {
-            Image(uiImage: image)
-              .resizable()
-              .aspectRatio(contentMode: .fill)
-              .frame(maxWidth: .infinity, maxHeight: 300)
-              .clipShape(
-                RoundedRectangle(cornerRadius: 5, style: .continuous)
-              )
+            albumArtwork(Image(uiImage: image))
           } else {
             LazyImage(url: URL(string: viewModel.getAlbumCoverArt(id: album.id, albumCover: album.albumCover))) { state in
               if let image = state.image {
-                image
-                  .resizable()
-                  .aspectRatio(contentMode: .fill)
-                  .frame(maxWidth: .infinity, maxHeight: 300)
-                  .clipShape(
-                    RoundedRectangle(cornerRadius: 5, style: .continuous)
-                  )
+                albumArtwork(image)
               } else {
                 if let image = UIImage(named: "placeholder") {
-                  Image(uiImage: image)
-                    .resizable()
-                    .aspectRatio(contentMode: .fill)
-                    .frame(maxWidth: .infinity, maxHeight: 300)
-                    .clipShape(
-                      RoundedRectangle(cornerRadius: 5, style: .continuous)
-                    )
+                  albumArtwork(Image(uiImage: image))
                 }
               }
             }
@@ -96,6 +66,19 @@ struct AlbumsView: View {
       }.padding()
     }
   }
+
+  private func albumArtwork(_ image: Image) -> some View {
+    GeometryReader { proxy in
+      image
+        .resizable()
+        .scaledToFill()
+        .frame(width: proxy.size.width, height: proxy.size.width)
+        .clipShape(
+          RoundedRectangle(cornerRadius: 5, style: .continuous)
+        )
+    }
+    .aspectRatio(1, contentMode: .fit)
+  }
 }
 
 struct AlbumsView_Preview: PreviewProvider {