From 160d6471ce68e5dcc70d712ca103594da935de61 Mon Sep 17 00:00:00 2001
From: hkJerryLeung <hkjerryleung@gmail.com>
Date: Wed, 15 Jul 2026 08:10:15 +0800
Subject: [PATCH] fix(web): preserve player metadata width

---
 web/src/pages/Player/Player.jsx  |  2 +-
 web/src/pages/Player/Player.scss | 20 ++++++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/Player/Player.jsx b/web/src/pages/Player/Player.jsx
index de2cc48b6..2ee3c0324 100644
--- a/web/src/pages/Player/Player.jsx
+++ b/web/src/pages/Player/Player.jsx
@@ -98,7 +98,7 @@ const Player = () => {
                         </Chip>
                     </div>
                 </Grid>
-                <Grid item xs={2} sm={4} md={4} style={{maxWidth: "22rem"}}>
+                <Grid item xs={2} sm={4} md={4} className="player-metadata-container">
                     <Box
                         className="album-art-container"
                         sx={{
diff --git a/web/src/pages/Player/Player.scss b/web/src/pages/Player/Player.scss
index 161237686..6060ef21d 100644
--- a/web/src/pages/Player/Player.scss
+++ b/web/src/pages/Player/Player.scss
@@ -26,15 +26,23 @@
   padding-right: 2.5vw;
 }
 
+.player-metadata-container {
+  width: 22rem;
+}
+
 .player-album-art {
   align-self: center;
-  max-height: 22rem;
+  min-width: 22rem;
+  min-height: 22rem;
+  max-width: 352px;
+  max-height: 352px;
+  object-fit: contain;
   border-radius: 2.5%;
-  @media (general.$is-portrait) {
-    max-width: 85vw;
-  }
-  @media (max-width: general.$small-mobile) {
-    max-width: 50vw;
+  @media (max-width: general.$medium-mobile) {
+    min-width: 98vw;
+    min-height: 98vw;
+    max-width: 98vw;
+    max-height: 98vw;
   }
 }