Style shuffling

Half-Shot · Half-Shot · commit 0bd1d3d4e341 · 2026-02-24T13:41:47.000Z
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.module.css b/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.module.css
@@ -11,67 +11,70 @@
 }
 
 .container {
-    margin: var(--cpd-space-4x) 0 var(--cpd-space-4x) auto;
-    display: flex;
+    display: inline flex;
     column-gap: var(--cpd-space-1x);
     border-inline-start: 2px solid var(--cpd-color-bg-subtle-primary);
     border-radius: 2px;
     color: var(--cpd-color-gray-900);
+    min-width: 400px;
+
     &.compactLayout & {
-        margin-top: 6px;
-        margin-bottom: 6px;
+        margin-top: var(--cpd-space-3x);
+        margin-bottom: var(--cpd-space-3x);
     }
 
-    /* Exclude mx_LinkPreviewGroup_hide from wrapping */
-    .mx_LinkPreviewWidget_wrapImageCaption {
-        display: flex;
+    .wrapImageCaption {
+        display: inline-flex;
+        flex-direction: row;
         flex-wrap: wrap;
         row-gap: var(--cpd-space-2x);
         flex: 1;
+    }
 
-        .mx_LinkPreviewWidget_image,
-        .mx_LinkPreviewWidget_caption {
-            margin-inline-start: var(--cpd-space-4x);
-            min-width: 0; /* Prevent blowout */
-        }
-
-        .mx_LinkPreviewWidget_image {
-            flex: 0 0 100px;
-            text-align: center;
-            cursor: pointer;
+    .image,
+    .caption {
+        display: inline-flex;
+        flex-direction: column;
+        margin-inline-start: var(--cpd-space-4x);
+        min-width: 0; /* Prevent blowout */
+    }
 
-            /* Clear default <button> styles */
-            padding: 0;
-            border: none;
-            background: none;
-        }
+    .image {
+        /* Clear default <button> styles */
+        padding: 0;
+        border: none;
+        background: none;
+    }
 
-        .mx_LinkPreviewWidget_caption {
-            flex: 1;
-            overflow: hidden; /* cause it to wrap rather than clip */
-        }
+    .caption {
+        flex: 1;
+        overflow: hidden; /* cause it to wrap rather than clip */
+    }
 
-        .mx_LinkPreviewWidget_title,
-        .mx_LinkPreviewWidget_description {
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            white-space: normal;
-        }
+    .title,
+    .description {
+        display: inline-block;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        white-space: normal;
+    }
 
-        .mx_LinkPreviewWidget_title {
-            font-weight: bold;
-            -webkit-line-clamp: 2;
+    .title {
+        display: inline-block;
+        line-clamp: 2;
+        -webkit-line-clamp: 2;
+        margin: var(--cpd-space-1x) 0;
 
-            .mx_LinkPreviewWidget_siteName {
-                font-weight: normal;
-            }
+        > a {
+            font-weight: var(--cpd-font-weight-semibold);
+            text-decoration: none;
         }
+    }
 
-        .mx_LinkPreviewWidget_description {
-            margin-top: var(--cpd-space-2x);
-            word-wrap: break-word;
-            -webkit-line-clamp: 3;
-        }
+    .description {
+        margin: var(--cpd-space-1x) 0;
+        word-wrap: break-word;
+        line-clamp: 2;
+        -webkit-line-clamp: 3;
     }
 }
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.stories.tsx b/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.stories.tsx
@@ -17,7 +17,6 @@ export default {
     component: LinkPreview,
     tags: ["autodocs"],
     args: {
-        onHideClick: fn(),
         onImageClick: fn(),
     },
 } satisfies Meta<typeof LinkPreview>;
@@ -69,3 +68,16 @@ WithCompactLayout.args = {
         imageFull: imageFile,
     },
 };
+
+export const WithVeryLongText = Template.bind({});
+WithVeryLongText.args = {
+    title: "GitHub - element-hq/not-a-real-repo: A very very long PR title that should be rendered nicely",
+    description:
+        "This PR doesn't actually exist and neither does the repository. It might exist one day if we go into the business of making paradoxical repository names.",
+    link: "https://matrix.org",
+    siteName: "GitHub",
+    image: {
+        imageThumb: imageFile,
+        imageFull: imageFile,
+    },
+};
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.test.tsx b/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.test.tsx
@@ -11,6 +11,7 @@ import { describe, it, expect } from "vitest";
 import React from "react";
 
 import * as stories from "./LinkPreview.stories.tsx";
+import userEvent from "@testing-library/user-event";
 
 const { Default, WithCompactLayout, WithTooltip, Title, TitleAndDescription } = composeStories(stories);
 
@@ -27,8 +28,9 @@ describe("LinkPreview", () => {
         const { container } = render(<TitleAndDescription />);
         expect(container).toMatchSnapshot();
     });
-    it("renders a preview with a tooltip", () => {
-        const { container } = render(<WithTooltip />);
+    it("renders a preview with a tooltip", async () => {
+        const { container, getByText } = render(<WithTooltip />);
+        await userEvent.hover(getByText("A simple title"));
         expect(container).toMatchSnapshot();
     });
     it("renders a preview with a compact layout", () => {
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.tsx b/packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.tsx
@@ -6,16 +6,14 @@
  */
 
 import React, { type MouseEventHandler, type JSX, useCallback } from "react";
-import { IconButton, Tooltip } from "@vector-im/compound-web";
-import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import { Tooltip, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
 
 import { useI18n } from "../../utils/i18nContext";
 import styles from "./LinkPreview.module.css";
 import type { UrlPreviewViewSnapshotPreview } from "./types";
 
 export interface LinkPreviewActions {
-    onHideClick?: () => Promise<void>;
     onImageClick: () => void;
 }
 
@@ -25,13 +23,8 @@ export interface LinkPreviewAdditionalProps {
 
 export type LinkPreviewProps = UrlPreviewViewSnapshotPreview & LinkPreviewActions & LinkPreviewAdditionalProps;
 
-export function LinkPreview({ onHideClick, onImageClick, compactLayout, ...preview }: LinkPreviewProps): JSX.Element {
+export function LinkPreview({ onImageClick, compactLayout, ...preview }: LinkPreviewProps): JSX.Element {
     const { translate: _t } = useI18n();
-    const hideButton = onHideClick && (
-        <IconButton size="20px" onClick={() => onHideClick()} aria-label={_t("timeline|url_preview|close")}>
-            <CloseIcon />
-        </IconButton>
-    );
 
     const onImageClickHandler = useCallback<MouseEventHandler>(
         (ev) => {
@@ -52,7 +45,7 @@ export function LinkPreview({ onHideClick, onImageClick, compactLayout, ...previ
         img = (
             <button
                 aria-label={_t("timeline|url_preview|view_image")}
-                className={styles.mx_LinkPreviewWidget_image}
+                className={styles.image}
                 onClick={onImageClickHandler}
             >
                 <img className={styles.thumbnail} src={preview.image.imageThumb} alt="" />
@@ -67,28 +60,29 @@ export function LinkPreview({ onHideClick, onImageClick, compactLayout, ...previ
     );
     return (
         <div className={classNames(styles.container, compactLayout && "compactLayout")}>
-            <div className={styles.mx_LinkPreviewWidget_wrapImageCaption}>
+            <div className={styles.wrapImageCaption}>
                 {img}
-                <div className={styles.mx_LinkPreviewWidget_caption}>
-                    <div className={styles.mx_LinkPreviewWidget_title}>
+                <div className={styles.caption}>
+                    <Text type="body" size="md" className={styles.title}>
                         {preview.showTooltipOnLink ? (
                             <Tooltip label={new URL(preview.link, window.location.href).toString()}>{anchor}</Tooltip>
                         ) : (
                             anchor
                         )}
                         {preview.siteName && (
-                            <span className={styles.mx_LinkPreviewWidget_siteName}>{" - " + preview.siteName}</span>
+                            <Text as="span" size="md" weight="regular">
+                                {" - " + preview.siteName}
+                            </Text>
                         )}
-                    </div>
+                    </Text>
                     {preview.description && (
-                        <div
-                            className={styles.mx_LinkPreviewWidget_description}
+                        <Text
+                            className={styles.description}
                             dangerouslySetInnerHTML={{ __html: preview.description }}
                         />
                     )}
                 </div>
             </div>
-            {hideButton}
         </div>
     );
 }
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.module.css b/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.module.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.previewGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-4x);
+    .toggleButton {
+        margin-left: auto;
+        margin-right: auto;
+        text-decoration: none;
+        color: var(--cpd-color-icon-accent-primary);
+        font-weight: var(--cpd-font-weight-regular);
+    }
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: row;
+}
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.tsx b/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.tsx
@@ -6,12 +6,13 @@
  */
 
 import React, { type JSX } from "react";
-import { Button } from "@vector-im/compound-web";
-
+import { Button, IconButton } from "@vector-im/compound-web";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { useViewModel, type ViewModel } from "../../viewmodel";
 import { useI18n } from "../../utils/i18nContext";
 import type { UrlPreviewViewSnapshotPreview } from "./types";
 import { LinkPreview } from "./LinkPreview";
+import styles from "./UrlPreviewGroupView.module.css";
 
 export interface UrlPreviewGroupViewSnapshot {
     previews: Array<UrlPreviewViewSnapshotPreview>;
@@ -49,7 +50,7 @@ export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Eleme
     let toggleButton: JSX.Element | undefined;
     if (overPreviewLimit) {
         toggleButton = (
-            <Button kind="tertiary" size="sm" onClick={() => vm.onTogglePreviewLimit()}>
+            <Button className={styles.toggleButton} kind="tertiary" size="sm" onClick={() => vm.onTogglePreviewLimit()}>
                 {previewsLimited
                     ? _t("timeline|url_preview|show_n_more", { count: totalPreviewCount - previews.length })
                     : _t("action|collapse")}
@@ -58,17 +59,22 @@ export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Eleme
     }
 
     return (
-        <div>
-            {previews.map((preview, i) => (
-                <LinkPreview
-                    key={preview.link}
-                    compactLayout={compactLayout}
-                    onHideClick={i == 0 ? vm.onHideClick : undefined}
-                    onImageClick={() => vm.onImageClick(preview)}
-                    {...preview}
-                />
-            ))}
-            {toggleButton}
+        <div className={styles.wrapper}>
+            <div className={styles.previewGroup}>
+                {previews.map((preview, i) => (
+                    <LinkPreview
+                        key={preview.link}
+                        compactLayout={compactLayout}
+                        onHideClick={i == 0 ? vm.onHideClick : undefined}
+                        onImageClick={() => vm.onImageClick(preview)}
+                        {...preview}
+                    />
+                ))}
+                {toggleButton}
+            </div>
+            <IconButton size="20px" onClick={() => vm.onHideClick()} aria-label={_t("timeline|url_preview|close")}>
+                <CloseIcon />
+            </IconButton>
         </div>
     );
 }
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/__snapshots__/LinkPreview.test.tsx.snap b/packages/shared-components/src/event-tiles/UrlPreviewView/__snapshots__/LinkPreview.test.tsx.snap
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/__snapshots__/UrlPreviewGroupView.test.tsx.snap b/packages/shared-components/src/event-tiles/UrlPreviewView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
