[gn] add faded overlay to add menu

a-type · Dec 2, 2024 · 4961528 · 4961528
1 parent b6a258e
commit 4961528
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/apps/gnocchi/web/src/components/addBar/AddPane.tsx b/apps/gnocchi/web/src/components/addBar/AddPane.tsx
@@ -108,7 +108,7 @@ const AddPaneImpl = forwardRef<
 	return (
 		<div
 			className={classNames(
-				'flex flex-col-reverse rounded-lg bg-white shadow-xl border-default rounded-b-21px border-b-none',
+				'flex flex-col-reverse rounded-lg bg-white border-default rounded-b-21px border-b-none',
 				className,
 			)}
 		>
@@ -127,7 +127,7 @@ const AddPaneImpl = forwardRef<
 			<ScrollArea
 				{...menuProps}
 				className={classNames(
-					'flex flex-col max-h-[calc(var(--viewport-height,40dvh)-40px)] lg:max-h-50dvh w-full max-w-none gap-4',
+					'flex flex-col max-h-[calc(var(--viewport-height,40dvh)-80px)] lg:max-h-50dvh w-full max-w-none gap-4',
 				)}
 				onScroll={stopPropagation}
 				background="white"

diff --git a/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.tsx b/apps/gnocchi/web/src/components/groceries/addBar/FloatingAdd.tsx
@@ -46,13 +46,16 @@ export function FloatingAdd({ className, ...rest }: FloatingAddProps) {
 				<AddPane
 					onAdd={onAdd}
 					showRichSuggestions
-					className={classNames('relative z-1 shadow-xl')}
+					className={classNames('relative z-1')}
 					onOpenChange={setOpen}
 					open={open}
 					disabled={!open}
 					{...rest}
 				/>
 			</MenuDisclose.Content>
+			{open && (
+				<div className="opacity-0 bg-overlay fixed inset-0 z-0 pointer-events-none animate-fade-in animate-delay-200 animate-forwards" />
+			)}
 			<MenuDisclose.Trigger asChild>
 				<Button
 					size="icon"