diff --git a/apps/web/res/css/views/messages/_TextualEvent.pcss b/apps/web/res/css/views/messages/_TextualEvent.pcss index 3dbde24791..a1db28027f 100644 --- a/apps/web/res/css/views/messages/_TextualEvent.pcss +++ b/apps/web/res/css/views/messages/_TextualEvent.pcss @@ -7,12 +7,8 @@ Please see LICENSE files in the repository root for full details. */ .mx_TextualEvent { - overflow-y: hidden; - line-height: normal; - a { color: $accent; - cursor: pointer; } .mx_RoomView_searchResultsPanel & { diff --git a/apps/web/src/events/EventTileFactory.tsx b/apps/web/src/events/EventTileFactory.tsx index 0ba3cf7932..19dba1da0d 100644 --- a/apps/web/src/events/EventTileFactory.tsx +++ b/apps/web/src/events/EventTileFactory.tsx @@ -84,7 +84,7 @@ const LegacyCallEventFactory: Factory ; export const TextualEventFactory: Factory = (ref, props) => { const vm = new TextualEventViewModel(props); - return ; + return ; }; function EncryptionEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element { const cli = useMatrixClientContext(); diff --git a/packages/shared-components/.storybook/app-web-root.css b/packages/shared-components/.storybook/app-web-root.css new file mode 100644 index 0000000000..6745bafac1 --- /dev/null +++ b/packages/shared-components/.storybook/app-web-root.css @@ -0,0 +1,71 @@ +/* +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. +*/ + +/* + * Match the app/web shell baseline without importing app/web component styles. + * Shared component stories should inherit the same root typography and font + * feature settings as the real app, while still owning their component styling. + */ +@layer app-web { + :root[data-storybook-root-css="app-web"] { + [class^="cpd-theme"][class^="cpd-theme"] { + --cpd-font-family-sans: + "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, + "Noto Color Emoji"; + } + + body { + font: var(--cpd-font-body-md-regular) !important; + letter-spacing: var(--cpd-font-letter-spacing-body-md) !important; + font-feature-settings: + "kern" 1, + "liga" 1, + "calt" 1 !important; + + background-color: var(--cpd-color-bg-canvas-default); + color: var(--cpd-color-text-primary); + border: 0; + margin: 0; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + pre, + code { + font-family: + "Fira Code", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"; + font-size: 100% !important; + } + } + + /* Username color classes - these are defined in the main app's _common.pcss + but need to be available in Storybook for components that use colorClass */ + .mx_Username_color1 { + color: var(--cpd-color-text-decorative-1); + } + + .mx_Username_color2 { + color: var(--cpd-color-text-decorative-2); + } + + .mx_Username_color3 { + color: var(--cpd-color-text-decorative-3); + } + + .mx_Username_color4 { + color: var(--cpd-color-text-decorative-4); + } + + .mx_Username_color5 { + color: var(--cpd-color-text-decorative-5); + } + + .mx_Username_color6 { + color: var(--cpd-color-text-decorative-6); + } +} diff --git a/packages/shared-components/.storybook/preview.css b/packages/shared-components/.storybook/preview.css index eb1772154e..9f49585937 100644 --- a/packages/shared-components/.storybook/preview.css +++ b/packages/shared-components/.storybook/preview.css @@ -8,29 +8,3 @@ Please see LICENSE files in the repository root for full details. .docs-story { background: var(--cpd-color-bg-canvas-default); } - -/* Username color classes - these are defined in the main app's _common.pcss - but need to be available in Storybook for components that use colorClass */ -.mx_Username_color1 { - color: var(--cpd-color-text-decorative-1); -} - -.mx_Username_color2 { - color: var(--cpd-color-text-decorative-2); -} - -.mx_Username_color3 { - color: var(--cpd-color-text-decorative-3); -} - -.mx_Username_color4 { - color: var(--cpd-color-text-decorative-4); -} - -.mx_Username_color5 { - color: var(--cpd-color-text-decorative-5); -} - -.mx_Username_color6 { - color: var(--cpd-color-text-decorative-6); -} diff --git a/packages/shared-components/.storybook/preview.tsx b/packages/shared-components/.storybook/preview.tsx index 07a4bf2621..e821a74c45 100644 --- a/packages/shared-components/.storybook/preview.tsx +++ b/packages/shared-components/.storybook/preview.tsx @@ -12,6 +12,7 @@ import "@fontsource/inter/600.css"; import "@fontsource/inter/700.css"; import "./compound.css"; +import "./app-web-root.css"; import "./preview.css"; import React, { useLayoutEffect } from "react"; import { TooltipProvider } from "@vector-im/compound-web"; @@ -47,7 +48,7 @@ export const globalTypes = { icon: "component", title: "Event layout", items: [ - { title: "Group", value: "group" }, + { title: "Modern", value: "group" }, { title: "Bubble", value: "bubble" }, { title: "IRC", value: "irc" }, ], @@ -65,16 +66,47 @@ export const globalTypes = { ], }, }, + rootCss: { + name: "Root CSS", + description: "Global root CSS for component previews", + toolbar: { + icon: "paintbrush", + title: "Root CSS", + items: [ + { title: "Default", value: "storybook" }, + { title: "Element Web", value: "app-web" }, + ], + }, + }, initialGlobals: { - theme: "system", + theme: "light", language: "en", eventLayout: "group", eventDensity: "default", + rootCss: "storybook", }, } satisfies ArgTypes; const allThemesClasses = globalTypes.theme.toolbar.items.map(({ value }) => `cpd-theme-${value}`); +const RootCssSwitcher: React.FC<{ + rootCss: string; +}> = ({ rootCss }) => { + useLayoutEffect(() => { + if (rootCss === "app-web") { + document.documentElement.dataset.storybookRootCss = rootCss; + } else { + delete document.documentElement.dataset.storybookRootCss; + } + + return () => { + delete document.documentElement.dataset.storybookRootCss; + }; + }, [rootCss]); + + return null; +}; + const ThemeSwitcher: React.FC<{ theme: string; }> = ({ theme }) => { @@ -89,6 +121,15 @@ const ThemeSwitcher: React.FC<{ return null; }; +const withRootCss: Decorator = (Story, context) => { + return ( + <> + + + + ); +}; + const withThemeProvider: Decorator = (Story, context) => { return ( <> @@ -134,12 +175,13 @@ const withEventPresentationProvider: Decorator = (Story, context) => { const preview = { tags: ["autodocs", "snapshot"], initialGlobals: { - theme: "system", + rootCss: "storybook", + theme: "light", language: "en", eventLayout: "group", eventDensity: "default", }, - decorators: [withThemeProvider, withEventPresentationProvider, withTooltipProvider, withI18nProvider], + decorators: [withRootCss, withThemeProvider, withEventPresentationProvider, withTooltipProvider, withI18nProvider], parameters: { options: { storySort: { diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png index cbd93adc65..9a960d25bd 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/with-link-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/with-link-auto.png new file mode 100644 index 0000000000..59f07c05a3 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/with-link-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png index 494ff51eb4..354aa3a808 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png index 669e4f1ff3..d4ba70c7af 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png index 13bcb57c9a..21df7119bc 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png differ diff --git a/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.tsx b/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.tsx index 3d6f6935bf..fdc239a75b 100644 --- a/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.tsx +++ b/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.tsx @@ -37,3 +37,20 @@ export const EventPresentationProvider = EventPresentationContext.Provider; export function useEventPresentation(): EventPresentation { return useContext(EventPresentationContext); } + +/** Returns the current event presentation settings attributes. + * + * "data-event-layout": "group" | "bubble" | "irc" + * "data-event-density": "default" | "compact" + */ +export function useEventPresentationAttributes(): { + "data-event-layout": EventLayout; + "data-event-density": EventDensity; +} { + const { layout, density } = useEventPresentation(); + + return { + "data-event-layout": layout, + "data-event-density": density, + }; +} diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.module.css new file mode 100644 index 0000000000..8e74f81589 --- /dev/null +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.module.css @@ -0,0 +1,25 @@ +/* + * 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. + */ + +.textualEvent { + font-size: var(--cpd-font-size-body-sm); + line-height: normal; + + overflow-y: hidden; + color: var(--cpd-color-text-secondary); + + a { + cursor: pointer; + color: var(--cpd-color-text-action-accent); + } +} + +.textualEvent[data-event-layout="irc"] { + padding: 1px 0; /* add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo */ + display: inline-block; + line-height: 1.125rem; /* $font-18px equivalent of the legacy --irc-line-height */ +} diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx index bd6e76fef4..62a83b8819 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx @@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details. */ import { type Meta, type StoryObj } from "@storybook/react-vite"; +import React from "react"; import { TextualEventView as TextualEventComponent } from "./TextualEventView"; import { MockViewModel } from "../../../../../core/viewmodel/MockViewModel"; @@ -23,3 +24,16 @@ export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const WithLink: Story = { + args: { + vm: new MockViewModel({ + content: ( + <> + Dummy [🤒] textual event text + with link + + ), + }), + }, +}; diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx index 3a508df56b..6d7f5ce755 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx @@ -12,11 +12,16 @@ import { describe, it, expect } from "vitest"; import * as stories from "./TextualEventView.stories.tsx"; -const { Default } = composeStories(stories); +const { Default, WithLink } = composeStories(stories); describe("TextualEventView", () => { it("renders a textual event", () => { const { container } = render(); expect(container).toMatchSnapshot(); }); + + it("renders a textual event with link", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); }); diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx index f22c0e5edd..b9e9d1e5c9 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx @@ -6,15 +6,22 @@ Please see LICENSE files in the repository root for full details. */ import React, { type ReactNode, type JSX } from "react"; +import classNames from "classnames"; import { type ViewModel, useViewModel } from "../../../../../core/viewmodel"; +import styles from "./TextualEventView.module.css"; +import { useEventPresentationAttributes } from "../../../EventPresentation/EventPresentationContext"; export type TextualEventViewSnapshot = { content: string | ReactNode; }; export interface Props { + /** The view model for the tile error fallback. */ vm: ViewModel; + + /** Optional host-level class names. */ + className?: string; } /** @@ -23,7 +30,12 @@ export interface Props { * This view is used for simple informational timeline entries where the * content is already prepared by the view model. */ -export function TextualEventView({ vm }: Props): JSX.Element { +export function TextualEventView({ vm, className }: Readonly): JSX.Element { + const eventPresentationAttributes = useEventPresentationAttributes(); const snapshot = useViewModel(vm); - return
{snapshot.content}
; + return ( +
+ {snapshot.content} +
+ ); } diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap index 7f0a0ff90c..79ae9ad3ec 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap @@ -3,9 +3,30 @@ exports[`TextualEventView > renders a textual event 1`] = `
Dummy textual event text
`; + +exports[`TextualEventView > renders a textual event with link 1`] = ` +
+
+ + Dummy [🤒] textual event text + + + with link + +
+
+`; diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css index 3a18833f7c..7e0226ed4b 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css @@ -1,38 +1,42 @@ .tileErrorView { - color: var(--cpd-color-text-critical-primary); + font-size: var(--cpd-font-size-body-sm); + + color: var(--cpd-color-text-secondary); list-style: none; text-align: center; + + .line { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: var(--cpd-space-2x); + } + + .message { + padding: var(--cpd-space-1x) var(--cpd-space-4x); + } + + .viewSourceButton { + appearance: none; + padding: 0; + border: 0; + background: none; + color: var(--cpd-color-text-action-primary); + cursor: pointer; + font: inherit; + text-decoration: underline; + } + + .viewSourceButton:focus-visible { + outline: 2px solid var(--cpd-color-border-focused); + outline-offset: 2px; + border-radius: var(--cpd-space-1x); + } } -.line { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: var(--cpd-space-2x); -} - -.bubble .line { - flex-direction: column; -} - -.message { - padding: var(--cpd-space-1x) var(--cpd-space-4x); -} - -.viewSourceButton { - appearance: none; - padding: 0; - border: 0; - background: none; - color: var(--cpd-color-text-action-primary); - cursor: pointer; - font: inherit; - text-decoration: underline; -} - -.viewSourceButton:focus-visible { - outline: 2px solid var(--cpd-color-border-focused); - outline-offset: 2px; - border-radius: var(--cpd-space-1x); +.tileErrorView[data-event-layout="bubble"] { + .line { + flex-direction: column; + } } diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx index e7999477c4..db60b2ed4f 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx @@ -11,7 +11,6 @@ import { fn } from "storybook/test"; import type { Meta, StoryObj } from "@storybook/react-vite"; import { withViewDocs } from "../../../../../../.storybook/withViewDocs"; import { useMockedViewModel } from "../../../../../core/viewmodel"; -import { EventPresentationProvider } from "../../../EventPresentation"; import { TileErrorView, type TileErrorViewActions, type TileErrorViewSnapshot } from "./TileErrorView"; type WrapperProps = TileErrorViewSnapshot & @@ -59,13 +58,9 @@ type Story = StoryObj; export const Default: Story = {}; export const BubbleLayout: Story = { - decorators: [ - (Story): JSX.Element => ( - - - - ), - ], + globals: { + eventLayout: "bubble", + }, }; export const WithoutActions: Story = { diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx index 6c3b019af9..873669e415 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx @@ -10,8 +10,8 @@ import classNames from "classnames"; import { Button } from "@vector-im/compound-web"; import { type ViewModel, useViewModel } from "../../../../../core/viewmodel"; -import { useEventPresentation } from "../../../EventPresentation"; import styles from "./TileErrorView.module.css"; +import { useEventPresentationAttributes } from "../../../EventPresentation/EventPresentationContext"; /** Snapshot data for rendering an event tile error fallback. */ export interface TileErrorViewSnapshot { @@ -55,14 +55,11 @@ interface TileErrorViewProps { * actions when their labels are provided. */ export function TileErrorView({ vm, className }: Readonly): JSX.Element { - const { layout } = useEventPresentation(); + const eventPresentationAttributes = useEventPresentationAttributes(); const { message, eventType, bugReportCtaLabel, viewSourceCtaLabel } = useViewModel(vm); return ( -
  • +
  • {message} diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap index 61ebdbcc07..4d623a5d2b 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap @@ -4,8 +4,9 @@ exports[`TileErrorView > renders the bubble layout variant 1`] = `
    • renders the default tile error state 1`] = `
      • ( - - - - ), -]; +WithCompactView.globals = { + eventDensity: "compact", +}; diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx index 8d5eb5a481..7c931a9134 100644 --- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx @@ -12,10 +12,10 @@ import classNames from "classnames"; import { useViewModel, type ViewModel } from "../../../../core/viewmodel"; import { useI18n } from "../../../../core/i18n/i18nContext"; -import { useEventPresentation } from "../../EventPresentation"; import type { UrlPreview } from "./types"; import { LinkPreview } from "./LinkPreview"; import styles from "./UrlPreviewGroupView.module.css"; +import { useEventPresentationAttributes } from "../../EventPresentation/EventPresentationContext"; /** Snapshot data for rendering URL previews attached to an event. */ export interface UrlPreviewGroupViewSnapshot { @@ -62,7 +62,7 @@ export type UrlPreviewGroupViewModel = ViewModel -
        +
        +
        {previews.map((preview) => ( vm.onImageClick(preview)} {...preview} /> ))} diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap index 2b6fb99206..b5a80060c5 100644 --- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap +++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap @@ -4,6 +4,8 @@ exports[`UrlPreviewGroupView > renders a single preview 1`] = `
        renders multiple previews 1`] = `
        renders multiple previews which are hidden 1`] =
        renders with compact density 1`] = `