From 38e67ccc79f68fdf10faa3dd747c27419bffe318 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 25 Jun 2024 13:52:53 +0100
Subject: [PATCH] Use flex box properly and use description as intended
 (#15565)

---
 .../components/eventtype/AssignmentWarningDialog.tsx | 12 +++++++-----
 packages/ui/components/dialog/Dialog.tsx             |  6 +++---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/eventtype/AssignmentWarningDialog.tsx b/apps/web/components/eventtype/AssignmentWarningDialog.tsx
index 292018d220..32243b8825 100644
--- a/apps/web/components/eventtype/AssignmentWarningDialog.tsx
+++ b/apps/web/components/eventtype/AssignmentWarningDialog.tsx
@@ -12,6 +12,7 @@ interface AssignmentWarningDialogProps {
   leaveWithoutAssigningHosts: MutableRefObject<boolean>;
   id: number;
 }
+
 const AssignmentWarningDialog = (props: AssignmentWarningDialogProps) => {
   const { t } = useLocale();
   const {
@@ -24,11 +25,12 @@ const AssignmentWarningDialog = (props: AssignmentWarningDialogProps) => {
   const router = useRouter();
   return (
     <Dialog open={isOpenAssignmentWarnDialog} onOpenChange={setIsOpenAssignmentWarnDialog}>
-      <DialogContent title={t("leave_without_assigning_anyone")} Icon="circle-alert" type="confirmation">
-        <div className="text-subtle text-sm">
-          <p className="mt-3">{t("leave_without_adding_attendees")}</p>
-          <p className="mt-4">{t("no_availability_shown_to_bookers")}</p>
-        </div>
+      <DialogContent
+        title={t("leave_without_assigning_anyone")}
+        description={`${t("leave_without_adding_attendees")} ${t("no_availability_shown_to_bookers")}`}
+        Icon="circle-alert"
+        enableOverflow
+        type="confirmation">
         <DialogFooter className="mt-6">
           <Button
             onClick={(e) => {
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 488823ce42..49b29659a9 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -134,11 +134,11 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
           {type === "confirmation" && (
             <div className="flex">
               {icon && (
-                <div className="bg-emphasis mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full">
+                <div className="bg-emphasis flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full">
                   <Icon name={icon} className="text-emphasis h-4 w-4" />
                 </div>
               )}
-              <div className="w-full">
+              <div className="ml-4 flex-grow">
                 <DialogHeader title={title} subtitle={props.description} />
                 <div data-testid="dialog-confirmation">{children}</div>
               </div>
@@ -167,7 +167,7 @@ export function DialogHeader(props: DialogHeaderProps) {
         id="modal-title">
         {props.title}
       </h3>
-      {props.subtitle && <div className="text-subtle text-sm">{props.subtitle}</div>}
+      {props.subtitle && <p className="text-subtle text-sm">{props.subtitle}</p>}
     </div>
   );
 }