fix: make most big dialogs not vertically centered to avoid repositioning

fixes #26

frontend/src/ui/theme/dialog.ts

@@ -11,11 +11,16 @@ const overlayShow = keyframes({
   '100%': { opacity: 1 },
 });
 
-const contentShow = keyframes({
+const contentShowCentered = keyframes({
   '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },
   '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
 });
 
+const contentShowTop = keyframes({
+  '0%': { opacity: 0, transform: 'translate(-50%, -10%) scale(.96)' },
+  '100%': { opacity: 1, transform: 'translate(-50%, 0%) scale(1)' },
+});
+
 export const DialogOverlay = styled(DialogPrimitive.Overlay, {
   backgroundColor: '$blackA10',
   position: 'fixed',
@@ -25,24 +30,48 @@ export const DialogOverlay = styled(DialogPrimitive.Overlay, {
   },
 });
 
+const dialogPadding = '50px';
 export const DialogContainer = styled(DialogPrimitive.Content, {
   backgroundColor: '$gray2',
   borderRadius: '0.25rem',
   boxShadow:
     'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
   position: 'fixed',
-  top: '50%',
   left: '50%',
-  transform: 'translate(-50%, -50%)',
+  top: dialogPadding,
+  transform: 'translate(-50%, 0%)',
   width: '90vw',
   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)`,
-  },
   '&:focus': { outline: 'none' },
+  '@media (prefers-reduced-motion: no-preference)': {
+    animation: `${contentShowTop()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  },
+  variants: {
+    verticalPosition: {
+      centered: {
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+      },
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${contentShowCentered()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+      },
+    },
+    size: {
+      stretch: {
+        width: 'auto',
+        maxWidth: 'none',
+        maxHeight: 'none',
+        top: dialogPadding,
+        bottom: dialogPadding,
+        left: dialogPadding,
+        right: dialogPadding,
+        transform: 'none',
+      },
+    },
+  },
 });
 
 export const DialogTitle = styled(DialogPrimitive.Title, {