chore: fix Safari translucency issues [skip e2e]

packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx

@@ -40,13 +40,10 @@ const AlertDialog = ({
       />
       <div
         className={classNames(
-          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] px-6 py-5 shadow-xl md:w-auto',
+          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-6 py-5 shadow-xl md:w-auto',
           !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}
-        style={{
-          backdropFilter: 'var(--popover-backdrop-filter)',
-        }}
       >
         {children}
       </div>

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -83,12 +83,9 @@ const Dropdown = ({
       <SelectPopover
         store={select}
         className={classNames(
-          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
+          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] [backdrop-filter:var(--popover-backdrop-filter)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
           classNameOverride.popover,
         )}
-        style={{
-          backdropFilter: 'var(--popover-backdrop-filter)',
-        }}
         portal={false}
       >
         {items.map((item) => (

packages/web/src/javascripts/Components/Modal/Modal.tsx

@@ -104,12 +104,9 @@ const Modal = ({
       />
       <div
         className={classNames(
-          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
           className?.content,
         )}
-        style={{
-          backdropFilter: 'var(--popover-backdrop-filter)',
-        }}
       >
         {customHeader && !disableCustomHeader ? (
           customHeader

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -98,7 +98,7 @@ const PositionedPopoverContent = ({
       <div
         className={classNames(
           'absolute left-0 top-0 flex w-full min-w-80 cursor-auto flex-col',
-          'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] shadow-main md:h-auto md:max-w-xs',
+          'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] shadow-main md:h-auto md:max-w-xs',
           !disableMobileFullscreenTakeover && 'h-full',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
@@ -109,7 +109,6 @@ const PositionedPopoverContent = ({
           {
             ...styles,
             ...adjustedStyles,
-            backdropFilter: 'var(--popover-backdrop-filter)',
           } as CSSProperties
         }
         ref={mergeRefs([setPopoverElement, addCloseMethod])}

packages/web/src/stylesheets/_modals.scss

@@ -60,6 +60,7 @@
     border-color: var(--popover-border-color);
     background-color: var(--popover-background-color);
     backdrop-filter: var(--popover-backdrop-filter);
+    -webkit-backdrop-filter: var(--popover-backdrop-filter);
   }
 
   .sn-component {