Fix dialogs not being scrollable

frontend/src/ui/components/AlertContent.tsx

@@ -24,7 +24,7 @@ export interface DialogProps {
   onAction?: () => void;
 }
 
-function DialogContent({
+function AlertContent({
   title,
   description,
   children,
@@ -71,4 +71,4 @@ function DialogContent({
   );
 }
 
-export default React.memo(DialogContent);
+export default React.memo(AlertContent);

frontend/src/ui/components/DialogContent.tsx

@@ -19,20 +19,27 @@ function DialogContent({
   title,
   description,
   children,
+  closeButton,
 }: React.PropsWithChildren<DialogProps>) {
   return (
     <DialogPrimitive.Portal>
       <DialogOverlay />
       <DialogContainer>
-        {title && <DialogTitle>{title}</DialogTitle>}
+        {title && (
+          <DialogTitle>
+            {title}
+
+            {closeButton && (
+              <DialogPrimitive.DialogClose asChild>
+                <IconButton>
+                  <Cross2Icon />
+                </IconButton>
+              </DialogPrimitive.DialogClose>
+            )}
+          </DialogTitle>
+        )}
         {description && <DialogDescription>{description}</DialogDescription>}
         {children}
-
-        <DialogPrimitive.DialogClose asChild>
-          <IconButton>
-            <Cross2Icon />
-          </IconButton>
-        </DialogPrimitive.DialogClose>
       </DialogContainer>
     </DialogPrimitive.Portal>
   );

frontend/src/ui/pages/BotCommands.tsx

@@ -190,7 +190,10 @@ function CommandDialog({
   const { t } = useTranslation();
 
   return (
-    <DialogContent title={t(`pages.botcommands.command-header-${kind}`)}>
+    <DialogContent
+      title={t(`pages.botcommands.command-header-${kind}`)}
+      closeButton={true}
+    >
       <form
         onSubmit={(e) => {
           if (!(e.target as HTMLFormElement).checkValidity()) {

frontend/src/ui/pages/BotTimers.tsx

@@ -201,7 +201,10 @@ function TimerDialog({
   const { t } = useTranslation();
 
   return (
-    <DialogContent title={t(`pages.bottimers.timer-header-${kind}`)}>
+    <DialogContent
+      title={t(`pages.bottimers.timer-header-${kind}`)}
+      closeButton={true}
+    >
       <form
         onSubmit={(e) => {
           if (!(e.target as HTMLFormElement).checkValidity()) {

frontend/src/ui/pages/LoyaltyQueue.tsx

@@ -180,7 +180,10 @@ function UserList() {
           setGivePointDialog({ ...givePointDialog, open: state })
         }
       >
-        <DialogContent title={t('pages.loyalty-queue.give-points-dialog')}>
+        <DialogContent
+          title={t('pages.loyalty-queue.give-points-dialog')}
+          closeButton={true}
+        >
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -231,7 +234,12 @@ function UserList() {
               <Button variation="primary" type="submit">
                 {t('form-actions.save')}
               </Button>
-              <Button type="button" onClick={() => setCurrentEntry(null)}>
+              <Button
+                type="button"
+                onClick={() =>
+                  setGivePointDialog({ ...givePointDialog, open: false })
+                }
+              >
                 {t('form-actions.cancel')}
               </Button>
             </DialogActions>
@@ -242,7 +250,10 @@ function UserList() {
         open={currentEntry !== null}
         onOpenChange={(state) => setCurrentEntry(state ? currentEntry : null)}
       >
-        <DialogContent title={t('pages.loyalty-queue.modify-balance-dialog')}>
+        <DialogContent
+          title={t('pages.loyalty-queue.modify-balance-dialog')}
+          closeButton={true}
+        >
           <form
             onSubmit={(e) => {
               e.preventDefault();

frontend/src/ui/theme/dialog.ts

@@ -38,6 +38,7 @@ export const DialogContainer = styled(DialogPrimitive.Content, {
   maxWidth: '600px',
   maxHeight: '85vh',
   padding: '1rem',
+  overflow: 'auto',
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
@@ -53,6 +54,9 @@ export const DialogTitle = styled(DialogPrimitive.Title, {
   marginBottom: '1.5rem',
   padding: '1rem',
   lineHeight: '1.25',
+  position: 'sticky',
+  top: '-1rem',
+  backgroundColor: '$gray2',
 });
 
 export const DialogDescription = styled(DialogPrimitive.Description, {
@@ -68,8 +72,11 @@ export const DialogActions = styled('div', {
   justifyContent: 'flex-end',
   borderTop: '1px solid $gray6',
   margin: '-1rem',
-  marginTop: '1.5rem',
+  marginTop: '2rem',
   padding: '1rem 1.5rem',
+  position: 'sticky',
+  backgroundColor: '$gray2',
+  bottom: '-1rem',
 });
 
 export const IconButton = styled('button', {