From 2c888dacd1969ca173d1289541a118794e109d1b Mon Sep 17 00:00:00 2001
From: priyanshuuu777 <priyanshu22112006@gmail.com>
Date: Tue, 18 Aug 2026 14:45:42 +0530
Subject: [PATCH] fix: align album detail header

---
 frontend/src/pages/Album/AlbumDetail.tsx      | 119 +++++++++---------
 .../src/pages/__tests__/AlbumDetail.test.tsx  |  36 ++++++
 2 files changed, 97 insertions(+), 58 deletions(-)

diff --git a/frontend/src/pages/Album/AlbumDetail.tsx b/frontend/src/pages/Album/AlbumDetail.tsx
index c65e1e856..ab1f05f31 100644
--- a/frontend/src/pages/Album/AlbumDetail.tsx
+++ b/frontend/src/pages/Album/AlbumDetail.tsx
@@ -230,73 +230,76 @@ export const AlbumDetail = () => {
 
   return (
     <div className="flex h-full flex-col">
-      {/* Header */}
-      <div className="mb-6">
-        <div className="mb-4 flex items-center gap-3">
-          <Button variant="ghost" size="icon" onClick={handleBack}>
-            <ArrowLeft className="h-5 w-5" />
+      <div className="mb-6 space-y-4">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <Button
+            variant="outline"
+            onClick={handleBack}
+            className="w-fit cursor-pointer gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Albums
           </Button>
-          <div className="flex-1">
-            <h1 className="text-2xl font-bold">{album.name}</h1>
-            {album.description && (
-              <p className="text-muted-foreground text-sm">
-                {album.description}
-              </p>
-            )}
-          </div>
-        </div>
 
-        <div className="flex items-center justify-between">
-          <p className="text-muted-foreground text-sm">
-            {images.length} {images.length === 1 ? 'photo' : 'photos'}
-            {selectedImages.size > 0 && ` • ${selectedImages.size} selected`}
-          </p>
-
-          <div className="flex items-center gap-2">
-            {isSelectionMode ? (
-              <>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    setIsSelectionMode(false);
-                    setSelectedImages(new Set());
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={handleRemoveSelected}
-                  disabled={selectedImages.size === 0}
-                >
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  Remove Selected
-                </Button>
-              </>
-            ) : (
-              <>
-                {images.length > 0 && (
+          <div className="flex flex-col gap-2 sm:items-end">
+            <div className="flex flex-wrap items-center gap-2 sm:justify-end">
+              {isSelectionMode ? (
+                <>
                   <Button
                     variant="outline"
                     size="sm"
-                    onClick={() => setIsSelectionMode(true)}
+                    onClick={() => {
+                      setIsSelectionMode(false);
+                      setSelectedImages(new Set());
+                    }}
                   >
-                    Select Images
+                    Cancel
                   </Button>
-                )}
-                <Button
-                  size="sm"
-                  onClick={() => setIsAddImagesDialogOpen(true)}
-                >
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add Images
-                </Button>
-              </>
-            )}
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={handleRemoveSelected}
+                    disabled={selectedImages.size === 0}
+                  >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Remove Selected
+                  </Button>
+                </>
+              ) : (
+                <>
+                  {images.length > 0 && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setIsSelectionMode(true)}
+                    >
+                      Select Images
+                    </Button>
+                  )}
+                  <Button
+                    size="sm"
+                    onClick={() => setIsAddImagesDialogOpen(true)}
+                  >
+                    <Plus className="mr-2 h-4 w-4" />
+                    Add Images
+                  </Button>
+                </>
+              )}
+            </div>
+
+            <p className="text-muted-foreground text-sm">
+              {images.length} {images.length === 1 ? 'photo' : 'photos'}
+              {selectedImages.size > 0 && ` • ${selectedImages.size} selected`}
+            </p>
           </div>
         </div>
+
+        <div>
+          <h1 className="text-2xl font-bold">{album.name}</h1>
+          {album.description && (
+            <p className="text-muted-foreground text-sm">{album.description}</p>
+          )}
+        </div>
       </div>
 
       {/* Images Grid */}
diff --git a/frontend/src/pages/__tests__/AlbumDetail.test.tsx b/frontend/src/pages/__tests__/AlbumDetail.test.tsx
index 979caf09a..557ce0933 100644
--- a/frontend/src/pages/__tests__/AlbumDetail.test.tsx
+++ b/frontend/src/pages/__tests__/AlbumDetail.test.tsx
@@ -124,4 +124,40 @@ describe('AlbumDetail', () => {
     expect(screen.queryByRole('menu')).not.toBeInTheDocument();
     expect(screen.queryByText(/set as cover/i)).not.toBeInTheDocument();
   }, 30000);
+
+  test('places the album header controls before the album title', async () => {
+    mockGetAlbumById.mockResolvedValue({
+      success: true,
+      data: {
+        album: {
+          album_id: 'a1',
+          album_name: 'Trip',
+          description: 'Summer archive',
+          is_locked: false,
+          cover_image_path: null,
+          image_count: 1,
+        },
+      },
+    });
+
+    renderDetail();
+
+    const backButton = await screen.findByRole('button', {
+      name: /back to albums/i,
+    });
+    const albumTitle = await screen.findByRole('heading', { name: 'Trip' });
+
+    expect(
+      backButton.compareDocumentPosition(albumTitle) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(screen.getByText('Summer archive')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /select images/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /add images/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('1 photo')).toBeInTheDocument();
+  }, 30000);
 });