Use flex box properly and use description as intended (#15565)

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) => {

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>
   );
 }