Override width for just this toast

element-hq · dbkr · Jan 16, 2025 · Dec 4, 2024 · Dec 4, 2024 · Dec 6, 2024
commit 2c3896cd6a5fc67d72aa1a490ab438634ed76dde
diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss
@@ -141,7 +141,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_Toast_description {
-            max-width: 366px;
+            max-width: 272px;
             overflow: hidden;
             text-overflow: ellipsis;
             margin: 4px 0 11px 0;

@@ -25,6 +25,9 @@ interface IPropsExtended extends IProps {
     SecondaryIcon?: ComponentType<React.SVGAttributes<SVGElement>>;
     destructive?: "primary" | "secondary";
     onSecondaryClick(): void;
+
+    // If set, this will override the max-width (of the description) making the toast wider or narrower than standard
+    overrideWidth?: string;
 }
 
 const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
@@ -37,12 +40,13 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     destructive,
     onPrimaryClick,
     onSecondaryClick,
+    overrideWidth,
 }) => {
     const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;
 
     return (
         <div>
-            <div className="mx_Toast_description">
+            <div className="mx_Toast_description" style={{ maxWidth: overrideWidth }}>
                 {description}
                 {detailContent}
             </div>

@@ -152,6 +152,7 @@ export const showToast = (kind: Kind): void => {
             onPrimaryClick: onAccept,
             secondaryLabel: getSecondaryButtonLabel(kind),
             onSecondaryClick: onReject,
+            overrideWidth: kind === Kind.KEY_STORAGE_OUT_OF_SYNC ? "366px" : undefined,
         },
         component: GenericToast,
         priority: kind === Kind.VERIFY_THIS_SESSION ? 95 : 40,

diff --git a/playwright/e2e/messages/messages.spec.ts b/playwright/e2e/messages/messages.spec.ts
                await page.goto(`#/room/${room.roomId}`);

                const msgTile = await sendMessage(page, "/me أضع بيضة *حرة النطاق*");
                await expect(msgTile).toMatchScreenshot(`emote-rich-rtl-${direction}displayname.png`);
            });

            test("should render an edited RTL message", async ({ page, user, app, room }) => {
	await page.goto(`#/room/${room.roomId}`);

	const msgTile = await sendMessage(page, "/me أضع بيضة حرة النطاق");
	await expect(msgTile).toMatchScreenshot(`emote-rich-rtl-${direction}displayname.png`);
Check failure on line 150 in playwright/e2e/messages/messages.spec.ts GitHub Actions / Run Tests [Chrome] 2/6 [Chrome] › messages/messages.spec.ts:146:17 › Message rendering › with ltr display name › should render a richtext RTL emote @screenshot 1) [Chrome] › messages/messages.spec.ts:146:17 › Message rendering › with ltr display name › should render a richtext RTL emote @screenshot Error: expect(locator).toHaveScreenshot(expected) 18 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/element-web/element-web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png Received: /home/runner/work/element-web/element-web/playwright/test-results/messages-messages-Message--8e9fa-render-a-richtext-RTL-emote-Chrome/emote-rich-rtl-ltrdisplayname-actual.png Diff: /home/runner/work/element-web/element-web/playwright/test-results/messages-messages-Message--8e9fa-render-a-richtext-RTL-emote-Chrome/emote-rich-rtl-ltrdisplayname-diff.png Call log: - expect.toHaveScreenshot(emote-rich-rtl-ltrdisplayname.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('.mx_EventTile_last') - locator resolved to <li tabindex="-1" aria-live="off" data-self="true" aria-atomic="true" data-layout="group" data-has-reply="false" data-event-id="$gQFayIbHdawFT_qea3fwAv_On4wr5GWhmQhvDtThNXU" data-scroll-tokens="$gQFayIbHdawFT_qea3fwAv_On4wr5GWhmQhvDtThNXU" class="mx_EventTile mx_EventTile_last mx_EventTile_lastInSection mx_EventTile_emote mx_EventTile_noBubble">…</li> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 18 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('.mx_EventTile_last') - locator resolved to <li tabindex="-1" aria-live="off" data-self="true" aria-atomic="true" data-layout="group" data-has-reply="false" data-event-id="$gQFayIbHdawFT_qea3fwAv_On4wr5GWhmQhvDtThNXU" data-scroll-tokens="$gQFayIbHdawFT_qea3fwAv_On4wr5GWhmQhvDtThNXU" class="mx_EventTile mx_EventTile_last mx_EventTile_lastInSection mx_EventTile_emote mx_EventTile_noBubble">…</li> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 18 pixels (ratio 0.01 of all image pixels) are different. 148 \| 149 \| const msgTile = await sendMessage(page, "/me أضع بيضة حرة النطاق"); > 150 \| await expect(msgTile).toMatchScreenshot(`emote-rich-rtl-${direction}displayname.png`); \| ^ 151 \| }); 152 \| 153 \| test("should render an edited RTL message", async ({ page, user, app, room }) => { at /home/runner/work/element-web/element-web/playwright/e2e/messages/messages.spec.ts:150:39 Check failure on line 150 in playwright/e2e/messages/messages.spec.ts GitHub Actions / Run Tests [Chrome] 2/6 [Chrome] › messages/messages.spec.ts:146:17 › Message rendering › with ltr display name › should render a richtext RTL emote @screenshot 1) [Chrome] › messages/messages.spec.ts:146:17 › Message rendering › with ltr display name › should render a richtext RTL emote @screenshot Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(locator).toHaveScreenshot(expected) 18 pixels (ratio 0.01 of all image pixels) are different. Expected: /home/runner/work/element-web/element-web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png Received: /home/runner/work/element-web/element-web/playwright/test-results/messages-messages-Message--8e9fa-render-a-richtext-RTL-emote-Chrome-retry1/emote-rich-rtl-ltrdisplayname-actual.png Diff: /home/runner/work/element-web/element-web/playwright/test-results/messages-messages-Message--8e9fa-render-a-richtext-RTL-emote-Chrome-retry1/emote-rich-rtl-ltrdisplayname-diff.png Call log: - expect.toHaveScreenshot(emote-rich-rtl-ltrdisplayname.png) with timeout 5000ms - verifying given screenshot expectation - waiting for locator('.mx_EventTile_last') - locator resolved to <li tabindex="-1" aria-live="off" data-self="true" aria-atomic="true" data-layout="group" data-has-reply="false" data-event-id="$OdrbMRwMqMhbq6VnrcCLm2AMoQbepCBsUQAcPOaFJwo" data-scroll-tokens="$OdrbMRwMqMhbq6VnrcCLm2AMoQbepCBsUQAcPOaFJwo" class="mx_EventTile mx_EventTile_last mx_EventTile_lastInSection mx_EventTile_emote mx_EventTile_noBubble">…</li> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - 18 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - waiting for locator('.mx_EventTile_last') - locator resolved to <li tabindex="-1" aria-live="off" data-self="true" aria-atomic="true" data-layout="group" data-has-reply="false" data-event-id="$OdrbMRwMqMhbq6VnrcCLm2AMoQbepCBsUQAcPOaFJwo" data-scroll-tokens="$OdrbMRwMqMhbq6VnrcCLm2AMoQbepCBsUQAcPOaFJwo" class="mx_EventTile mx_EventTile_last mx_EventTile_lastInSection mx_EventTile_emote mx_EventTile_noBubble">…</li> - taking element screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - attempting scroll into view action - waiting for element to be stable - captured a stable screenshot - 18 pixels (ratio 0.01 of all image pixels) are different. 148 \| 149 \| const msgTile = await sendMessage(page, "/me أضع بيضة حرة النطاق"); > 150 \| await expect(msgTile).toMatchScreenshot(`emote-rich-rtl-${direction}displayname.png`); \| ^ 151 \| }); 152 \| 153 \| test("should render an edited RTL message", async ({ page, user, app, room }) => { at /home/runner/work/element-web/element-web/playwright/e2e/messages/messages.spec.ts:150:39
	});

	test("should render an edited RTL message", async ({ page, user, app, room }) => {