redesign album detail page

src/renderer/features/shared/components/library-header.module.css

@@ -22,10 +22,8 @@
         width: 250px !important;
         height: 250px;
     }
-}
 
-@container (min-width: 768px) {
-    .library-header {
+    @container (min-width: $mantine-breakpoint-sm) {
         grid-template-areas: 'image info';
         grid-template-rows: auto;
         grid-template-columns: 225px minmax(0, 1fr);
@@ -45,10 +43,8 @@
             height: 225px;
         }
     }
-}
 
-@container (min-width: 1200px) {
-    .library-header {
+    @container (min-width: $mantine-breakpoint-lg) {
         grid-template-columns: 250px minmax(0, 1fr);
 
         .image {
@@ -70,6 +66,10 @@
     align-items: center;
     justify-content: center;
     filter: drop-shadow(0 0 8px rgb(0 0 0 / 50%));
+
+    @container (min-width: $mantine-breakpoint-sm) {
+        align-items: flex-end;
+    }
 }
 
 .metadata-section {
@@ -81,25 +81,12 @@
     align-items: center;
     justify-content: center;
     width: 100%;
+    height: 100%;
     text-align: center;
 
-    & > div {
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-    }
-}
-
-@container (min-width: 768px) {
-    .image-section {
-        align-items: flex-end;
-    }
-
-    .metadata-section,
-    .metadata-section > div:first-of-type,
-    .metadata-section > div:last-of-type {
+    @container (min-width: $mantine-breakpoint-sm) {
         align-items: flex-start;
-        justify-content: flex-start;
+        justify-content: flex-end;
         text-align: left;
     }
 }
@@ -146,3 +133,18 @@
     color: var(--theme-colors-foreground);
     -webkit-box-orient: vertical;
 }
+
+.library-header-menu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-sm);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    @container (min-width: $mantine-breakpoint-sm) {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}