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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user