From 304ce8b881c76af4a8f89a5726e8bffae55ac903 Mon Sep 17 00:00:00 2001
From: Pedro Daniel Reis <pedroreis.ad@protonmail.com>
Date: Fri, 1 May 2026 20:32:18 +0100
Subject: [PATCH] [UI] Made sidebar image just use flex (#1975)

* made sidebar image just use flex

* force aspect ratio to be square

* prevent image container from expanding

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
---
 .../features/sidebar/components/sidebar.module.css       | 3 +--
 src/renderer/features/sidebar/components/sidebar.tsx     | 9 ++-------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/renderer/features/sidebar/components/sidebar.module.css b/src/renderer/features/sidebar/components/sidebar.module.css
index 5e60d8b6f..397940a29 100644
--- a/src/renderer/features/sidebar/components/sidebar.module.css
+++ b/src/renderer/features/sidebar/components/sidebar.module.css
@@ -31,8 +31,7 @@
 .image-container {
     position: relative;
     flex-shrink: 0;
-    width: var(--sidebar-image-height);
-    height: var(--sidebar-image-height);
+    min-height: 0;
     padding: var(--theme-spacing-md);
     cursor: pointer;
     animation: fade-in 0.2s ease-in-out;
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index c1522c7c9..8e2da38fe 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
-import { CSSProperties, MouseEvent, useMemo } from 'react';
+import { MouseEvent, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './sidebar.module.css';
@@ -159,7 +159,6 @@ export const Sidebar = () => {
 
 const SidebarImage = () => {
     const { t } = useTranslation();
-    const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
     const { setSideBar } = useAppStoreActions();
     const currentSong = usePlayerSong();
     const isRadioActive = useIsRadioActive();
@@ -216,11 +215,7 @@ const SidebarImage = () => {
             onClick={expandFullScreenPlayer}
             onContextMenu={handleToggleContextMenu}
             role="button"
-            style={
-                {
-                    '--sidebar-image-height': leftWidth,
-                } as CSSProperties
-            }
+            style={{ aspectRatio: 1 }}
             transition={{ duration: 0.3, ease: 'easeInOut' }}
         >
             <Tooltip