Skip to content

fix(layout): tighten chrome density for 1080p #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
InstaZDLL merged 1 commit into from
May 18, 2026
+23 −20
Merged

fix(layout): tighten chrome density for 1080p #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/layout/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
29 changes: 16 additions & 13 deletions src/components/views/AlbumDetailView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>

Expand All @@ -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>}
Expand All @@ -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}
Expand All @@ -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>
Expand All @@ -298,15 +301,15 @@ 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>
</button>
<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>
Expand Down
12 changes: 6 additions & 6 deletions src/components/views/LibraryView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
Loading