From aa48c1c18bbbb545d0675e0de01236b05e54fdd9 Mon Sep 17 00:00:00 2001
From: Xuan4781 <123594280+Xuan4781@users.noreply.github.com>
Date: Sun, 5 Apr 2026 05:35:39 -0400
Subject: [PATCH] fix: audio waveform clipping in horizontal card view (#14789)

Fixes #13399

### Issue
When viewing an audio attachment card in horizontal view, the waveform
was being clipped and not fully visible. In vertical view it displayed
correctly.

### Fix
- `audio-waveform` and `progressContainer` flex children were missing
  `minWidth: 0` and `flex: 1`, causing container overflow
- `.affine-attachment-container` had a fixed height with `overflow:
hidden`
  that cut off the waveform row

### Screenshot Verification
**Before**
<img width="1661" height="935" alt="image"
src="https://github.com/user-attachments/assets/b2f0908b-94fe-4869-bdfb-cc6a757e703d"
/>

**After**
<img width="750" height="182" alt="image"
src="https://github.com/user-attachments/assets/63caac69-f37b-4894-80de-806b691581c8"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

**New Features**
- Introduced audio embed card functionality allowing users to embed and
display audio content directly in documents with standardized dimensions
and improved responsive layout styling for better visual presentation
and integration.

**Improvements**
- Enhanced styling and layout handling for audio player components to
ensure proper display and optimal rendering in various container sizes
and space constraints.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 blocksuite/affine/model/src/utils/types.ts                     | 3 ++-
 blocksuite/affine/shared/src/consts/index.ts                   | 2 ++
 .../frontend/component/src/ui/audio-player/audio-player.css.ts | 1 +
 .../component/src/ui/audio-player/audio-waveform.css.ts        | 2 ++
 .../src/blocksuite/attachment-viewer/audio/audio-block.css.ts  | 1 +
 5 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/blocksuite/affine/model/src/utils/types.ts b/blocksuite/affine/model/src/utils/types.ts
index a4586c7a8..2b1a6dba3 100644
--- a/blocksuite/affine/model/src/utils/types.ts
+++ b/blocksuite/affine/model/src/utils/types.ts
@@ -19,7 +19,8 @@ export type EmbedCardStyle =
   | 'html'
   | 'syncedDoc'
   | 'pdf'
-  | 'citation';
+  | 'citation'
+  | 'audio';
 
 export const LinkPreviewDataSchema = z.object({
   description: z.string().nullable(),
diff --git a/blocksuite/affine/shared/src/consts/index.ts b/blocksuite/affine/shared/src/consts/index.ts
index 84bd79308..8907007fe 100644
--- a/blocksuite/affine/shared/src/consts/index.ts
+++ b/blocksuite/affine/shared/src/consts/index.ts
@@ -33,6 +33,7 @@ export const EMBED_CARD_WIDTH: Record<EmbedCardStyle, number> = {
   syncedDoc: SYNCED_DEFAULT_WIDTH,
   pdf: 537 + 24 + 2,
   citation: 752,
+  audio: 116,
 };
 
 export const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number> = {
@@ -48,6 +49,7 @@ export const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number> = {
   syncedDoc: 455,
   pdf: 759 + 46 + 24 + 2,
   citation: 52,
+  audio: 116,
 };
 
 export const EMBED_BLOCK_FLAVOUR_LIST = [
diff --git a/packages/frontend/component/src/ui/audio-player/audio-player.css.ts b/packages/frontend/component/src/ui/audio-player/audio-player.css.ts
index ebb4dd05f..51388b36a 100644
--- a/packages/frontend/component/src/ui/audio-player/audio-player.css.ts
+++ b/packages/frontend/component/src/ui/audio-player/audio-player.css.ts
@@ -123,6 +123,7 @@ export const progressContainer = style({
   display: 'flex',
   alignItems: 'center',
   gap: 8,
+  minWidth: 0,
 });
 
 export const progressBar = style({
diff --git a/packages/frontend/component/src/ui/audio-player/audio-waveform.css.ts b/packages/frontend/component/src/ui/audio-player/audio-waveform.css.ts
index 0f66be87c..cbf26514b 100644
--- a/packages/frontend/component/src/ui/audio-player/audio-waveform.css.ts
+++ b/packages/frontend/component/src/ui/audio-player/audio-waveform.css.ts
@@ -9,4 +9,6 @@ export const root = style({
   position: 'relative',
   overflow: 'hidden',
   maxWidth: 2000, // since we have at least 1000 samples, the max width is 2000
+  minWidth: 0,
+  flex: 1,
 });
diff --git a/packages/frontend/core/src/blocksuite/attachment-viewer/audio/audio-block.css.ts b/packages/frontend/core/src/blocksuite/attachment-viewer/audio/audio-block.css.ts
index 6d3941787..f9f0be4ef 100644
--- a/packages/frontend/core/src/blocksuite/attachment-viewer/audio/audio-block.css.ts
+++ b/packages/frontend/core/src/blocksuite/attachment-viewer/audio/audio-block.css.ts
@@ -54,4 +54,5 @@ export const reloadButtonIcon = style({
 globalStyle(`.affine-attachment-container:has(${root})`, {
   border: 'none',
   overflow: 'visible',
+  height: 'fit-content !important',
 });