From 73ff66ea9f27980912a18481911764c89f9d1baf Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Tue, 19 May 2026 00:59:04 +0200
Subject: [PATCH] fix(layout): tighten chrome density for 1080p (#54 D)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sub-bug D from #54: the Library view felt crowded at 1920x1080,
especially with the side lyrics panel open. The hero blocks were
sized for a 4K display — once the main column dropped to ~600 px
the album title truncated mid-word and the page felt top-heavy.

Three coordinated trims, no grammar change to the design language:

- **TopBar**: `h-20 px-8` to `h-16 px-6`. Saves 16 px of vertical
  chrome above every view; the search bar still has comfortable
  touch targets.
- **LibraryView hero**: `space-y-8 pb-20` to `space-y-6 pb-12`; icon
  tile `w-24 h-24` (Music2 size=48) to `w-20 h-20` (size=40); title
  responsive `text-3xl md:text-4xl` so 1080p doesn't get the 4K size;
  action button padding `px-4 py-2.5` to `px-4 py-2`.
- **AlbumDetailView hero**: `space-y-8 pb-20` to `space-y-6 pb-12`;
  cover `w-48 h-48` to `w-44 h-44` and gap to it from `space-x-8`
  to `space-x-6`; title `text-4xl ... truncate` to
  `text-3xl md:text-4xl ... line-clamp-2` so long names wrap into a
  second line instead of ellipsizing when the lyrics panel is open;
  action button padding `px-5 py-2.5` to `px-4 py-2`, and the row
  flips to `flex-wrap gap-2` so the three buttons wrap rather than
  overflow.

Net effect on a 1080p / 125 % DPI viewport: the album hero loses
about 60 px of vertical bulk and the title is readable on two lines
when the lyrics panel takes part of the width. 4K screens see a
slightly more compact hero — still clearly the page anchor.
---
 src/components/layout/TopBar.tsx         |  2 +-
 src/components/views/AlbumDetailView.tsx | 29 +++++++++++++-----------
 src/components/views/LibraryView.tsx     | 12 +++++-----
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index 9ebefd2..0a99162 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -255,7 +255,7 @@ export function TopBar({
   };
 
   return (
-    <div className="h-20 flex items-center justify-between px-8 z-10 sticky top-0 bg-zinc-50/80 backdrop-blur-md dark:bg-zinc-900/80">
+    <div className="h-16 flex items-center justify-between px-6 z-10 sticky top-0 bg-zinc-50/80 backdrop-blur-md dark:bg-zinc-900/80">
       {/* Navigation Arrows */}
       <div className="flex space-x-2">
         <button
diff --git a/src/components/views/AlbumDetailView.tsx b/src/components/views/AlbumDetailView.tsx
index cdc2413..cc54022 100644
--- a/src/components/views/AlbumDetailView.tsx
+++ b/src/components/views/AlbumDetailView.tsx
@@ -207,9 +207,12 @@ export function AlbumDetailView({
   const isMultiDisc = discNumbers.length > 1;
 
   return (
-    <div className="space-y-8 animate-fade-in pb-20">
-      {/* Header */}
-      <div className="flex items-start space-x-8">
+    <div className="space-y-6 animate-fade-in pb-12">
+      {/* Header. Sized for 1080p / 125 % DPI: cover at 11rem (176 px)
+          keeps the album visually anchored without dominating the
+          viewport, title wraps to a second line instead of truncating
+          when the side lyrics panel is open. */}
+      <div className="flex items-start space-x-6">
         <div
           onDoubleClick={() => {
             if (album.artwork_path) setIsLightboxOpen(true);
@@ -221,18 +224,18 @@ export function AlbumDetailView({
             path1x={album.artwork_path_1x}
             path2x={album.artwork_path_2x}
             size="full"
-            className="w-48 h-48 shadow-lg"
+            className="w-44 h-44 shadow-lg"
             iconSize={64}
             alt={album.title}
             rounded="2xl"
           />
         </div>
 
-        <div className="flex-1 min-w-0 pt-2">
+        <div className="flex-1 min-w-0 pt-1">
           <div className="text-[10px] font-bold tracking-widest text-zinc-400 uppercase mb-1">
             {t("albumDetail.badge")}
           </div>
-          <h1 className="text-4xl font-bold mb-2 text-zinc-900 dark:text-white truncate">
+          <h1 className="text-3xl md:text-4xl font-bold mb-1 text-zinc-900 dark:text-white line-clamp-2">
             {album.title}
           </h1>
 
@@ -243,14 +246,14 @@ export function AlbumDetailView({
               onClick={() =>
                 album.artist_id != null && onNavigateToArtist(album.artist_id)
               }
-              className="text-lg font-medium text-emerald-600 dark:text-emerald-400 hover:underline mb-3"
+              className="text-lg font-medium text-emerald-600 dark:text-emerald-400 hover:underline mb-2"
             >
               {album.artist_name}
             </button>
           )}
 
           {/* Meta */}
-          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-zinc-500 mb-4">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-zinc-500 mb-3">
             {album.year && <span>{album.year}</span>}
             {album.year && label && <span>·</span>}
             {label && <span>{label}</span>}
@@ -264,7 +267,7 @@ export function AlbumDetailView({
 
           {/* Genres */}
           {album.genres.length > 0 && (
-            <div className="flex flex-wrap gap-2 mb-4">
+            <div className="flex flex-wrap gap-2 mb-3">
               {album.genres.map((genre) => (
                 <span
                   key={genre}
@@ -284,12 +287,12 @@ export function AlbumDetailView({
           )}
 
           {/* Actions */}
-          <div className="flex items-center space-x-3 mt-4">
+          <div className="flex flex-wrap items-center gap-2 mt-3">
             <button
               type="button"
               onClick={handlePlayAll}
               disabled={album.tracks.length === 0}
-              className="bg-emerald-500 hover:bg-emerald-600 text-white px-5 py-2.5 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm disabled:opacity-50"
+              className="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm disabled:opacity-50"
             >
               <Play size={16} className="fill-current" />
               <span>{t("albumDetail.playAll")}</span>
@@ -298,7 +301,7 @@ export function AlbumDetailView({
               type="button"
               onClick={handleShufflePlay}
               disabled={album.tracks.length === 0}
-              className="border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 px-5 py-2.5 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm disabled:opacity-50"
+              className="border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 px-4 py-2 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm disabled:opacity-50"
             >
               <Shuffle size={16} />
               <span>{t("albumDetail.shuffle")}</span>
@@ -306,7 +309,7 @@ export function AlbumDetailView({
             <button
               type="button"
               onClick={() => setIsCoverPickerOpen(true)}
-              className="border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 px-5 py-2.5 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm"
+              className="border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 px-4 py-2 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm"
             >
               <ImageIcon size={16} />
               <span>{t("library.changeCover")}</span>
diff --git a/src/components/views/LibraryView.tsx b/src/components/views/LibraryView.tsx
index 7c98385..9286166 100644
--- a/src/components/views/LibraryView.tsx
+++ b/src/components/views/LibraryView.tsx
@@ -387,15 +387,15 @@ export function LibraryView({
     (activeTab === "dossiers" && folders.length > 0);
 
   return (
-    <div className="space-y-8 animate-fade-in pb-20">
+    <div className="space-y-6 animate-fade-in pb-12">
       {/* Header */}
       <div className="flex items-start justify-between">
-        <div className="flex items-center space-x-6">
-          <div className="w-24 h-24 rounded-2xl bg-emerald-100 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400 flex items-center justify-center shadow-sm">
-            <Music2 size={48} />
+        <div className="flex items-center space-x-5">
+          <div className="w-20 h-20 rounded-2xl bg-emerald-100 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400 flex items-center justify-center shadow-sm">
+            <Music2 size={40} />
           </div>
           <div>
-            <h1 className="text-4xl font-bold mb-2 text-zinc-900 dark:text-white">
+            <h1 className="text-3xl md:text-4xl font-bold mb-1 text-zinc-900 dark:text-white">
               {t("sidebar.myMusic.title")}
             </h1>
             <div className="flex items-center text-sm text-zinc-500 space-x-2">
@@ -410,7 +410,7 @@ export function LibraryView({
             type="button"
             onClick={handleImport}
             disabled={isImporting}
-            className="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2.5 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm shadow-emerald-500/30 disabled:opacity-60 disabled:cursor-not-allowed"
+            className="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-xl text-sm font-semibold flex items-center space-x-2 transition-colors shadow-sm shadow-emerald-500/30 disabled:opacity-60 disabled:cursor-not-allowed"
           >
             <Folder size={16} />
             <span>{t("library.header.addFolder")}</span>