redesign album detail page

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

@@ -1,6 +1,7 @@
 .content-container {
     position: relative;
     z-index: 0;
+    container-type: inline-size;
 }
 
 .detail-container {
@@ -8,5 +9,59 @@
     flex-direction: column;
     gap: var(--theme-spacing-lg);
     padding: 1rem 2rem 5rem;
-    overflow: hidden;
+}
+
+.content-layout {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    gap: var(--theme-spacing-lg);
+    align-items: start;
+    width: 100%;
+    min-width: 0;
+}
+
+.metadata-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.songs-column {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow-x: hidden;
+}
+
+@container (min-width: $mantine-breakpoint-lg) {
+    .content-layout {
+        grid-template-rows: 1fr;
+        grid-template-columns: minmax(0, 1fr) 300px;
+        gap: var(--theme-spacing-xl);
+        width: 100%;
+        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) {
+        padding-right: 0;
+        margin-right: 0;
+    }
+
+    .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);
+        overflow-y: auto;
+    }
 }