fix mobile playerbar layout to prevent overflow

src/renderer/features/player/components/mobile-playerbar.module.css

@@ -1,5 +1,6 @@
 .container {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     gap: var(--theme-spacing-sm);
     align-items: center;
     width: 100%;
@@ -8,6 +9,14 @@
     overflow: hidden;
 }
 
+.content-wrapper {
+    display: flex;
+    gap: var(--theme-spacing-sm);
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
 .image-wrapper {
     position: relative;
     display: flex;
@@ -41,6 +50,7 @@
     gap: 0;
     justify-content: center;
     min-width: 0;
+    max-width: 50%;
     overflow: hidden;
 }
 
@@ -59,7 +69,6 @@
 
 .controls-wrapper {
     display: flex;
-    flex-shrink: 0;
     gap: 0.5rem;
     align-items: center;
     justify-content: center;

src/renderer/features/player/components/mobile-playerbar.tsx

@@ -65,6 +65,7 @@ export const MobilePlayerbar = () => {
 
     return (
         <div className={clsx(styles.container, PlaybackSelectors.mediaPlayer)}>
+            <div className={styles.contentWrapper}>
                 <LayoutGroup>
                     <AnimatePresence initial={false} mode="popLayout">
                         {currentSong?.imageUrl && (
@@ -151,9 +152,12 @@ export const MobilePlayerbar = () => {
                                         size="xs"
                                         to={
                                             artist.id
-                                            ? generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                                ? generatePath(
+                                                      AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+                                                      {
                                                           albumArtistId: artist.id,
-                                              })
+                                                      },
+                                                  )
                                                 : undefined
                                         }
                                     >
@@ -190,6 +194,7 @@ export const MobilePlayerbar = () => {
                         </div>
                     </motion.div>
                 </LayoutGroup>
+            </div>
             <div className={styles.controlsWrapper}>
                 <PlayerButton
                     icon={<Icon fill="default" icon="mediaPrevious" size="md" />}