[backport core/1.37] fix: prevent Record Audio waveform from overflowing node bounds (#8081)

Backport of #8070 to `core/1.37`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8081-backport-core-1-37-fix-prevent-Record-Audio-waveform-from-overflowing-node-bounds-2e96d73d365081fc85eddf301c4624e1)
by [Unito](https://www.unito.io)

Co-authored-by: Terry Jia <terryjia88@gmail.com>
This commit is contained in:
Comfy Org PR Bot
2026-01-16 07:02:18 +09:00
committed by GitHub
parent a963d587cf
commit 64be98873b

View File

@@ -12,11 +12,11 @@
</div>
<div
v-if="isRecording || isPlaying || recordedURL"
class="flex h-14 w-full items-center gap-4 rounded-lg px-4 bg-node-component-surface text-text-secondary"
class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg px-3 bg-node-component-surface text-text-secondary"
>
<!-- Recording Status -->
<div class="flex min-w-30 items-center gap-2">
<span class="min-w-20 text-xs">
<div class="flex shrink-0 items-center gap-1">
<span class="text-xs">
{{
isRecording
? t('g.listening', 'Listening...')
@@ -27,11 +27,11 @@
: ''
}}
</span>
<span class="min-w-10 text-sm">{{ formatTime(timer) }}</span>
<span class="text-sm">{{ formatTime(timer) }}</span>
</div>
<!-- Waveform Visualization -->
<div class="flex h-8 flex-1 items-center gap-2 overflow-x-clip">
<div class="flex h-8 min-w-0 flex-1 items-center gap-2 overflow-hidden">
<div
v-for="(bar, index) in waveformBars"
:key="index"
@@ -45,7 +45,7 @@
<button
v-if="isRecording"
:title="t('g.stopRecording', 'Stop Recording')"
class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
class="flex shrink-0 size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handleStopRecording"
>
<div class="size-2.5 rounded-sm bg-danger-100" />
@@ -54,7 +54,7 @@
<button
v-else-if="!isRecording && recordedURL && !isPlaying"
:title="t('g.playRecording') || 'Play Recording'"
class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handlePlayRecording"
>
<i class="text-text-secondary icon-[lucide--play] size-4" />
@@ -63,7 +63,7 @@
<button
v-else-if="isPlaying"
:title="t('g.stopPlayback') || 'Stop Playback'"
class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handleStopPlayback"
>
<i class="text-text-secondary icon-[lucide--square] size-4" />