fix grid position of album content

src/renderer/features/albums/components/album-detail-content.module.css

@@ -13,6 +13,9 @@
 
 .content-layout {
     display: grid;
+    grid-template-areas:
+        'metadata'
+        'songs';
     grid-template-rows: auto auto;
     grid-template-columns: 1fr;
     gap: var(--theme-spacing-lg);
@@ -24,17 +27,20 @@
 .metadata-column {
     display: flex;
     flex-direction: column;
+    grid-area: metadata;
 }
 
 .songs-column {
     display: flex;
     flex-direction: column;
+    grid-area: songs;
     min-width: 0;
     overflow-x: hidden;
 }
 
 @container (min-width: $mantine-breakpoint-lg) {
     .content-layout {
+        grid-template-areas: 'songs metadata';
         grid-template-rows: 1fr;
         grid-template-columns: minmax(0, 1fr) 300px;
         gap: var(--theme-spacing-xl);
@@ -42,11 +48,6 @@
         max-width: 100%;
     }
 
-    .songs-column {
-        grid-row: 1;
-        grid-column: 1;
-    }
-
     /* Prevent sticky headers from extending into the right margins */
     .songs-column :global(.fs-item-table-list-module-sticky-header),
     .songs-column :global(.fs-item-table-list-module-sticky-group-row) {
@@ -57,8 +58,6 @@
     .metadata-column {
         position: sticky;
         top: calc(var(--theme-spacing-lg) + 4rem);
-        grid-row: 1;
-        grid-column: 2;
         align-self: start;
         width: 300px;
         max-height: calc(100vh - 90px - var(--theme-spacing-lg) - 4rem);

src/renderer/features/albums/components/album-detail-content.tsx

@@ -48,7 +48,6 @@ import {
 } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
-
 interface AlbumMetadataTagsProps {
     album: Album | undefined;
 }
@@ -369,6 +368,11 @@ export const AlbumDetailContent = () => {
             <div className={styles.detailContainer}>
                 {comment && <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>}
                 <div className={styles.contentLayout}>
+                    <div className={styles.songsColumn}>
+                        {detailQuery?.data?.songs && detailQuery.data.songs.length > 0 && (
+                            <AlbumDetailSongsTable songs={detailQuery.data.songs} />
+                        )}
+                    </div>
                     <div className={styles.metadataColumn}>
                         <Stack gap="2xl">
                             <AlbumMetadataArtists artists={detailQuery?.data?.albumArtists} />
@@ -384,11 +388,6 @@ export const AlbumDetailContent = () => {
                             />
                         </Stack>
                     </div>
-                    {detailQuery?.data?.songs && detailQuery.data.songs.length > 0 && (
-                        <div className={styles.songsColumn}>
-                            <AlbumDetailSongsTable songs={detailQuery.data.songs} />
-                        </div>
-                    )}
                 </div>
 
                 <Stack gap="lg" mt="3rem">