Style: container sizes

7-7-2 · May 30, 2024 · 14ee9e9 · 14ee9e9
1 parent 71ef7b7
commit 14ee9e9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/components/coffee/ScrollInducer.tsx b/src/components/coffee/ScrollInducer.tsx
@@ -40,10 +40,11 @@ const ScrollInducer = ({
 
 const Container = styled.div`
   height: 80px;
-  position: absolute;
+  position: sticky;
+  margin: 0 -20px;
   left: 0;
   right: 0;
-  bottom: 47px;
+  bottom: 0;
   background-image: linear-gradient(#f5f5f530, #e9e9e9df);
   opacity: 100;
   transition: opacity 0.5s ease;
@@ -57,6 +58,7 @@ const Default = css`
 
 const Text = styled.div`
   width: 100%;
+  position: absolute;
   margin-top: 40px;
   font-size: var(--font-sizes-sm);
   color: var(--colors-mid-grey);

diff --git a/src/pages/Page-Error.tsx b/src/pages/Page-Error.tsx
@@ -37,7 +37,9 @@ const Container = styled.div`
   max-width: 500px;
   min-width: 360px;
   width: 100vw;
-  height: 100vh;
+  height: calc(
+    100dvh - 50px - env(safe-area-inset-bottom) - env(safe-area-inset-top)
+  );
   padding: 0 20px 20px;
   margin-bottom: calc(env(safe-area-inset-bottom));
 `;