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