URL Preview further design iteration (#34054)

* Drop unused img

* Fix sizing in bubble layouts

* Update previews

* Update snaps

* fixup

* cleanup

* cleanup

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css

@@ -19,11 +19,7 @@ button.preview {
     background-position: center;
     border: none;
     padding: 0;
-    > img {
+
-        height: 200px;
-        width: 478px;
-        object-fit: cover;
-    }
     .playButton[data-kind="primary"] {
         padding: 0;
         width: 50px;
@@ -39,10 +35,11 @@ button.preview {
 }
 
 .container {
+    box-sizing: border-box;
     max-width: 100%;
     width: 478px;
     display: flex;
-    border: 1px solid var(--cpd-color-border-interactive-primary);
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
     border-radius: 12px; /* Get radius from cpd */
     flex-direction: column;
     color: var(--cpd-color-gray-900);

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx

@@ -10,7 +10,7 @@ import { fn } from "storybook/test";
 
 import imageFile from "../../../../../static/element.png";
 import tallImageFile from "../../../../../static/tallImage.png";
-import type { Meta, StoryFn } from "@storybook/react-vite";
+import type { Decorator, Meta, StoryFn } from "@storybook/react-vite";
 import {
     UrlPreviewGroupView,
     type UrlPreviewGroupViewActions,
@@ -42,6 +42,27 @@ const UrlPreviewGroupViewWrapperImpl = ({
 
 const UrlPreviewGroupViewWrapper = withViewDocs(UrlPreviewGroupViewWrapperImpl, UrlPreviewGroupView);
 
+/**
+ * Mimics the CSS context of .mx_EventTile_line (bubble layout) + TextualBodyView.root that
+ * surrounds UrlPreviewGroupView in the real app.
+ */
+const withBubbleLayoutContext: Decorator = (Story) => (
+    <div
+        style={{
+            display: "flex",
+            width: "fit-content",
+            maxWidth: "70%",
+            padding: "9px 60px 9px 9px",
+            background: "var(--cpd-color-bg-subtle-primary)",
+            borderRadius: "12px",
+        }}
+    >
+        <div style={{ overflowX: "hidden", overflowY: "hidden", maxWidth: "100%" }}>
+            <Story />
+        </div>
+    </div>
+);
+
 export default {
     title: "Timeline/Timeline Event/UrlPreviewGroupView",
     component: UrlPreviewGroupViewWrapper,
@@ -144,3 +165,26 @@ WithCompactView.args = {
 WithCompactView.globals = {
     eventDensity: "compact",
 };
+
+// Testing that within the bubble layout, we still scale appropriately.
+
+export const InBubbleLayout = Default.bind({});
+InBubbleLayout.args = {
+    ...Default.args,
+};
+InBubbleLayout.globals = { eventLayout: "bubble" };
+// Purely for testing that bubbles have not regressed
+InBubbleLayout.tags = ["!autodocs"];
+InBubbleLayout.decorators = [withBubbleLayoutContext];
+
+export const InBubbleLayoutNarrow = Default.bind({});
+InBubbleLayoutNarrow.args = {
+    ...InBubbleLayout.args,
+};
+InBubbleLayoutNarrow.globals = { ...InBubbleLayout.globals };
+InBubbleLayoutNarrow.decorators = [...InBubbleLayout.decorators];
+InBubbleLayoutNarrow.parameters = {
+    initialGlobals: {
+        viewport: { value: "mobile1", isRotated: false },
+    },
+};