(fix): scroll state when resizing not being remebered

(fix): missing input box gaps

packages/chat/src/components/input.tsx

@@ -87,7 +87,7 @@ export default function InputComponent({
     <Card
       ref={inputBoxRef}
       className={cn(
-        "rounded-none border-b-0 pt-0 pb-[env(safe-area-inset-bottom)]",
+        "rounded-none border-b-0 pt-0 pb-[env(safe-area-inset-bottom)] mx-2",
         isMobile
           ? "border-0 border-t fixed w-full bottom-0 left-0 px-2"
           : "rounded-t-xl",

packages/chat/src/screen.tsx

@@ -46,6 +46,7 @@ export default function Screen() {
     Record<number, number>
   >({});
   const measurementRefs = React.useRef(new Map<number, HTMLDivElement>());
+  const shouldRestoreBottomOnResizeRef = React.useRef(false);
 
   const hasValidChatUser = Number.isSafeInteger(userId) && userId > 0;
   const hasSharedSecret = sharedSecret.length > 0;
@@ -225,8 +226,22 @@ export default function Screen() {
     }
 
     const handleResize = () => {
+      if (scrollRef.current) {
+        shouldRestoreBottomOnResizeRef.current =
+          getDistanceFromBottom(scrollRef.current) <= stickyBottomThreshold;
+      }
+
       requestAnimationFrame(() => {
         virtualizer.measure();
+
+        requestAnimationFrame(() => {
+          if (!scrollRef.current || !shouldRestoreBottomOnResizeRef.current) {
+            return;
+          }
+
+          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+          shouldRestoreBottomOnResizeRef.current = false;
+        });
       });
     };
 
@@ -234,7 +249,7 @@ export default function Screen() {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [virtualizer]);
+  }, [stickyBottomThreshold, virtualizer]);
 
   React.useLayoutEffect(() => {
     const element = inputBoxRef.current;