diff --git a/__tests__/components/drops/view/part/DropPartMarkdown.test.tsx b/__tests__/components/drops/view/part/DropPartMarkdown.test.tsx
index c25d20de75..c596ca3c4e 100644
--- a/__tests__/components/drops/view/part/DropPartMarkdown.test.tsx
+++ b/__tests__/components/drops/view/part/DropPartMarkdown.test.tsx
@@ -355,13 +355,21 @@ describe("DropPartMarkdown", () => {
   });
 
   it("renders YouTube previews with thumbnail and iframe interaction", async () => {
+    let resolvePreview:
+      | ((value: YoutubeOEmbedResponse | null) => void)
+      | undefined;
+    const previewPromise = new Promise<YoutubeOEmbedResponse | null>(
+      (resolve) => {
+        resolvePreview = resolve;
+      }
+    );
     const preview: YoutubeOEmbedResponse = {
       title: "Sample Video",
       author_name: "Sample Creator",
       thumbnail_url: "https://img.youtube.com/vi/sample/hqdefault.jpg",
       html: '<iframe title="Sample Video" src="https://www.youtube.com/embed/sample"></iframe>',
     };
-    mockFetchYoutubePreview.mockResolvedValue(preview);
+    mockFetchYoutubePreview.mockReturnValue(previewPromise);
 
     const content = "Watch this https://youtu.be/sample";
     render(
@@ -374,12 +382,22 @@ describe("DropPartMarkdown", () => {
       />
     );
 
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame).toBeInTheDocument();
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    resolvePreview?.(preview);
+
     const previewButton = await screen.findByRole("button", {
       name: /sample video/i,
     });
-    expect(
-      await screen.findByRole("img", { name: /sample video/i })
-    ).toHaveAttribute("src", preview.thumbnail_url);
+    const thumbnailImage = await screen.findByRole("img", {
+      name: /sample video/i,
+    });
+    expect(thumbnailImage.getAttribute("src")).toContain(
+      encodeURIComponent(preview.thumbnail_url)
+    );
 
     await userEvent.click(previewButton);
 
@@ -388,6 +406,11 @@ describe("DropPartMarkdown", () => {
     expect(mockFetchYoutubePreview.mock.calls[0]?.[0]).toBe(
       "https://www.youtube.com/watch?v=sample"
     );
+
+    const title = screen.getByText("Sample Video");
+    const author = screen.getByText("Sample Creator");
+    expect(title.className).toContain("tw-line-clamp-2");
+    expect(author.className).toContain("tw-line-clamp-1");
   });
 
   it("normalizes YouTube URLs before fetching preview data", async () => {
@@ -467,8 +490,15 @@ describe("DropPartMarkdown", () => {
       />
     );
 
-    const fallbackLink = await screen.findByRole("link", { name: url });
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    const fallbackLink = await screen.findByTestId(
+      "youtube-preview-fallback-link"
+    );
     expect(fallbackLink).toHaveAttribute("href", url);
+    expect(fallbackLink).toHaveTextContent(/failed to load youtube preview/i);
   });
 
   it("falls back to a link when YouTube preview rejects", async () => {
@@ -485,8 +515,15 @@ describe("DropPartMarkdown", () => {
       />
     );
 
-    const fallbackLink = await screen.findByRole("link", { name: url });
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    const fallbackLink = await screen.findByTestId(
+      "youtube-preview-fallback-link"
+    );
     expect(fallbackLink).toHaveAttribute("href", url);
+    expect(fallbackLink).toHaveTextContent(/failed to load youtube preview/i);
   });
 
   it("falls back to a link when YouTube preview returns null", async () => {
@@ -503,8 +540,15 @@ describe("DropPartMarkdown", () => {
       />
     );
 
-    const fallbackLink = await screen.findByRole("link", { name: url });
+    const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
+    expect(stableFrame.className).toContain("tw-h-[13rem]");
+    expect(stableFrame.className).toContain("md:tw-h-[15rem]");
+
+    const fallbackLink = await screen.findByTestId(
+      "youtube-preview-fallback-link"
+    );
     expect(fallbackLink).toHaveAttribute("href", url);
+    expect(fallbackLink).toHaveTextContent(/youtube preview unavailable/i);
   });
 
   it("lazy loads tweet embeds with a loading skeleton", async () => {
diff --git a/__tests__/components/waves/LinkPreviewCard.test.tsx b/__tests__/components/waves/LinkPreviewCard.test.tsx
index c40fac6171..1e6546daec 100644
--- a/__tests__/components/waves/LinkPreviewCard.test.tsx
+++ b/__tests__/components/waves/LinkPreviewCard.test.tsx
@@ -4,7 +4,11 @@ import React from "react";
 import LinkPreviewCard from "@/components/waves/LinkPreviewCard";
 
 const mockOpenGraphPreview = jest.fn(({ href, preview }: any) => (
-  <div data-testid="open-graph" data-href={href} data-preview={preview ? "ready" : "loading"} />
+  <div
+    data-testid="open-graph"
+    data-href={href}
+    data-preview={preview ? "ready" : "loading"}
+  />
 ));
 
 const mockEnsPreviewCard = jest.fn(({ preview }: any) => (
@@ -12,7 +16,9 @@ const mockEnsPreviewCard = jest.fn(({ preview }: any) => (
 ));
 
 jest.mock("@/components/waves/OpenGraphPreview", () => {
-  const actual = jest.requireActual("../../../components/waves/OpenGraphPreview");
+  const actual = jest.requireActual(
+    "../../../components/waves/OpenGraphPreview"
+  );
   return {
     __esModule: true,
     ...actual,
@@ -31,6 +37,18 @@ jest.mock("@/services/api/link-preview-api", () => ({
 
 describe("LinkPreviewCard", () => {
   const { fetchLinkPreview } = require("@/services/api/link-preview-api");
+  const assertStableFrame = () => {
+    const frame = screen.getByTestId("link-preview-card-stable-frame");
+    expect(frame).toHaveClass(
+      "tw-h-[10rem]",
+      "tw-min-h-[10rem]",
+      "tw-max-h-[10rem]",
+      "md:tw-h-[11rem]",
+      "md:tw-min-h-[11rem]",
+      "md:tw-max-h-[11rem]"
+    );
+    return frame;
+  };
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -50,8 +68,12 @@ describe("LinkPreviewCard", () => {
       />
     );
 
+    assertStableFrame();
     expect(mockOpenGraphPreview).toHaveBeenCalledWith(
-      expect.objectContaining({ href: "https://example.com/article", preview: undefined })
+      expect.objectContaining({
+        href: "https://example.com/article",
+        preview: undefined,
+      })
     );
 
     await waitFor(() =>
@@ -63,8 +85,11 @@ describe("LinkPreviewCard", () => {
       )
     );
 
-    expect(fetchLinkPreview).toHaveBeenCalledWith("https://example.com/article");
+    expect(fetchLinkPreview).toHaveBeenCalledWith(
+      "https://example.com/article"
+    );
     expect(screen.queryByTestId("fallback")).toBeNull();
+    assertStableFrame();
   });
 
   it("renders fallback when preview lacks useful content", async () => {
@@ -80,6 +105,7 @@ describe("LinkPreviewCard", () => {
     await waitFor(() => {
       expect(screen.getByTestId("fallback")).toBeInTheDocument();
     });
+    assertStableFrame();
   });
 
   it("renders fallback when request fails", async () => {
@@ -95,10 +121,14 @@ describe("LinkPreviewCard", () => {
     await waitFor(() => {
       expect(screen.getByTestId("fallback")).toBeInTheDocument();
     });
+    assertStableFrame();
   });
 
   it("renders ENS previews when ENS data is returned", async () => {
-    fetchLinkPreview.mockResolvedValue({ type: "ens.name", name: "vitalik.eth" });
+    fetchLinkPreview.mockResolvedValue({
+      type: "ens.name",
+      name: "vitalik.eth",
+    });
 
     render(
       <LinkPreviewCard
@@ -109,10 +139,31 @@ describe("LinkPreviewCard", () => {
 
     await waitFor(() => {
       expect(mockEnsPreviewCard).toHaveBeenCalledWith(
-        expect.objectContaining({ preview: expect.objectContaining({ type: "ens.name" }) })
+        expect.objectContaining({
+          preview: expect.objectContaining({ type: "ens.name" }),
+        })
       );
     });
 
     expect(screen.queryByTestId("fallback")).toBeNull();
+    assertStableFrame();
+  });
+
+  it("does not enforce chat stable frame for home variant", async () => {
+    fetchLinkPreview.mockResolvedValue({});
+
+    render(
+      <LinkPreviewCard
+        href="https://example.com/article"
+        variant="home"
+        renderFallback={() => <div data-testid="fallback">fallback</div>}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("fallback")).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId("link-preview-card-stable-frame")).toBeNull();
   });
 });
diff --git a/__tests__/components/waves/OpenGraphPreview.test.tsx b/__tests__/components/waves/OpenGraphPreview.test.tsx
index c24221c82c..9a4a5b5730 100644
--- a/__tests__/components/waves/OpenGraphPreview.test.tsx
+++ b/__tests__/components/waves/OpenGraphPreview.test.tsx
@@ -1,21 +1,24 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
+import { render, screen } from "@testing-library/react";
+import React from "react";
 
-import OpenGraphPreview from '@/components/waves/OpenGraphPreview';
+import OpenGraphPreview from "@/components/waves/OpenGraphPreview";
 
-jest.mock('next/link', () => ({
+jest.mock("next/link", () => ({
   __esModule: true,
   default: ({ href, children, ...rest }: any) => (
-    <a href={typeof href === 'string' ? href : href?.pathname ?? ''} {...rest}>
+    <a
+      href={typeof href === "string" ? href : (href?.pathname ?? "")}
+      {...rest}
+    >
       {children}
     </a>
   ),
 }));
 
-jest.mock('next/image', () => ({
+jest.mock("next/image", () => ({
   __esModule: true,
   default: function MockNextImage({
-    alt = '',
+    alt = "",
     unoptimized: _unoptimized,
     fill: _fill,
     ...rest
@@ -24,125 +27,144 @@ jest.mock('next/image', () => ({
   },
 }));
 
-jest.mock('@/helpers/Helpers', () => ({
-  removeBaseEndpoint: jest.fn((url: string) => url.replace('https://example.com', '')),
+jest.mock("@/helpers/Helpers", () => ({
+  removeBaseEndpoint: jest.fn((url: string) =>
+    url.replace("https://example.com", "")
+  ),
 }));
 
-jest.mock('@/components/waves/ChatItemHrefButtons', () => ({
+jest.mock("@/components/waves/ChatItemHrefButtons", () => ({
   __esModule: true,
   default: function MockChatItemHrefButtons(props: any) {
     return (
-      <div data-testid="href-buttons">{props.relativeHref ?? 'undefined'}</div>
+      <div data-testid="href-buttons">{props.relativeHref ?? "undefined"}</div>
     );
   },
 }));
 
-const { removeBaseEndpoint } = require('@/helpers/Helpers');
+const { removeBaseEndpoint } = require("@/helpers/Helpers");
 
-describe('OpenGraphPreview', () => {
+describe("OpenGraphPreview", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders loading skeleton when preview is undefined', () => {
-    (removeBaseEndpoint as jest.Mock).mockReturnValue('/article');
+  it("renders loading skeleton when preview is undefined", () => {
+    (removeBaseEndpoint as jest.Mock).mockReturnValue("/article");
 
     render(<OpenGraphPreview href="https://example.com/article" />);
 
-    expect(screen.getByTestId('og-preview-skeleton')).toBeInTheDocument();
-    expect(screen.getByTestId('href-buttons')).toHaveTextContent('/article');
-    expect(removeBaseEndpoint).toHaveBeenCalledWith('https://example.com/article');
+    const skeleton = screen.getByTestId("og-preview-skeleton");
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton.parentElement).toHaveClass("tw-h-full");
+    expect(screen.getByTestId("href-buttons")).toHaveTextContent("/article");
+    expect(removeBaseEndpoint).toHaveBeenCalledWith(
+      "https://example.com/article"
+    );
   });
 
-  it('renders fallback when preview is unavailable', () => {
-    (removeBaseEndpoint as jest.Mock).mockReturnValue('/article');
+  it("renders fallback when preview is unavailable", () => {
+    (removeBaseEndpoint as jest.Mock).mockReturnValue("/article");
 
-    render(<OpenGraphPreview href="https://example.com/article" preview={null} />);
+    render(
+      <OpenGraphPreview href="https://example.com/article" preview={null} />
+    );
 
-    expect(screen.getByTestId('og-preview-unavailable')).toBeInTheDocument();
-    const link = screen.getByRole('link', { name: 'example.com' });
-    expect(link).toHaveAttribute('href', '/article');
-    expect(link).not.toHaveAttribute('target');
-    expect(screen.getByTestId('href-buttons')).toHaveTextContent('/article');
+    const unavailable = screen.getByTestId("og-preview-unavailable");
+    expect(unavailable).toBeInTheDocument();
+    expect(unavailable).toHaveClass("tw-h-full");
+    const link = screen.getByRole("link", { name: "example.com" });
+    expect(link).toHaveAttribute("href", "/article");
+    expect(link).not.toHaveAttribute("target");
+    expect(screen.getByTestId("href-buttons")).toHaveTextContent("/article");
   });
 
-  it('renders preview details when data is provided', () => {
-    (removeBaseEndpoint as jest.Mock).mockReturnValue('/article');
+  it("renders preview details when data is provided", () => {
+    (removeBaseEndpoint as jest.Mock).mockReturnValue("/article");
 
     render(
       <OpenGraphPreview
         href="https://example.com/article"
         preview={{
-          title: 'Example Title',
-          description: 'An example description',
-          siteName: 'Example.com',
-          image: 'https://cdn.example.com/preview.png',
+          title: "Example Title",
+          description: "An example description",
+          siteName: "Example.com",
+          image: "https://cdn.example.com/preview.png",
         }}
       />
     );
 
-    expect(screen.getByTestId('og-preview-card')).toBeInTheDocument();
-    expect(screen.getByText('Example.com')).toBeInTheDocument();
-    const titleLinks = screen.getAllByRole('link', { name: 'Example Title' });
+    const card = screen.getByTestId("og-preview-card");
+    expect(card).toBeInTheDocument();
+    expect(card).toHaveClass("tw-h-full");
+    expect(screen.getByText("Example.com")).toBeInTheDocument();
+    const titleLinks = screen.getAllByRole("link", { name: "Example Title" });
     expect(titleLinks).toHaveLength(2);
     const titleLink = titleLinks[1];
-    expect(titleLink).toHaveAttribute('href', '/article');
-    expect(titleLink).not.toHaveAttribute('target');
-    expect(screen.getByAltText('Example Title')).toHaveAttribute('src', 'https://cdn.example.com/preview.png');
-    expect(screen.getByText('An example description')).toBeInTheDocument();
-    expect(screen.getByTestId('href-buttons')).toHaveTextContent('/article');
+    expect(titleLink).toHaveAttribute("href", "/article");
+    expect(titleLink).not.toHaveAttribute("target");
+    const image = screen.getByAltText("Example Title");
+    expect(image).toHaveAttribute("src", "https://cdn.example.com/preview.png");
+    expect(image.parentElement).toHaveClass("tw-aspect-[16/9]");
+    expect(screen.getByText("An example description")).toBeInTheDocument();
+    expect(screen.getByTestId("href-buttons")).toHaveTextContent("/article");
   });
 
-  it('handles external links and image arrays', () => {
-    (removeBaseEndpoint as jest.Mock).mockReturnValue('https://othersite.com/post');
+  it("handles external links and image arrays", () => {
+    (removeBaseEndpoint as jest.Mock).mockReturnValue(
+      "https://othersite.com/post"
+    );
 
     render(
       <OpenGraphPreview
         href="https://othersite.com/post"
         preview={{
-          images: [{ url: 'https://cdn.othersite.com/img.jpg' }],
-          description: 'External link description',
+          images: [{ url: "https://cdn.othersite.com/img.jpg" }],
+          description: "External link description",
         }}
       />
     );
 
-    const card = screen.getByTestId('og-preview-card');
+    const card = screen.getByTestId("og-preview-card");
     expect(card).toBeInTheDocument();
 
-    const links = screen.getAllByRole('link');
+    const links = screen.getAllByRole("link");
     links.forEach((link) => {
-      expect(link).toHaveAttribute('href', 'https://othersite.com/post');
-      expect(link).toHaveAttribute('target', '_blank');
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+      expect(link).toHaveAttribute("href", "https://othersite.com/post");
+      expect(link).toHaveAttribute("target", "_blank");
+      expect(link).toHaveAttribute("rel", "noopener noreferrer");
     });
 
-    expect(screen.getByAltText('othersite.com')).toHaveAttribute('src', 'https://cdn.othersite.com/img.jpg');
-    expect(screen.getByTestId('href-buttons')).toHaveTextContent('undefined');
+    expect(screen.getByAltText("othersite.com")).toHaveAttribute(
+      "src",
+      "https://cdn.othersite.com/img.jpg"
+    );
+    expect(screen.getByTestId("href-buttons")).toHaveTextContent("undefined");
   });
 
-  it('uses secureUrl fields when provided', () => {
-    (removeBaseEndpoint as jest.Mock).mockReturnValue('/article');
+  it("uses secureUrl fields when provided", () => {
+    (removeBaseEndpoint as jest.Mock).mockReturnValue("/article");
 
     render(
       <OpenGraphPreview
         href="https://example.com/article"
         preview={{
-          title: 'Secure Image',
-          image: { secureUrl: 'https://cdn.example.com/secure.png' },
+          title: "Secure Image",
+          image: { secureUrl: "https://cdn.example.com/secure.png" },
         }}
       />
     );
 
-    expect(screen.getByAltText('Secure Image')).toHaveAttribute(
-      'src',
-      'https://cdn.example.com/secure.png'
+    expect(screen.getByAltText("Secure Image")).toHaveAttribute(
+      "src",
+      "https://cdn.example.com/secure.png"
     );
   });
 
-  it('wraps long unbroken segments to keep layout consistent', () => {
-    (removeBaseEndpoint as jest.Mock).mockReturnValue('/article');
+  it("wraps long unbroken segments to keep layout consistent", () => {
+    (removeBaseEndpoint as jest.Mock).mockReturnValue("/article");
 
-    const longUrl = `https://example.com/${'a'.repeat(48)}`;
+    const longUrl = `https://example.com/${"a".repeat(48)}`;
 
     render(
       <OpenGraphPreview
@@ -154,8 +176,7 @@ describe('OpenGraphPreview', () => {
     );
 
     const wrappedSegment = screen.getByText(longUrl);
-    expect(wrappedSegment.tagName).toBe('SPAN');
-    expect(wrappedSegment).toHaveClass('tw-break-all');
+    expect(wrappedSegment.tagName).toBe("SPAN");
+    expect(wrappedSegment).toHaveClass("tw-break-all");
   });
-
 });
diff --git a/__tests__/components/waves/drops/WaveDropReply.test.tsx b/__tests__/components/waves/drops/WaveDropReply.test.tsx
index 88ffc087ee..4ae227686a 100644
--- a/__tests__/components/waves/drops/WaveDropReply.test.tsx
+++ b/__tests__/components/waves/drops/WaveDropReply.test.tsx
@@ -1,37 +1,87 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import WaveDropReply from '@/components/waves/drops/WaveDropReply';
+import { render, screen, within } from "@testing-library/react";
+import React from "react";
+import WaveDropReply from "@/components/waves/drops/WaveDropReply";
 
-jest.mock('@/components/waves/drops/DropLoading', () => () => <div data-testid="loading" />);
-jest.mock('@/components/waves/drops/DropNotFound', () => () => <div data-testid="not-found" />);
-jest.mock('@/components/waves/drops/ContentDisplay', () => () => <div data-testid="content" />);
+jest.mock("@/components/waves/drops/DropLoading", () => () => (
+  <div data-testid="loading" />
+));
+jest.mock("@/components/waves/drops/DropNotFound", () => () => (
+  <div data-testid="not-found" />
+));
+const mockContentDisplaySpy = jest.fn();
+jest.mock("@/components/waves/drops/ContentDisplay", () => (props: any) => {
+  mockContentDisplaySpy(props);
+  return <div data-testid="content" />;
+});
 
-const hookData: any = { drop: null, content: { segments: [] }, isLoading: false };
+const hookData: any = {
+  drop: null,
+  content: { segments: [] },
+  isLoading: false,
+};
 
-jest.mock('@/components/waves/drops/useDropContent', () => ({
+jest.mock("@/components/waves/drops/useDropContent", () => ({
   useDropContent: () => hookData,
 }));
 
-describe('WaveDropReply', () => {
-  const baseProps = { dropId: 'd', dropPartId: 1, maybeDrop: null, onReplyClick: jest.fn() };
+describe("WaveDropReply", () => {
+  const baseProps = {
+    dropId: "d",
+    dropPartId: 1,
+    maybeDrop: null,
+    onReplyClick: jest.fn(),
+  };
+
+  beforeEach(() => {
+    mockContentDisplaySpy.mockClear();
+  });
+
+  const expectFixedContainer = () => {
+    const container = screen.getByTestId("wave-drop-reply-fixed-container");
+    expect(container).toHaveClass("tw-h-[24px]");
+    expect(container).toHaveClass("tw-min-h-[24px]");
+    expect(container).toHaveClass("tw-max-h-[24px]");
+    expect(container).toHaveClass("tw-overflow-hidden");
+    return container;
+  };
 
-  it('shows loader when loading', () => {
+  it("shows loader when loading", () => {
     hookData.isLoading = true;
-    const { getByTestId } = render(<WaveDropReply {...baseProps} />);
-    expect(getByTestId('loading')).toBeInTheDocument();
+    render(<WaveDropReply {...baseProps} />);
+    const fixedContainer = expectFixedContainer();
+    expect(within(fixedContainer).getByTestId("loading")).toBeInTheDocument();
   });
 
-  it('shows not found when author missing', () => {
+  it("shows not found when author missing", () => {
     hookData.isLoading = false;
     hookData.drop = { author: { handle: null } } as any;
-    const { getByTestId } = render(<WaveDropReply {...baseProps} />);
-    expect(getByTestId('not-found')).toBeInTheDocument();
+    render(<WaveDropReply {...baseProps} />);
+    const fixedContainer = expectFixedContainer();
+    expect(within(fixedContainer).getByTestId("not-found")).toBeInTheDocument();
+  });
+
+  it("shows not found when drop is empty", () => {
+    hookData.isLoading = false;
+    hookData.drop = null;
+    render(<WaveDropReply {...baseProps} />);
+    const fixedContainer = expectFixedContainer();
+    expect(within(fixedContainer).getByTestId("not-found")).toBeInTheDocument();
   });
 
-  it('renders content when drop valid', () => {
-    hookData.drop = { author: { handle: 'alice', pfp: null }, serial_no: 1 } as any;
-    const { getByTestId } = render(<WaveDropReply {...baseProps} />);
-    expect(getByTestId('content')).toBeInTheDocument();
-    expect(screen.getByText('alice')).toBeInTheDocument();
+  it("renders content when drop valid", () => {
+    hookData.drop = {
+      author: { handle: "alice", pfp: null },
+      serial_no: 1,
+    } as any;
+    render(<WaveDropReply {...baseProps} />);
+    const fixedContainer = expectFixedContainer();
+    expect(within(fixedContainer).getByTestId("content")).toBeInTheDocument();
+    expect(screen.getByText("alice")).toBeInTheDocument();
+    expect(mockContentDisplaySpy).toHaveBeenCalled();
+    const lastCallProps =
+      mockContentDisplaySpy.mock.calls[
+        mockContentDisplaySpy.mock.calls.length - 1
+      ][0];
+    expect(lastCallProps.textClassName).not.toContain("tw-block");
   });
 });
diff --git a/components/drops/view/part/dropPartMarkdown/youtubePreview.tsx b/components/drops/view/part/dropPartMarkdown/youtubePreview.tsx
index d8bf11f916..8eecef7b97 100644
--- a/components/drops/view/part/dropPartMarkdown/youtubePreview.tsx
+++ b/components/drops/view/part/dropPartMarkdown/youtubePreview.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactElement } from "react";
 import Image from "next/image";
 import type { YoutubeOEmbedResponse } from "@/services/api/youtube";
 import { fetchYoutubePreview } from "@/services/api/youtube";
@@ -221,13 +221,24 @@ interface YoutubePreviewProps {
   readonly href: string;
 }
 
+type PreviewStatus = "loading" | "success" | "error" | "empty";
+
 type PreviewState = {
   readonly href: string;
+  readonly status: PreviewStatus;
   readonly preview: YoutubeOEmbedResponse | null;
-  readonly hasError: boolean;
   readonly showEmbed: boolean;
 };
 
+const YOUTUBE_STABLE_FRAME_CLASSES =
+  "tw-h-[13rem] tw-min-h-[13rem] tw-max-h-[13rem] tw-w-full md:tw-h-[15rem] md:tw-min-h-[15rem] md:tw-max-h-[15rem]";
+
+const YOUTUBE_CARD_CLASSES =
+  "tw-flex tw-h-full tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-lg";
+
+const YOUTUBE_META_CLASSES =
+  "tw-flex tw-h-11 tw-shrink-0 tw-flex-col tw-justify-center tw-gap-y-0.5 tw-overflow-hidden tw-border-0 tw-border-t tw-border-solid tw-border-iron-800 tw-bg-iron-900/95 tw-px-3";
+
 const YoutubePreview = ({ href }: YoutubePreviewProps) => {
   const linkInfo = useMemo(() => parseYoutubeLink(href), [href]);
   if (!linkInfo) {
@@ -238,21 +249,23 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
   const { hideActions } = useLinkPreviewContext();
   const [state, setState] = useState<PreviewState>(() => ({
     href,
+    status: "loading",
     preview: null,
-    hasError: false,
     showEmbed: false,
   }));
 
   const isCurrent = state.href === href;
+  const status: PreviewStatus = isCurrent ? state.status : "loading";
   const preview = isCurrent ? state.preview : null;
-  const hasError = isCurrent ? state.hasError : false;
   const showEmbed = isCurrent ? state.showEmbed : false;
+  const hasPreview = status === "success" && preview !== null;
+  const isLoading = status === "loading";
 
   const handleShowEmbed = () => {
     setState((prev) =>
       prev.href === href
         ? { ...prev, showEmbed: true }
-        : { href, preview: null, hasError: false, showEmbed: true }
+        : { href, status: "loading", preview: null, showEmbed: false }
     );
   };
 
@@ -277,8 +290,13 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
           if (!sanitizedHtml) {
             setState((prev) =>
               prev.href === href
-                ? { ...prev, preview: null, hasError: true, showEmbed: false }
-                : { href, preview: null, hasError: true, showEmbed: false }
+                ? {
+                    ...prev,
+                    status: "error",
+                    preview: null,
+                    showEmbed: false,
+                  }
+                : { href, status: "error", preview: null, showEmbed: false }
             );
             return;
           }
@@ -290,11 +308,11 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
 
           setState((prev) =>
             prev.href === href
-              ? { ...prev, preview: normalizedPreview, hasError: false }
+              ? { ...prev, status: "success", preview: normalizedPreview }
               : {
                   href,
+                  status: "success",
                   preview: normalizedPreview,
-                  hasError: false,
                   showEmbed: false,
                 }
           );
@@ -303,8 +321,13 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
 
         setState((prev) =>
           prev.href === href
-            ? { ...prev, preview: null, hasError: true, showEmbed: false }
-            : { href, preview: null, hasError: true, showEmbed: false }
+            ? {
+                ...prev,
+                status: "empty",
+                preview: null,
+                showEmbed: false,
+              }
+            : { href, status: "empty", preview: null, showEmbed: false }
         );
       } catch (error) {
         if (!isActive) {
@@ -317,8 +340,13 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
 
         setState((prev) =>
           prev.href === href
-            ? { ...prev, preview: null, hasError: true, showEmbed: false }
-            : { href, preview: null, hasError: true, showEmbed: false }
+            ? {
+                ...prev,
+                status: "error",
+                preview: null,
+                showEmbed: false,
+              }
+            : { href, status: "error", preview: null, showEmbed: false }
         );
       }
     };
@@ -331,79 +359,114 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
     };
   }, [href, videoId]);
 
-  if (hasError) {
-    throw new Error("Failed to load YouTube preview");
-  }
+  const card = (): ReactElement => {
+    if (isLoading) {
+      return (
+        <div className={`${YOUTUBE_CARD_CLASSES} tw-bg-iron-900`}>
+          <div className="tw-h-full tw-w-full tw-animate-pulse tw-bg-iron-800" />
+          <div className={YOUTUBE_META_CLASSES}>
+            <div className="tw-h-3 tw-w-4/5 tw-animate-pulse tw-rounded tw-bg-iron-700" />
+            <div className="tw-h-2.5 tw-w-1/2 tw-animate-pulse tw-rounded tw-bg-iron-700/80" />
+          </div>
+        </div>
+      );
+    }
+
+    if (hasPreview) {
+      const ariaLabel = preview.title
+        ? `Play YouTube video ${preview.title}`
+        : `Play YouTube video ${videoId}`;
+
+      return (
+        <div className={`${YOUTUBE_CARD_CLASSES} tw-bg-iron-900`}>
+          <div className="tw-relative tw-min-h-0 tw-flex-1 tw-overflow-hidden tw-bg-black">
+            {showEmbed ? (
+              <div
+                className="tw-h-full tw-w-full tw-bg-black"
+                data-testid="youtube-embed"
+                dangerouslySetInnerHTML={{ __html: preview.html }}
+              />
+            ) : (
+              <button
+                type="button"
+                className="tw-relative tw-h-full tw-w-full tw-cursor-pointer tw-border-0 tw-bg-transparent tw-p-0"
+                onClick={handleShowEmbed}
+                aria-label={ariaLabel}
+              >
+                <Image
+                  src={preview.thumbnail_url}
+                  alt={
+                    preview.title
+                      ? `YouTube thumbnail for ${preview.title}`
+                      : "YouTube video thumbnail"
+                  }
+                  fill
+                  sizes="100vw"
+                  className="tw-object-cover"
+                />
+                <div className="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-black/40">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    className="tw-h-12 tw-w-12 tw-text-white tw-opacity-90"
+                    aria-hidden="true"
+                  >
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                </div>
+              </button>
+            )}
+          </div>
+          <div className={YOUTUBE_META_CLASSES}>
+            <p className="tw-mb-0 tw-line-clamp-2 tw-text-sm tw-font-semibold tw-text-iron-100">
+              {preview.title || "YouTube video"}
+            </p>
+            <p className="tw-mb-0 tw-line-clamp-1 tw-text-xs tw-text-iron-400">
+              {preview.author_name ?? "YouTube"}
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    const fallbackMessage =
+      status === "error"
+        ? "Failed to load YouTube preview"
+        : "YouTube preview unavailable";
 
-  if (!preview) {
     return (
-      <div className="tw-flex tw-w-full tw-items-stretch tw-gap-x-1">
-        <div className="tw-min-w-0 tw-flex-1">
-          <div className="tw-aspect-video tw-w-full tw-animate-pulse tw-rounded-lg tw-bg-iron-800" />
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        data-testid="youtube-preview-fallback-link"
+        className={`${YOUTUBE_CARD_CLASSES} tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-no-underline tw-transition-colors tw-duration-200 hover:tw-border-iron-500 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-primary-400`}
+      >
+        <div className="tw-flex tw-min-h-0 tw-flex-1 tw-items-center tw-justify-center tw-px-4 tw-text-center">
+          <span className="tw-line-clamp-2 tw-text-sm tw-font-medium tw-text-iron-100">
+            {fallbackMessage}
+          </span>
         </div>
-        {!hideActions && <ChatItemHrefButtons href={href} />}
-      </div>
+        <div className={YOUTUBE_META_CLASSES}>
+          <span className="tw-line-clamp-1 tw-text-xs tw-font-medium tw-text-iron-300">
+            Open on YouTube
+          </span>
+          <span className="tw-line-clamp-1 tw-text-xs tw-text-iron-500">
+            {href}
+          </span>
+        </div>
+      </a>
     );
-  }
-
-  const ariaLabel = preview.title
-    ? `Play YouTube video ${preview.title}`
-    : `Play YouTube video ${videoId}`;
+  };
 
   return (
     <div className="tw-flex tw-w-full tw-items-stretch tw-gap-x-1">
-      <div className="tw-min-w-0 tw-flex-1">
-        <div className="tw-relative tw-overflow-hidden tw-rounded-lg tw-bg-black">
-          {showEmbed ? (
-            <div
-              className="tw-relative tw-aspect-video tw-w-full tw-bg-black"
-              data-testid="youtube-embed"
-              dangerouslySetInnerHTML={{ __html: preview.html }}
-            />
-          ) : (
-            <button
-              type="button"
-              className="tw-relative tw-aspect-video tw-w-full tw-cursor-pointer tw-border-0 tw-bg-transparent tw-p-0"
-              onClick={handleShowEmbed}
-              aria-label={ariaLabel}
-            >
-              <Image
-                src={preview.thumbnail_url}
-                alt={
-                  preview.title
-                    ? `YouTube thumbnail for ${preview.title}`
-                    : "YouTube video thumbnail"
-                }
-                fill
-                sizes="100vw"
-                className="tw-object-cover"
-              />
-              <div className="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-black/40">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  className="tw-h-12 tw-w-12 tw-text-white tw-opacity-90"
-                  aria-hidden="true"
-                >
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-              </div>
-            </button>
-          )}
-        </div>
-        <div className="tw-mt-2 tw-space-y-1">
-          {preview.title && (
-            <p className="tw-mb-0 tw-text-sm tw-font-semibold tw-text-iron-100">
-              {preview.title}
-            </p>
-          )}
-          {preview.author_name && (
-            <p className="tw-mb-0 tw-text-xs tw-text-iron-400">
-              {preview.author_name}
-            </p>
-          )}
-        </div>
+      <div
+        className={`tw-min-w-0 tw-flex-1 ${YOUTUBE_STABLE_FRAME_CLASSES}`}
+        data-testid="youtube-preview-stable-frame"
+      >
+        {card()}
       </div>
       {!hideActions && <ChatItemHrefButtons href={href} />}
     </div>
diff --git a/components/waves/LinkPreviewCard.tsx b/components/waves/LinkPreviewCard.tsx
index 9972e351bc..68b7d43dea 100644
--- a/components/waves/LinkPreviewCard.tsx
+++ b/components/waves/LinkPreviewCard.tsx
@@ -31,6 +31,9 @@ type PreviewState =
     }
   | { readonly type: "ens"; readonly href: string; readonly data: EnsPreview };
 
+const CHAT_STABLE_FRAME_CLASSES =
+  "tw-h-[10rem] tw-min-h-[10rem] tw-max-h-[10rem] tw-w-full md:tw-h-[11rem] md:tw-min-h-[11rem] md:tw-max-h-[11rem]";
+
 const toPreviewData = (
   response: Awaited<ReturnType<typeof fetchLinkPreview>>
 ): OpenGraphPreviewData => {
@@ -56,6 +59,7 @@ export default function LinkPreviewCard({
 }: LinkPreviewCardProps) {
   const contextVariant = useLinkPreviewVariant();
   const resolvedVariant = variant ?? contextVariant;
+  const shouldUseStableFrame = resolvedVariant === "chat";
   const [state, setState] = useState<PreviewState>(() => ({
     type: "loading",
     href,
@@ -95,58 +99,69 @@ export default function LinkPreviewCard({
   }, [href]);
 
   const isCurrent = state.href === href;
+  let content: ReactElement;
 
   if (isCurrent && state.type === "fallback") {
     const fallbackContent = renderFallback();
-
-    return (
+    content = (
       <LinkPreviewCardLayout href={href} variant={resolvedVariant}>
         <div
           className={
             resolvedVariant === "home"
               ? "tw-relative tw-h-full tw-w-full tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/10 tw-bg-black/30 tw-p-4"
-              : "tw-w-full tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4"
+              : "tw-h-full tw-min-h-0 tw-w-full tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4"
           }
         >
-          <div className="tw-[overflow-wrap:anywhere] tw-flex tw-h-full tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-overflow-hidden tw-break-words">
+          <div className="tw-[overflow-wrap:anywhere] tw-flex tw-h-full tw-min-h-0 tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-overflow-y-auto tw-break-words">
             {fallbackContent}
           </div>
         </div>
       </LinkPreviewCardLayout>
     );
-  }
-
-  if (isCurrent && state.type === "success") {
-    return (
+  } else if (isCurrent && state.type === "success") {
+    content = (
       <OpenGraphPreview
         href={href}
         preview={state.data}
         variant={resolvedVariant}
       />
     );
-  }
-
-  if (isCurrent && state.type === "ens") {
-    return (
+  } else if (isCurrent && state.type === "ens") {
+    content = (
       <LinkPreviewCardLayout href={href} variant={resolvedVariant}>
         <div
           className={
             resolvedVariant === "home"
               ? "tw-relative tw-h-full tw-w-full tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-white/10 tw-bg-black/30 tw-p-4"
-              : "tw-w-full tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4"
+              : "tw-h-full tw-min-h-0 tw-w-full tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4"
           }
         >
-          <EnsPreviewCard preview={state.data} />
+          <div className="tw-h-full tw-min-h-0 tw-overflow-y-auto">
+            <EnsPreviewCard preview={state.data} />
+          </div>
         </div>
       </LinkPreviewCardLayout>
     );
+  } else {
+    content = (
+      <OpenGraphPreview
+        href={href}
+        preview={undefined}
+        variant={resolvedVariant}
+      />
+    );
+  }
+
+  if (!shouldUseStableFrame) {
+    return content;
   }
 
   return (
-    <OpenGraphPreview
-      href={href}
-      preview={undefined}
-      variant={resolvedVariant}
-    />
+    <div
+      className={CHAT_STABLE_FRAME_CLASSES}
+      data-testid="link-preview-card-stable-frame"
+    >
+      {content}
+    </div>
   );
 }
diff --git a/components/waves/OpenGraphPreview.tsx b/components/waves/OpenGraphPreview.tsx
index b4cdcd348f..15aeef2118 100644
--- a/components/waves/OpenGraphPreview.tsx
+++ b/components/waves/OpenGraphPreview.tsx
@@ -256,8 +256,8 @@ export function LinkPreviewCardLayout({
   }
 
   return (
-    <div className="tw-flex tw-w-full tw-min-w-0 tw-max-w-full tw-items-stretch tw-gap-x-1">
-      <div className="tw-min-w-0 tw-max-w-full tw-flex-1 tw-overflow-hidden focus-within:tw-overflow-visible">
+    <div className="tw-flex tw-h-full tw-w-full tw-min-w-0 tw-max-w-full tw-items-stretch tw-gap-x-1">
+      <div className="tw-h-full tw-min-h-0 tw-min-w-0 tw-max-w-full tw-flex-1 tw-overflow-hidden focus-within:tw-overflow-visible">
         {children}
       </div>
       <ChatItemHrefButtons href={href} relativeHref={relativeHref} />
@@ -313,12 +313,12 @@ export default function OpenGraphPreview({
 
     return (
       <LinkPreviewCardLayout href={href} variant={resolvedVariant}>
-        <div className="tw-w-full tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4">
+        <div className="tw-h-full tw-min-h-0 tw-w-full tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4">
           <div
-            className="tw-flex tw-animate-pulse tw-flex-col tw-gap-y-3"
+            className="tw-flex tw-h-full tw-min-h-0 tw-animate-pulse tw-flex-col tw-justify-end tw-gap-y-3"
             data-testid="og-preview-skeleton"
           >
-            <div className="tw-w-full tw-rounded-lg tw-bg-iron-800/60" />
+            <div className="tw-h-16 tw-w-full tw-flex-shrink-0 tw-rounded-lg tw-bg-iron-800/60" />
             <div className="tw-h-4 tw-w-3/4 tw-rounded tw-bg-iron-800/40" />
             <div className="tw-h-3 tw-w-full tw-rounded tw-bg-iron-800/30" />
             <div className="tw-h-3 tw-w-2/3 tw-rounded tw-bg-iron-800/20" />
@@ -363,10 +363,10 @@ export default function OpenGraphPreview({
     return (
       <LinkPreviewCardLayout href={href} variant={resolvedVariant}>
         <div
-          className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-6"
+          className="tw-flex tw-h-full tw-min-h-0 tw-w-full tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-6"
           data-testid="og-preview-unavailable"
         >
-          <div className="tw-space-y-2 tw-text-center">
+          <div className="tw-max-h-full tw-space-y-2 tw-overflow-y-auto tw-text-center">
             <p className="tw-m-0 tw-text-sm tw-font-medium tw-text-iron-400">
               Link unavailable
             </p>
@@ -374,7 +374,7 @@ export default function OpenGraphPreview({
               href={effectiveHref}
               target={linkTarget}
               rel={linkRel}
-              className="tw-[overflow-wrap:anywhere] tw-break-words tw-text-sm tw-font-semibold tw-text-iron-100 tw-no-underline tw-transition tw-duration-200 hover:tw-text-white"
+              className="tw-[overflow-wrap:anywhere] tw-line-clamp-2 tw-block tw-break-words tw-text-sm tw-font-semibold tw-text-iron-100 tw-no-underline tw-transition tw-duration-200 hover:tw-text-white"
             >
               {wrapLongUnbrokenSegments(domain ?? href)}
             </Link>
@@ -392,7 +392,7 @@ export default function OpenGraphPreview({
           target={linkTarget}
           rel={linkRel}
           onClick={(e) => e.stopPropagation()}
-          className="tw-relative tw-block tw-h-full tw-w-full tw-min-h-0 tw-overflow-hidden tw-rounded-t-xl tw-border tw-border-solid tw-border-white/10 tw-bg-black/30 tw-no-underline"
+          className="tw-relative tw-block tw-h-full tw-min-h-0 tw-w-full tw-overflow-hidden tw-rounded-t-xl tw-border tw-border-solid tw-border-white/10 tw-bg-black/30 tw-no-underline"
           data-testid="og-preview-card"
         >
           {imageUrl && (
@@ -427,18 +427,18 @@ export default function OpenGraphPreview({
         </Link>
       ) : (
         <div
-          className="tw-w-full tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4"
+          className="tw-h-full tw-min-h-0 tw-w-full tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-p-4"
           data-testid="og-preview-card"
         >
-          <div className="tw-flex tw-flex-col tw-gap-4 md:tw-flex-row">
+          <div className="tw-flex tw-h-full tw-min-h-0 tw-flex-col tw-gap-3 md:tw-flex-row">
             {imageUrl && (
               <Link
                 href={effectiveHref}
                 target={linkTarget}
                 rel={linkRel}
-                className="tw-block md:tw-w-60 md:tw-flex-shrink-0"
+                className="tw-block tw-w-full tw-flex-shrink-0 md:tw-h-full md:tw-w-44"
               >
-                <div className="tw-overflow-hidden tw-rounded-lg tw-bg-iron-900/60">
+                <div className="tw-aspect-[16/9] tw-h-full tw-w-full tw-overflow-hidden tw-rounded-lg tw-bg-iron-900/60 md:tw-aspect-auto">
                   <Image
                     src={imageUrl}
                     alt={title ?? domain ?? "Link preview"}
@@ -452,9 +452,9 @@ export default function OpenGraphPreview({
                 </div>
               </Link>
             )}
-            <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-y-2">
+            <div className="tw-flex tw-min-h-0 tw-min-w-0 tw-flex-1 tw-flex-col tw-justify-center tw-gap-y-1.5 tw-overflow-hidden">
               {domain && (
-                <span className="tw-text-xs tw-font-medium tw-uppercase tw-tracking-wide tw-text-iron-400">
+                <span className="tw-line-clamp-1 tw-text-xs tw-font-medium tw-uppercase tw-tracking-wide tw-text-iron-400">
                   {wrapLongUnbrokenSegments(domain)}
                 </span>
               )}
@@ -462,12 +462,12 @@ export default function OpenGraphPreview({
                 href={effectiveHref}
                 target={linkTarget}
                 rel={linkRel}
-                className="tw-[overflow-wrap:anywhere] tw-break-words tw-text-lg tw-font-semibold tw-leading-snug tw-text-iron-100 tw-no-underline tw-transition tw-duration-200 hover:tw-text-white"
+                className="tw-[overflow-wrap:anywhere] tw-line-clamp-2 tw-block tw-break-words tw-text-base tw-font-semibold tw-leading-snug tw-text-iron-100 tw-no-underline tw-transition tw-duration-200 hover:tw-text-white"
               >
                 {wrapLongUnbrokenSegments(title ?? domain ?? href)}
               </Link>
               {description && (
-                <p className="tw-[overflow-wrap:anywhere] tw-m-0 tw-line-clamp-3 tw-whitespace-pre-line tw-break-words tw-text-sm tw-text-iron-300">
+                <p className="tw-[overflow-wrap:anywhere] tw-m-0 tw-line-clamp-2 tw-whitespace-pre-line tw-break-words tw-text-xs tw-text-iron-300">
                   {wrapLongUnbrokenSegments(description)}
                 </p>
               )}
diff --git a/components/waves/drops/WaveDropReply.tsx b/components/waves/drops/WaveDropReply.tsx
index 2ae439828c..d7681af0c0 100644
--- a/components/waves/drops/WaveDropReply.tsx
+++ b/components/waves/drops/WaveDropReply.tsx
@@ -25,6 +25,7 @@ export default function WaveDropReply({
   maybeDrop,
   onReplyClick,
 }: WaveDropReplyProps) {
+  const fixedReplyHeightClasses = "tw-h-[24px] tw-min-h-[24px] tw-max-h-[24px]";
   const { drop, content, isLoading } = useDropContent(
     dropId,
     dropPartId,
@@ -41,7 +42,7 @@ export default function WaveDropReply({
     }
 
     return (
-      <div className="tw-flex tw-gap-x-1.5">
+      <div className="tw-flex tw-w-full tw-min-w-0 tw-items-center tw-gap-x-1.5">
         <div className="tw-relative tw-z-10 tw-h-6 tw-w-6 tw-flex-shrink-0 tw-overflow-hidden tw-rounded-md tw-bg-iron-800">
           {drop.author.pfp ? (
             <Image
@@ -55,17 +56,19 @@ export default function WaveDropReply({
             <div className="tw-h-full tw-w-full tw-rounded-md tw-bg-iron-900 tw-ring-1 tw-ring-inset tw-ring-white/10" />
           )}
         </div>
-        <div className="tw-flex-1">
-          <p className="tw-mb-0 tw-flex xl:tw-pr-24">
+        <div className="tw-min-w-0 tw-flex-1">
+          <p className="tw-mb-0 tw-flex tw-min-w-0 tw-items-center xl:tw-pr-24">
             <Link
               href={`/${drop.author.handle}`}
-              className="tw-mr-1 tw-text-sm tw-font-medium tw-text-iron-200 tw-no-underline tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-500"
+              className="tw-mr-1 tw-flex-shrink-0 tw-text-sm tw-font-medium tw-text-iron-200 tw-no-underline tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-500"
             >
               {drop.author.handle}
             </Link>
             <ContentDisplay
               content={content}
               onClick={() => onReplyClick(drop.serial_no)}
+              className="tw-min-w-0 tw-flex-1 tw-overflow-hidden"
+              textClassName="tw-min-w-0 tw-overflow-hidden"
             />
           </p>
         </div>
@@ -80,7 +83,12 @@ export default function WaveDropReply({
         style={{ height: "calc(100% - 3px)" }}
       ></div>
       <div className="tw-ml-[52px] tw-flex tw-items-center tw-gap-x-1.5">
-        {renderDropContent()}
+        <div
+          data-testid="wave-drop-reply-fixed-container"
+          className={`${fixedReplyHeightClasses} tw-flex tw-w-full tw-items-center tw-overflow-hidden`}
+        >
+          {renderDropContent()}
+        </div>
       </div>
     </div>
   );