fix(dashboard): prevent date picker layout shift (#521)

Author: izadoesdev

apps/dashboard/components/date-range-picker.tsx

@@ -206,7 +206,11 @@ export function DateRangePicker({
 					<span className="truncate">{formatDisplayRange(value)}</span>
 				</Popover.Trigger>
 
-				<Popover.Content className="w-auto overflow-hidden p-0" side="bottom">
+				<Popover.Content
+					className="w-auto overflow-hidden p-0"
+					disableAnchorTracking
+					side="bottom"
+				>
 					<div className="flex">
 						<div className="hidden w-36 shrink-0 border-border/60 border-r sm:block">
 							<div className="p-1.5">

packages/ui/src/components/popover.tsx

@@ -29,11 +29,15 @@ function Content({
 	className,
 	children,
 	align = "center",
+	disableAnchorTracking = false,
 	side = "bottom",
 	sideOffset = 6,
 	...rest
 }: ComponentPropsWithoutRef<typeof BasePopover.Popup> & {
 	align?: ComponentPropsWithoutRef<typeof BasePopover.Positioner>["align"];
+	disableAnchorTracking?: ComponentPropsWithoutRef<
+		typeof BasePopover.Positioner
+	>["disableAnchorTracking"];
 	side?: ComponentPropsWithoutRef<typeof BasePopover.Positioner>["side"];
 	sideOffset?: ComponentPropsWithoutRef<
 		typeof BasePopover.Positioner
@@ -44,6 +48,7 @@ function Content({
 			<BasePopover.Positioner
 				align={align}
 				className="z-50"
+				disableAnchorTracking={disableAnchorTracking}
 				side={side}
 				sideOffset={sideOffset}
 			>