From bbd1d162f0e1ce7a17dbc7ae1234cc7cadb9e24f Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Tue, 22 Mar 2022 17:36:10 +0200
Subject: [PATCH] Fix styling issues

---
 components/Dialog.tsx     | 12 +++++-------
 components/Navigation.tsx |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index e01dd96..e652807 100644
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -18,7 +18,7 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {
   zIndex: 9999,
   backgroundColor: blackA.blackA9,
   position: "fixed",
-  // inset: 0,
+  inset: 0,
   top: 0,
   left: 0,
   right: 0,
@@ -51,7 +51,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
   },
   "&:focus": { outline: "none" },
   ".dark &": {
-    backgroundColor: "$mauve3",
+    backgroundColor: "$mauve5",
     boxShadow:
       "0px 10px 38px 0px rgba(0, 0, 0, 0.85), 0px 10px 20px 0px rgba(0, 0, 0, 0.6)",
   },
@@ -59,11 +59,9 @@ const StyledContent = styled(DialogPrimitive.Content, {
 
 const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
   return (
-    <>
-      <StyledOverlay>
-        <StyledContent>{children}</StyledContent>
-      </StyledOverlay>
-    </>
+    <StyledOverlay>
+      <StyledContent css={css}>{children}</StyledContent>
+    </StyledOverlay>
   );
 };
 
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 2de9856..e949669 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -128,7 +128,7 @@ const Navigation = () => {
                 </DialogTrigger>
                 <DialogContent
                   css={{
-                    maxWidth: "100%",
+                    maxWidth: "1080px",
                     width: "80vw",
                     height: "80%",
                     backgroundColor: "$mauve1 !important",