allow autoheight of library header

src/renderer/components/native-scroll-area/native-scroll-area.tsx

@@ -32,7 +32,7 @@ export const NativeScrollArea = forwardRef(
             current: pageHeaderProps?.target?.current,
         });
 
-        const scrollHandlerRef = useRef<number | null>(null);
+        const scrollHandlerRef = useRef<null | number>(null);
 
         const [initialize] = useOverlayScrollbars({
             defer: false,

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

@@ -27,13 +27,12 @@
 @container (min-width: 768px) {
     .library-header {
         grid-template-areas: 'image info';
-        grid-template-rows: 100%;
+        grid-template-rows: auto;
         grid-template-columns: 225px minmax(0, 1fr);
-        align-items: flex-end;
+        align-items: center;
         justify-items: start;
-        height: 30vh;
+        height: auto;
         min-height: 340px;
-        max-height: 500px;
         padding: 5rem 2rem 2rem;
 
         .image {
@@ -97,7 +96,8 @@
     }
 
     .metadata-section,
-    .metadata-section > div:first-of-type {
+    .metadata-section > div:first-of-type,
+    .metadata-section > div:last-of-type {
         align-items: flex-start;
         justify-content: flex-start;
         text-align: left;