fix: Satisfy Safari browser shadows

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx

@@ -119,7 +119,7 @@ export const KeyCreatedSuccessDialog: FC<KeyCreatedSuccessDialogProps> = ({
   return (
     <Dialog open={isOpen} onOpenChange={handleDialogOpenChange}>
       <DialogContent
-        className="drop-shadow-2xl border-gray-4 !rounded-2xl p-0 gap-0 min-w-[760px] max-h-[90vh] overflow-auto"
+        className="drop-shadow-2xl transform-gpu border-gray-4 !rounded-2xl p-0 gap-0 min-w-[760px] max-h-[90vh] overflow-auto"
         showCloseWarning
         onAttemptClose={() => handleCloseAttempt("close")}
       >

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options.tsx

@@ -57,7 +57,7 @@ export function createIdentityOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
+            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
           >
             <div className="flex flex-col h-full">
               {/* Header - Always shown */}

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/create-permission-options.tsx

@@ -55,7 +55,7 @@ export function createPermissionOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
+            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
           >
             <div className="flex flex-col h-full">
               {/* Header */}

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/create-key-options.tsx

@@ -64,7 +64,7 @@ export function createRoleOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
+            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
           >
             <div className="flex flex-col h-full">
               {/* Header */}

apps/dashboard/app/(app)/[workspaceSlug]/audit/components/table/log-details/index.tsx

@@ -35,7 +35,7 @@ export const AuditLogDetails = ({ distanceToTop, selectedLog, setSelectedLog }:
   return (
     <ResizablePanel
       onClose={handleClose}
-      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
+      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl transform-gpu overflow-y-auto z-20 p-4"
       style={panelStyle}
     >
       <LogHeader log={selectedLog} onClose={handleClose} />

apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/create-key-options.tsx

@@ -58,7 +58,7 @@ export function createKeyOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
+            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
           >
             <div className="flex flex-col h-full">
               {/* Header */}

apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/create-permission-options.tsx

@@ -69,7 +69,7 @@ export function createPermissionOptions({
             side="right"
             align="start"
             sideOffset={30}
-            className="drop-shadow-2xl border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
+            className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-[100]"
           >
             <div className="flex flex-col h-full">
               {/* Header */}

apps/dashboard/app/(app)/[workspaceSlug]/logs/components/controls/components/logs-display/components/display-popover.tsx

@@ -156,7 +156,7 @@ export const DisplayPopover = ({ children }: PropsWithChildren) => {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent
-        className="bg-gray-1 dark:bg-black drop-shadow-2xl p-2 border-gray-6 rounded-lg w-96"
+        className="bg-gray-1 dark:bg-black drop-shadow-2xl transform-gpu p-2 border-gray-6 rounded-lg w-96"
         align="start"
         onKeyDown={handleKeyNavigation}
       >

apps/dashboard/app/(app)/[workspaceSlug]/settings/root-keys/components/root-key/root-key-success.tsx

@@ -35,7 +35,7 @@ export const RootKeySuccess = ({ keyValue, onClose }: RootKeySuccessProps) => {
       }}
     >
       <DialogContent
-        className="drop-shadow-2xl border-grayA-4 overflow-hidden !rounded-2xl p-0 gap-0 w-full max-w-[760px] max-h-[90vh] overflow-y-auto"
+        className="drop-shadow-2xl transform-gpu border-grayA-4 overflow-hidden !rounded-2xl p-0 gap-0 w-full max-w-[760px] max-h-[90vh] overflow-y-auto"
         showCloseWarning
         onAttemptClose={handleCloseAttempt}
         aria-labelledby={dialogTitleId}

apps/dashboard/components/logs/checkbox/filter-item.tsx

@@ -156,7 +156,7 @@ export const FilterItem = ({
       </Drover.Trigger>
       <Drover.Content
         ref={contentRef}
-        className="min-w-60 w-full bg-gray-1 dark:bg-black drop-shadow-2xl p-0 border-gray-6 rounded-lg"
+        className="min-w-60 w-full bg-gray-1 dark:bg-black drop-shadow-2xl transform-gpu p-0 border-gray-6 rounded-lg"
         side="right"
         align="start"
         sideOffset={12}

apps/dashboard/components/logs/details/log-details/index.tsx

@@ -139,7 +139,7 @@ export const LogDetails = ({
     }
   };
 
-  const baseClasses = "bg-gray-1 font-mono drop-shadow-2xl z-20";
+  const baseClasses = "bg-gray-1 font-mono drop-shadow-2xl transform-gpu z-20";
   const animationClasses = animated
     ? cn(
         "transition-all duration-300 ease-out",

apps/dashboard/components/logs/table-action.popover.tsx

@@ -88,7 +88,7 @@ export const TableActionPopover = ({
         {children ?? <TableActionPopoverDefaultTrigger onClick={(e) => e.stopPropagation()} />}
       </PopoverTrigger>
       <PopoverContent
-        className="min-w-60 max-w-full bg-gray-1 dark:bg-black drop-shadow-2xl border-gray-6 rounded-lg p-0"
+        className="min-w-60 max-w-full bg-gray-1 dark:bg-black drop-shadow-2xl transform-gpu border-gray-6 rounded-lg p-0"
         align={align}
         onOpenAutoFocus={(e) => {
           e.preventDefault();

apps/dashboard/components/navbar-popover.tsx

@@ -142,7 +142,9 @@ export const QuickNavPopover = ({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger>{children}</PopoverTrigger>
       <PopoverContent
-        className={cn("w-60 bg-gray-1 dark:bg-black drop-shadow-2xl p-2 border-gray-6 rounded-lg")}
+        className={cn(
+          "w-60 bg-gray-1 dark:bg-black drop-shadow-2xl transform-gpu p-2 border-gray-6 rounded-lg",
+        )}
         align="start"
         onKeyDown={handleKeyDown}
       >

apps/dashboard/components/navigation/sidebar/app-sidebar/components/nav-items/utils.ts

@@ -4,7 +4,7 @@ export const getButtonStyles = (isActive?: boolean, showLoader?: boolean) => {
   return cn(
     "flex items-center group text-[13px] font-medium text-accent-12 hover:bg-grayA-3 hover:text-accent-12 justify-start active:border focus:ring-2 w-full text-left",
     "rounded-lg transition-colors focus-visible:ring-1 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 disabled:cursor-not-allowed outline-none",
-    "focus:border-grayA-12 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button",
+    "focus:border-grayA-12 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button transform-gpu",
     isActive ? "bg-grayA-3 text-accent-12" : "[&_svg]:text-gray-9",
     showLoader ? "bg-grayA-3 [&_svg]:text-accent-12" : "",
   );

apps/dashboard/components/ui/drawer.tsx

@@ -39,7 +39,7 @@ const DrawerContent = React.forwardRef<DrawerContentElement, DrawerContentProps>
         {...contentProps}
         ref={ref}
         className={cn(
-          "bg-gray-1 border border-gray-6 flex flex-col fixed bottom-0 left-0 right-0 max-h-[82vh] rounded-t-xl drop-shadow-2xl",
+          "bg-gray-1 border border-gray-6 flex flex-col fixed bottom-0 left-0 right-0 max-h-[82vh] rounded-t-xl drop-shadow-2xl transform-gpu",
           className,
         )}
       >

apps/dashboard/components/virtual-table/components/loading-indicator.tsx

@@ -90,7 +90,7 @@ export const LoadMoreFooter = ({
       }}
     >
       <div
-        className={`w-[740px] border bg-gray-1 dark:bg-black border-gray-6 min-h-[60px] flex items-center justify-center rounded-[10px] drop-shadow-lg shadow-sm mb-5 transition-all duration-200 hover:shadow-lg ${
+        className={`w-[740px] border bg-gray-1 dark:bg-black border-gray-6 min-h-[60px] flex items-center justify-center rounded-[10px] drop-shadow-lg transform-gpu shadow-sm mb-5 transition-all duration-200 hover:shadow-lg ${
           shouldShow ? "pointer-events-auto" : "pointer-events-none"
         }`}
         aria-hidden={!shouldShow}

internal/ui/src/components/buttons/button.tsx

@@ -57,19 +57,19 @@ const buttonVariants = cva(
         destructive: "", // This is only required for mapping from destructive-> danger. We rely on this for type generation because CVA types are hard to mutate.
         primary: [
           "p-2 text-white dark:text-black bg-accent-12 hover:bg-accent-12/90 focus:hover:bg-accent-12 rounded-md font-medium border border-grayA-4",
-          "focus:ring focus:ring-gray-5 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button",
+          "focus:ring focus:ring-gray-5 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button transform-gpu",
           "disabled:border disabled:border-solid disabled:bg-grayA-6 disabled:border-grayA-4 disabled:text-white/85 disabled:dark:text-white/85",
           "active:bg-accent-12/80",
         ],
         outline: [
           "p-2 text-gray-12 bg-transparent border border-grayA-6 hover:bg-grayA-2 rounded-md",
-          "focus:border-grayA-12 focus:ring focus:ring-gray-5 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button",
+          "focus:border-grayA-12 focus:ring focus:ring-gray-5 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button transform-gpu",
           "disabled:border disabled:border-solid disabled:border-grayA-5 disabled:text-grayA-7",
           "active:bg-grayA-3",
         ],
         ghost: [
           "p-2 text-gray-12 bg-transparent hover:bg-grayA-4 rounded-md focus:hover:bg-transparent",
-          "focus:border-grayA-12 focus:ring focus:ring-gray-5 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button",
+          "focus:border-grayA-12 focus:ring focus:ring-gray-5 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button transform-gpu",
           "disabled:border disabled:border-grayA-4 disabled:text-grayA-7",
           "active:bg-grayA-5",
         ],

internal/ui/src/components/buttons/keyboard-button.tsx

@@ -23,7 +23,7 @@ const KeyboardButton = ({
       className={cn(
         "flex items-center justify-center h-5 px-1 min-w-[24px] bg-secondary rounded bg-gray-3 text-gray-9 dark:text-gray-10 border-gray-8 dark:border-gray-9 border text-xs",
         "p-2 text-gray-12 hover:bg-grayA-4 rounded-md focus:hover:bg-transparent",
-        "focus:border-grayA-12 focus:ring-4 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button",
+        "focus:border-grayA-12 focus:ring-4 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button transform-gpu",
         "disabled:border disabled:border-grayA-4 disabled:text-grayA-7",
         "active:bg-grayA-5 max-md:hidden",
         className,

internal/ui/src/components/dialog/dialog-container.tsx

@@ -36,7 +36,7 @@ const DialogContainer = ({
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent
         className={cn(
-          "drop-shadow-2xl border-gray-4 max-h-[90vh] overflow-hidden !rounded-2xl p-0 gap-0 flex flex-col flex-grow",
+          "drop-shadow-2xl transform-gpu border-gray-4 max-h-[90vh] overflow-hidden !rounded-2xl p-0 gap-0 flex flex-col flex-grow",
           "w-[90%] md:w-[70%] lg:w-[70%] xl:w-[50%] 2xl:w-[45%] max-w-[600px] max-h-[90vh] sm:max-h-[90vh] md:max-h-[70vh] lg:max-h-[90vh] xl:max-h-[80vh]",
           className,
         )}

internal/ui/src/components/dialog/navigable-dialog.tsx

@@ -71,7 +71,7 @@ const NavigableDialogRoot = <TStepName extends string>({
           // Otherwise our shortcuts hijacks dialog inputs
           onKeyDown={(e) => e.stopPropagation()}
           className={cn(
-            "drop-shadow-2xl border-grayA-4 overflow-hidden !rounded-2xl p-0 gap-0 flex flex-col max-h-[90vh]",
+            "drop-shadow-2xl transform-gpu border-grayA-4 overflow-hidden !rounded-2xl p-0 gap-0 flex flex-col max-h-[90vh]",
             dialogClassName,
           )}
           onOpenAutoFocus={(e) => {