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>
This commit is contained in:
Nathan Schneider
2026-03-20 13:59:19 -06:00
parent 730075f757
commit 4589fba64e

View File

@@ -99,20 +99,6 @@
</script> </script>
<section class="export-controls" class:focused={focusedMode}> <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} {#if showUploadDialog}
<div class="webhook-config"> <div class="webhook-config">
<p class="upload-confirmation"> <p class="upload-confirmation">
@@ -132,6 +118,20 @@
</div> </div>
</div> </div>
{/if} {/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> </section>
<style> <style>
@@ -163,9 +163,13 @@
} }
.webhook-config { .webhook-config {
margin-top: 1rem; margin-bottom: 1rem;
padding: 1rem; padding: 1rem;
border: 2px solid var(--border-color); border: 2px solid var(--border-color);
box-sizing: border-box;
width: 100%;
overflow-wrap: break-word;
word-break: break-word;
} }
.upload-confirmation { .upload-confirmation {