Fix dialogs being blurry and not scrollable

This positions dialogs with a flexbox layout, which avoids the weird
bluriness due to `transform: translate` and allows the dialog to be
scrollable.

It also adds a story which has a long content to test the scrollability.

frontend/src/components/Dialog/Dialog.module.css

@@ -13,26 +13,36 @@
  * limitations under the License.
  */
 
-
-.overlay {
+.overlay,
+.scroll-container {
     position: fixed;
     inset: 0;
     background: rgba(3 12 27 / 52.8%);
 }
 
+.scroll-container {
+    overflow-y: auto;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100svh;
+}
+
 .dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(496px + var(--cpd-space-3x) * 2);
-    max-width: calc(100vw - var(--cpd-space-4x));
+    /* To position the close icon */
+    position: relative;
+    margin: var(--cpd-space-4x);
+    min-width: 0;
+    flex: 0 1 520px;
 }
 
 .body {
     display: flex;
     flex-direction: column;
-    gap: var(--cpd-space-8x);
+    gap: var(--cpd-space-4x);
     background: var(--cpd-color-bg-canvas-default);
 }
 
@@ -43,17 +53,13 @@
     margin-block-start: var(--cpd-space-4x);
 }
 
-.actions {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cpd-space-4x);
-}
-
 .dialog .body {
     padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
 }
 
 .dialog .title {
+    /* This adds a padding to the title to make sure it overflows correctly
+     * and not behind the close button */
     padding-inline-end: var(--cpd-space-7x);
 }
 

frontend/src/components/Dialog/Dialog.stories.tsx

@@ -54,3 +54,10 @@ export default meta;
 type Story = StoryObj<typeof Template>;
 
 export const Basic: Story = {};
+
+export const LongText: Story = {
+  args: {
+    description:
+      "Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.",
+  },
+};

frontend/src/components/Dialog/Dialog.tsx

@@ -83,20 +83,23 @@ export const Dialog: React.FC<Props> = ({
     <DialogRoot open={open} onOpenChange={onOpenChange}>
       {trigger && <Trigger asChild>{trigger}</Trigger>}
       <Portal>
-        <DialogOverlay className={styles.overlay} />
-        <DialogContent asChild>
-          <Glass className={styles.dialog}>
-            <div className={styles.body}>
-              {children}
+        {/* This container has a fixed position and scrolls over the Y axis if needed */}
+        <DialogOverlay className={styles.scrollContainer}>
+          {/* This container is used as a flexbox parent to center the dialog */}
+          <div className={styles.container}>
+            <Glass className={styles.dialog}>
+              <DialogContent className={styles.body}>
+                {children}
 
-              <Tooltip label={t("action.close")}>
-                <Close className={styles.close}>
-                  <IconClose />
-                </Close>
-              </Tooltip>
-            </div>
-          </Glass>
-        </DialogContent>
+                <Tooltip label={t("action.close")}>
+                  <Close className={styles.close}>
+                    <IconClose />
+                  </Close>
+                </Tooltip>
+              </DialogContent>
+            </Glass>
+          </div>
+        </DialogOverlay>
       </Portal>
     </DialogRoot>
   );
@@ -106,8 +109,4 @@ export const Title: React.FC<PropsWithChildren> = ({ children }) => (
   <DialogTitle className={styles.title}>{children}</DialogTitle>
 );
 
-export const Actions: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className={styles.actions}>{children}</div>
-);
-
 export { Description, Close } from "@radix-ui/react-dialog";

frontend/src/components/Dialog/index.ts

@@ -12,4 +12,4 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export { Close, Dialog, Title, Description, Actions } from "./Dialog";
+export { Close, Dialog, Title, Description } from "./Dialog";