From 2d61225ee40a26084ff4a294e619d6c4d51e2522 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Fri, 17 Apr 2026 13:14:07 +0700
Subject: [PATCH] fix(ui): resolve overlapping panels and buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- lift DrawToolbar above ColorPicker (bottom 80 → 188)
- move Import button below CanvasControls (top 12 → 68)
- hide Import button while panel open; panel has its own close
---
 src/client/App.svelte                    | 16 +++++++++-------
 src/client/components/DrawToolbar.svelte |  3 +--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/client/App.svelte b/src/client/App.svelte
index ff1a99a..5ebf5e5 100644
--- a/src/client/App.svelte
+++ b/src/client/App.svelte
@@ -179,10 +179,12 @@
   <ColorPicker {selectedColor} onSelect={(i) => selectedColor = i} />
   <UserInfo {credits} />
 
-  <button class="import-btn" onclick={() => importerOpen = !importerOpen}
-    title="Upload an image and place it on the canvas">
-    {importerOpen ? 'Close Import' : 'Import Image'}
-  </button>
+  {#if !importerOpen}
+    <button class="import-btn" onclick={() => importerOpen = true}
+      title="Upload an image and place it on the canvas">
+      Import Image
+    </button>
+  {/if}
 
   <ImageImporter
     open={importerOpen}
@@ -222,8 +224,8 @@
 
   .import-btn {
     position: fixed;
-    top: 12px;
-    right: 12px;
+    top: 68px;
+    right: 16px;
     padding: 8px 14px;
     background: rgba(37, 99, 235, 0.9);
     border: 1px solid #3b82f6;
@@ -232,7 +234,7 @@
     font-size: 0.9rem;
     border-radius: 8px;
     cursor: pointer;
-    z-index: 25;
+    z-index: 15;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
   .import-btn:hover { background: #1d4ed8; }
diff --git a/src/client/components/DrawToolbar.svelte b/src/client/components/DrawToolbar.svelte
index 43cfb12..ef5c0d8 100644
--- a/src/client/components/DrawToolbar.svelte
+++ b/src/client/components/DrawToolbar.svelte
@@ -30,7 +30,7 @@
 <style>
   .toolbar {
     position: fixed;
-    bottom: 80px;
+    bottom: 188px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
@@ -104,7 +104,6 @@
 
   @media (max-width: 600px) {
     .toolbar {
-      bottom: 72px;
       padding: 6px 8px;
       gap: 4px;
     }