mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 09:45:13 +00:00
0792d26f77
## Summary Fix confirm dialog buttons becoming unreachable on mobile when text contains long unbreakable words (e.g. content-hashed filenames with 100+ characters). <img width="1080" height="2277" alt="image" src="https://github.com/user-attachments/assets/2f42afc9-c8ec-42aa-89d5-802dbaf788fd" /> ## Changes - **What**: Added `overflow-wrap: break-word` and `flex-wrap` to both confirm dialog systems so long words break properly and buttons wrap on narrow screens. - `ConfirmationDialogContent.vue`: Added `overflow-wrap: break-word` to the existing scoped style and `flex-wrap` to button row. - `ConfirmBody.vue`: Added `break-words` tailwind class. - `ConfirmFooter.vue`: Added `flex-wrap` to button section. ## Review Focus Minimal CSS-only fix across both dialog systems (legacy `dialogService.confirm()` and newer `showConfirmDialog()`). No behavioral changes. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8746-fix-prevent-confirm-dialog-buttons-from-being-unreachable-on-mobile-with-long-text-3016d73d36508116bf55f0dc5cd89d0b) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
20 lines
480 B
Vue
20 lines
480 B
Vue
<template>
|
|
<div
|
|
class="flex flex-col break-words px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
|
|
>
|
|
<p v-if="promptTextReal">
|
|
{{ promptTextReal }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed, toValue } from 'vue'
|
|
import type { MaybeRefOrGetter } from 'vue'
|
|
|
|
const { promptText } = defineProps<{
|
|
promptText?: MaybeRefOrGetter<string>
|
|
}>()
|
|
|
|
const promptTextReal = computed(() => toValue(promptText))
|
|
</script>
|