feat: Require use of a preset dialog size; adjust dialog sizing (#2684)

src/components/Dialog.tsx

@@ -19,7 +19,7 @@ const useRefState = <T,>() => {
 export const Dialog = (props: {
   children: React.ReactNode;
   className?: string;
-  maxWidth?: number;
+  small?: boolean;
   onCloseRequest(): void;
   title: React.ReactNode;
   autofocus?: boolean;
@@ -76,7 +76,7 @@ export const Dialog = (props: {
     <Modal
       className={clsx("Dialog", props.className)}
       labelledBy="dialog-title"
-      maxWidth={props.maxWidth}
+      maxWidth={props.small ? 550 : 800}
       onCloseRequest={props.onCloseRequest}
     >
       <Island padding={4} ref={setIslandNode}>

src/components/ErrorDialog.tsx

@@ -24,7 +24,7 @@ export const ErrorDialog = ({
     <>
       {modalIsShown && (
         <Dialog
-          maxWidth={500}
+          small
           onCloseRequest={handleClose}
           title={t("errorDialog.title")}
         >

src/components/ExportDialog.tsx

@@ -262,11 +262,7 @@ export const ExportDialog = ({
         ref={triggerButton}
       />
       {modalIsShown && (
-        <Dialog
-          maxWidth={800}
-          onCloseRequest={handleClose}
-          title={t("buttons.export")}
-        >
+        <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <ExportModal
             elements={elements}
             appState={appState}

src/components/PasteChartDialog.tsx

@@ -97,7 +97,7 @@ export const PasteChartDialog = ({
 
   return (
     <Dialog
-      maxWidth={500}
+      small
       onCloseRequest={handleClose}
       title={t("labels.pasteCharts")}
       className={"PasteChartDialog"}

src/components/ShortcutsDialog.tsx

@@ -130,11 +130,7 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
 
   return (
     <>
-      <Dialog
-        maxWidth={900}
-        onCloseRequest={handleClose}
-        title={t("shortcutsDialog.title")}
-      >
+      <Dialog onCloseRequest={handleClose} title={t("shortcutsDialog.title")}>
         <Columns>
           <Column>
             <ShortcutIsland caption={t("shortcutsDialog.shapes")}>

src/excalidraw-app/collab/RoomDialog.tsx

@@ -123,11 +123,7 @@ const RoomDialog = ({
     );
   };
   return (
-    <Dialog
-      maxWidth={800}
-      onCloseRequest={handleClose}
-      title={t("labels.createRoom")}
-    >
+    <Dialog small onCloseRequest={handleClose} title={t("labels.createRoom")}>
       {renderRoomDialog()}
     </Dialog>
   );