From 5744f04833a233ce84e7741e54d8c84d612a490d Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@umami.is>
Date: Mon, 15 Jun 2026 21:00:22 -0700
Subject: [PATCH] Reduce side nav height and unify replay modal corners

---
 src/app/(main)/SideNav.tsx                           |  4 ++--
 .../[websiteId]/replays/ReplayModal.module.css       | 12 +++++-------
 .../websites/[websiteId]/replays/ReplayModal.tsx     |  3 ++-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx
index 3f2b25390..cac1fa4cf 100644
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@@ -87,10 +87,10 @@ export function SideNav(props: any) {
       <Row
         alignItems="center"
         justifyContent="space-between"
-        height="60px"
+        minHeight="40px"
         style={{ flexShrink: 0 }}
       >
-        <Row paddingX="3" alignItems="center" justifyContent="space-between" flexGrow="1">
+        <Row padding="3" alignItems="center" justifyContent="space-between" flexGrow="1">
           {!isCollapsed && (
             <IconLabel icon={<Logo />}>
               <Text weight="bold">umami</Text>
diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css
index 8395f2337..627ea7140 100644
--- a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css
+++ b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css
@@ -1,11 +1,9 @@
+.modal,
+.sheet {
+  border-radius: 8px 8px 0 0;
+}
+
 .modal {
   width: min(calc(100dvw - 48px), 1320px);
   overflow: hidden;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.sheet {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx
index 37ab3881b..6078b4bbd 100644
--- a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx
+++ b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx
@@ -18,6 +18,7 @@ export function ReplayModal({ websiteId, replayId, className, ...props }: Replay
     updateParams,
   } = useNavigation();
   const activeReplayId = replayId || replay;
+  const modalClassName = [styles.modal, className].filter(Boolean).join(' ');
 
   const handleOpenChange = (isOpen: boolean) => {
     if (!isOpen) {
@@ -37,7 +38,7 @@ export function ReplayModal({ websiteId, replayId, className, ...props }: Replay
       {...props}
       placement="bottom"
       offset="80px"
-      className={[styles.modal, className].filter(Boolean).join(' ')}
+      className={modalClassName}
       isOpen={!!activeReplayId}
       onOpenChange={handleOpenChange}
       isDismissable