From a4d6321d64f12ff1013181762d86a2034f2b91f6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 20 Jan 2023 21:49:55 -0800
Subject: [PATCH] Update DialogContent styles

---
 components/DialogContent/index.scss | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss
index 7bcd484a..5e64706f 100644
--- a/components/DialogContent/index.scss
+++ b/components/DialogContent/index.scss
@@ -1,4 +1,6 @@
 .Dialog {
+  // animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
+  //   openModalDesktop;
   position: fixed;
   background: none;
   border: 0;
@@ -14,8 +16,6 @@
   .DialogContent {
     $multiplier: 4;
 
-    animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
-      openModalDesktop;
     background: var(--dialog-bg);
     border-radius: $card-corner;
     box-sizing: border-box;
@@ -24,9 +24,12 @@
     gap: $unit * $multiplier;
     height: auto;
     min-width: $unit * 48;
-    min-height: $unit-12x;
+    // min-height: $unit-12x;
+    overflow-y: scroll;
+    max-height: 80vh;
     min-width: 580px;
-    padding: $unit * $multiplier;
+    // padding: $unit * $multiplier;
+    position: relative;
 
     a:hover {
       text-decoration: underline;
@@ -46,10 +49,15 @@
     }
 
     .DialogHeader {
+      background: var(--dialog-bg);
       display: flex;
       align-items: center;
       gap: $unit-2x;
       justify-content: space-between;
+      padding: $unit-3x ($unit * $multiplier);
+      position: sticky;
+      top: 0;
+      z-index: 10;
 
       .left {
         display: flex;
@@ -119,6 +127,16 @@
       flex-grow: 1;
     }
 
+    .DialogFooter {
+      align-items: flex-end;
+      background: var(--dialog-bg);
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
+      position: sticky;
+    }
+
     .actions {
       display: flex;
       justify-content: flex-end;