From b3ee14cc6e46b8794d04013b42048af8c580d608 Mon Sep 17 00:00:00 2001
From: indigo <indigoo@gmail.com>
Date: Mon, 22 Jun 2026 01:29:27 +0800
Subject: [PATCH] Match asset page layout and toolbar to shot page

- Remove wrapper padding from ProjectAssetsView so toolbar sits flush
  under the header, matching the shot page
- Add px-4 to AssetsDataTable root div to match ShotsDataTable margin
- Move thumbnail toggle from left filter group to right action area as
  an icon-only button, matching the shot toolbar's right-side pattern

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/asset/AssetTableToolbar.vue    | 24 +++++++++----------
 .../src/components/asset/AssetsDataTable.vue  |  2 +-
 .../src/views/project/ProjectAssetsView.vue   |  4 +---
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/asset/AssetTableToolbar.vue b/frontend/src/components/asset/AssetTableToolbar.vue
index 8862640..59b5ad1 100644
--- a/frontend/src/components/asset/AssetTableToolbar.vue
+++ b/frontend/src/components/asset/AssetTableToolbar.vue
@@ -88,18 +88,6 @@
           </PopoverContent>
         </Popover>
 
-        <!-- Thumbnail Toggle Button -->
-        <Button
-          variant="outline"
-          size="sm"
-          @click="$emit('update:show-thumbnails', !showThumbnails)"
-          class="h-8"
-        >
-          <ImageIcon v-if="!showThumbnails" class="h-4 w-4 mr-2" />
-          <ImageOff v-else class="h-4 w-4 mr-2" />
-          {{ showThumbnails ? 'Hide' : 'Show' }} Thumbnails
-        </Button>
-
         <!-- Task Status Filter (only for list view) -->
         <TaskStatusFilter
           v-if="viewMode === 'list'"
@@ -236,6 +224,18 @@
           />
         </div>
 
+        <!-- Thumbnail Toggle -->
+        <Button
+          variant="outline"
+          size="sm"
+          @click="$emit('update:show-thumbnails', !showThumbnails)"
+          class="h-8 w-8 p-0"
+          :title="showThumbnails ? 'Hide Thumbnails' : 'Show Thumbnails'"
+        >
+          <ImageIcon v-if="!showThumbnails" class="h-4 w-4" />
+          <ImageOff v-else class="h-4 w-4" />
+        </Button>
+
         <!-- Create Asset Button -->
         <Button @click="$emit('create-asset')" size="sm" class="h-8 w-8 p-0">
           <Plus class="h-4 w-4" />
diff --git a/frontend/src/components/asset/AssetsDataTable.vue b/frontend/src/components/asset/AssetsDataTable.vue
index 71ab4dd..03102f1 100644
--- a/frontend/src/components/asset/AssetsDataTable.vue
+++ b/frontend/src/components/asset/AssetsDataTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div class="space-y-4 px-4">
     <div class="rounded-md border">
       <Table>
         <TableHeader>
diff --git a/frontend/src/views/project/ProjectAssetsView.vue b/frontend/src/views/project/ProjectAssetsView.vue
index 33f47dd..a3d570d 100644
--- a/frontend/src/views/project/ProjectAssetsView.vue
+++ b/frontend/src/views/project/ProjectAssetsView.vue
@@ -19,9 +19,7 @@
 
     <!-- Content -->
     <div class="flex-1 overflow-auto">
-      <div class="p-4 sm:p-6">
-        <AssetBrowser :project-id="projectId" />
-      </div>
+      <AssetBrowser :project-id="projectId" />
     </div>
   </div>
 </template>