From 94545dc8c3dc6f961905f3a7d57b1379652d5da4 Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Wed, 4 Mar 2026 18:03:35 +0300
Subject: [PATCH] feat: add overlay class support to SheetContent and DayDetail
 components

- Introduced overlayClassName prop to SheetContent for customizable overlay styling.
- Updated DayDetail component to utilize the new overlayClassName for enhanced visual effects.
- Improved user experience by allowing dynamic styling of the overlay during component rendering.
---
 webapp-next/src/components/day-detail/DayDetail.tsx | 1 +
 webapp-next/src/components/ui/sheet.tsx             | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/webapp-next/src/components/day-detail/DayDetail.tsx b/webapp-next/src/components/day-detail/DayDetail.tsx
index 568cf4b..68662cd 100644
--- a/webapp-next/src/components/day-detail/DayDetail.tsx
+++ b/webapp-next/src/components/day-detail/DayDetail.tsx
@@ -207,6 +207,7 @@ export const DayDetail = React.forwardRef<DayDetailHandle, DayDetailProps>(
           "rounded-t-2xl pt-3 pb-[calc(24px+env(safe-area-inset-bottom,0px))] max-h-[70vh] bg-[var(--surface)]",
           className
         )}
+        overlayClassName="backdrop-blur-md"
         showCloseButton={false}
         onCloseAnimationEnd={handleClose}
       >
diff --git a/webapp-next/src/components/ui/sheet.tsx b/webapp-next/src/components/ui/sheet.tsx
index 350eb61..cece655 100644
--- a/webapp-next/src/components/ui/sheet.tsx
+++ b/webapp-next/src/components/ui/sheet.tsx
@@ -53,12 +53,15 @@ function SheetContent({
   showCloseButton = true,
   onCloseAnimationEnd,
   onAnimationEnd,
+  overlayClassName,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
   /** When provided, content and overlay stay mounted until close animation ends (forceMount). */
   onCloseAnimationEnd?: () => void
+  /** Optional class name applied to the overlay (e.g. backdrop-blur-md). */
+  overlayClassName?: string
 }) {
   const useForceMount = Boolean(onCloseAnimationEnd)
 
@@ -74,7 +77,10 @@ function SheetContent({
 
   return (
     <SheetPortal>
-      <SheetOverlay forceMount={useForceMount ? true : undefined} />
+      <SheetOverlay
+        forceMount={useForceMount ? true : undefined}
+        className={overlayClassName}
+      />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         forceMount={useForceMount ? true : undefined}