From 4589fba64eb8ed5811b13fe24a819dd80c8f88c5 Mon Sep 17 00:00:00 2001
From: Nathan Schneider <n@nathanschneider.info>
Date: Fri, 20 Mar 2026 13:59:19 -0600
Subject: [PATCH] Fix upload dialog visibility and mobile overflow

Move the upload confirmation dialog above the action buttons so it's
immediately visible, and add overflow-safe CSS to prevent text from
spilling outside the dialog box on mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/ExportControls.svelte      | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/bicorder-app/src/components/ExportControls.svelte b/bicorder-app/src/components/ExportControls.svelte
index 8b7131a..af9fb4a 100644
--- a/bicorder-app/src/components/ExportControls.svelte
+++ b/bicorder-app/src/components/ExportControls.svelte
@@ -99,20 +99,6 @@
 </script>
 
 <section class="export-controls" class:focused={focusedMode}>
-  <div class="button-group">
-    <button on:click={exportToJSON}>
-      💾 Export JSON
-    </button>
-
-    <button on:click={() => showUploadDialog = !showUploadDialog}>
-      📤 Upload
-    </button>
-
-    <button class="reset-btn" on:click={handleReset}>
-      🗑️ Reset All
-    </button>
-  </div>
-
   {#if showUploadDialog}
     <div class="webhook-config">
       <p class="upload-confirmation">
@@ -132,6 +118,20 @@
       </div>
     </div>
   {/if}
+
+  <div class="button-group">
+    <button on:click={exportToJSON}>
+      💾 Export JSON
+    </button>
+
+    <button on:click={() => showUploadDialog = !showUploadDialog}>
+      📤 Upload
+    </button>
+
+    <button class="reset-btn" on:click={handleReset}>
+      🗑️ Reset All
+    </button>
+  </div>
 </section>
 
 <style>
@@ -163,9 +163,13 @@
   }
 
   .webhook-config {
-    margin-top: 1rem;
+    margin-bottom: 1rem;
     padding: 1rem;
     border: 2px solid var(--border-color);
+    box-sizing: border-box;
+    width: 100%;
+    overflow-wrap: break-word;
+    word-break: break-word;
   }
 
   .upload-confirmation {