From 6d97f81c3264f9a3b31fe15ee0e0adac7d8f1f5e Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Sat, 15 Jan 2022 11:19:16 +0100
Subject: [PATCH] Fix dialogs not being scrollable

---
 frontend/src/ui/components/AlertContent.tsx  |  4 ++--
 frontend/src/ui/components/DialogContent.tsx | 21 +++++++++++++-------
 frontend/src/ui/pages/BotCommands.tsx        |  5 ++++-
 frontend/src/ui/pages/BotTimers.tsx          |  5 ++++-
 frontend/src/ui/pages/LoyaltyQueue.tsx       | 17 +++++++++++++---
 frontend/src/ui/theme/dialog.ts              |  9 ++++++++-
 6 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ui/components/AlertContent.tsx b/frontend/src/ui/components/AlertContent.tsx
index d6dc235..79b4d01 100644
--- a/frontend/src/ui/components/AlertContent.tsx
+++ b/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);
diff --git a/frontend/src/ui/components/DialogContent.tsx b/frontend/src/ui/components/DialogContent.tsx
index 716e259..cb640a6 100644
--- a/frontend/src/ui/components/DialogContent.tsx
+++ b/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>
   );
diff --git a/frontend/src/ui/pages/BotCommands.tsx b/frontend/src/ui/pages/BotCommands.tsx
index 87112b8..b47304c 100644
--- a/frontend/src/ui/pages/BotCommands.tsx
+++ b/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()) {
diff --git a/frontend/src/ui/pages/BotTimers.tsx b/frontend/src/ui/pages/BotTimers.tsx
index c360cb5..4039f7c 100644
--- a/frontend/src/ui/pages/BotTimers.tsx
+++ b/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()) {
diff --git a/frontend/src/ui/pages/LoyaltyQueue.tsx b/frontend/src/ui/pages/LoyaltyQueue.tsx
index 7e84e7c..94cdba5 100644
--- a/frontend/src/ui/pages/LoyaltyQueue.tsx
+++ b/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();
diff --git a/frontend/src/ui/theme/dialog.ts b/frontend/src/ui/theme/dialog.ts
index f7281f1..ac342b9 100644
--- a/frontend/src/ui/theme/dialog.ts
+++ b/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', {