From 9e68ba9724d7c5b12e75c343f9b46469038542e6 Mon Sep 17 00:00:00 2001
From: Alex Anderson <hey@ralexanderson.com>
Date: Wed, 10 Jul 2024 20:03:20 -0400
Subject: [PATCH] fix: Dynamically reposition widget popovers when content
 changes size

Closes #617
---
 client/app/routes/flight.station/widgets.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/app/routes/flight.station/widgets.tsx b/client/app/routes/flight.station/widgets.tsx
index 62d51d22..6dd5c1f8 100644
--- a/client/app/routes/flight.station/widgets.tsx
+++ b/client/app/routes/flight.station/widgets.tsx
@@ -2,7 +2,6 @@ import * as Cards from "@client/cards";
 import { q } from "@client/context/AppContext";
 import { SVGImageLoader } from "@thorium/ui/SVGImageLoader";
 import {
-	ComponentPropsWithoutRef,
 	type ComponentType,
 	type FC,
 	type ReactElement,
@@ -12,6 +11,7 @@ import {
 import { GamepadConfig, useGamepadStore } from "@client/hooks/useGamepadStore";
 import { Popover, Transition } from "@headlessui/react";
 import {
+	autoUpdate,
 	useClick,
 	useDismiss,
 	useFloating,
@@ -80,10 +80,11 @@ export const Widget: FC<{
 }> = ({ name, icon, component: Component, size = "sm" }) => {
 	const [isOpen, setIsOpen] = useState(false);
 
-	const { x, y, strategy, refs, context } = useFloating({
+	const { x, y, strategy, refs, context, update } = useFloating({
 		open: isOpen,
 		onOpenChange: setIsOpen,
 		placement: "top-end",
+		whileElementsMounted: autoUpdate,
 	});
 
 	const dismiss = useDismiss(context);