Reduce side nav height and unify replay modal corners

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>

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;
 }

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