Override width for just this toast

element-hq · Jan 16, 2025 · 2c3896c · 2c3896c
1 parent 5bf0d2d
commit 2c3896c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png b/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png
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;

diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
@@ -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>

diff --git a/src/toasts/SetupEncryptionToast.ts b/src/toasts/SetupEncryptionToast.ts
@@ -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,