fix(example): mobile

Author: SincerelyFaust

example/src/App.css

@@ -3,8 +3,15 @@
   background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
+  overflow-x: hidden;
 }
 
 .page {
@@ -118,12 +125,26 @@ h1 {
   color: #64748b;
 }
 
+.mobile-width-control {
+  display: grid;
+  gap: 8px;
+  color: #475569;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.mobile-width-control input {
+  width: 100%;
+}
+
 .example-frame-shell {
   position: relative;
+  width: 100%;
   min-width: 0;
 }
 
 .example-frame {
+  width: 100%;
   min-width: 180px;
   max-width: 100%;
   padding: 14px;
@@ -182,7 +203,7 @@ h1 {
 .popover {
   position: absolute;
   z-index: 10;
-  max-width: min(320px, calc(100% - 16px));
+  max-width: min(320px, calc(100vw - 16px));
   padding: 12px;
   border: 1px solid #e5e7eb;
   border-radius: 14px;
@@ -216,4 +237,8 @@ h1 {
   h1 {
     font-size: 2.7rem;
   }
+
+  .example-frame {
+    resize: none;
+  }
 }

example/src/App.tsx

@@ -14,6 +14,7 @@ type PopoverState = {
   hiddenItems: Item[];
   left: number;
   top: number;
+  anchorLeft: number;
 };
 
 const items: Item[] = [
@@ -28,16 +29,38 @@ const items: Item[] = [
 const githubUrl =
   "https://github.com/SincerelyFaust/react-fit-list?tab=readme-ov-file";
 const npmUrl = "https://www.npmjs.com/package/react-fit-list";
+const DESKTOP_FRAME_WIDTH = 360;
+const MOBILE_FRAME_MIN_WIDTH = 220;
 
 function Tag({ children }: { children: React.ReactNode }) {
   return <span className="tag">{children}</span>;
 }
 
 function App() {
   const [frameWidth, setFrameWidth] = useState(320);
+  const [mobileFrameWidth, setMobileFrameWidth] = useState(DESKTOP_FRAME_WIDTH);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
   const [popover, setPopover] = useState<PopoverState | null>(null);
   const frameShellRef = useRef<HTMLDivElement | null>(null);
   const frameRef = useRef<HTMLDivElement | null>(null);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const mediaQuery = window.matchMedia("(max-width: 640px)");
+    const syncViewportMode = () => setIsMobileViewport(mediaQuery.matches);
+
+    syncViewportMode();
+
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", syncViewportMode);
+      return () => mediaQuery.removeEventListener("change", syncViewportMode);
+    }
+
+    mediaQuery.addListener(syncViewportMode);
+    return () => mediaQuery.removeListener(syncViewportMode);
+  }, []);
 
   useEffect(() => {
     const frame = frameRef.current;
@@ -55,7 +78,23 @@ function App() {
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [isMobileViewport, mobileFrameWidth]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const syncMobileWidth = () => {
+      const nextWidth = Math.min(DESKTOP_FRAME_WIDTH, window.innerWidth - 32);
+      setMobileFrameWidth((current) => {
+        if (!isMobileViewport) return current;
+        return Math.max(MOBILE_FRAME_MIN_WIDTH, nextWidth);
+      });
+    };
+
+    syncMobileWidth();
+    window.addEventListener("resize", syncMobileWidth);
+    return () => window.removeEventListener("resize", syncMobileWidth);
+  }, [isMobileViewport]);
 
   useEffect(() => {
     if (!popover) return;
@@ -80,6 +119,43 @@ function App() {
     };
   }, [popover]);
 
+  useEffect(() => {
+    if (!popover) return;
+
+    const updatePopoverPosition = () => {
+      const frameShell = frameShellRef.current;
+      const node = popoverRef.current;
+      if (!frameShell || !node) return;
+
+      const shellRect = frameShell.getBoundingClientRect();
+      const popoverWidth = node.offsetWidth;
+      const viewportPadding = 8;
+      const minLeft = Math.max(viewportPadding - shellRect.left, 8);
+      const maxLeft = Math.max(
+        minLeft,
+        window.innerWidth - viewportPadding - shellRect.left - popoverWidth
+      );
+      const nextLeft = Math.min(Math.max(popover.anchorLeft, minLeft), maxLeft);
+
+      setPopover((current) => {
+        if (!current || current.left === nextLeft) return current;
+        return {
+          ...current,
+          left: nextLeft,
+        };
+      });
+    };
+
+    updatePopoverPosition();
+    window.addEventListener("resize", updatePopoverPosition);
+    window.addEventListener("scroll", updatePopoverPosition, true);
+
+    return () => {
+      window.removeEventListener("resize", updatePopoverPosition);
+      window.removeEventListener("scroll", updatePopoverPosition, true);
+    };
+  }, [popover]);
+
   const openOverflowPopover = (
     args: FitListOverflowRenderArgs<Item>,
     event: React.MouseEvent<HTMLElement>
@@ -90,6 +166,7 @@ function App() {
 
     const triggerRect = event.currentTarget.getBoundingClientRect();
     const frameRect = frameShell.getBoundingClientRect();
+    const anchorLeft = Math.max(8, triggerRect.right - frameRect.left - 46);
 
     setPopover((current) => {
       const isSame =
@@ -105,12 +182,21 @@ function App() {
 
       return {
         hiddenItems: args.hiddenItems,
-        left: Math.max(8, triggerRect.right - frameRect.left - 46),
+        left: anchorLeft,
+        anchorLeft,
         top: triggerRect.bottom - frameRect.top + 10,
       };
     });
   };
 
+  const mobileSliderMax =
+    typeof window === "undefined"
+      ? DESKTOP_FRAME_WIDTH
+      : Math.max(
+          MOBILE_FRAME_MIN_WIDTH,
+          Math.min(DESKTOP_FRAME_WIDTH, window.innerWidth - 32)
+        );
+
   return (
     <main className="page">
       <div className="content">
@@ -154,16 +240,39 @@ function App() {
               <span className="width-value">{frameWidth}px</span>
             </div>
             <p className="panel-description">
-              Drag the resize handle to test how the list fits and when the
-              overflow button appears.
+              {isMobileViewport
+                ? "Use the slider to preview how the list behaves at smaller widths."
+                : "Drag the resize handle to test how the list fits and when the overflow button appears."}
             </p>
           </div>
 
+          {isMobileViewport && (
+            <label className="mobile-width-control">
+              <span>Preview width</span>
+              <input
+                type="range"
+                min={MOBILE_FRAME_MIN_WIDTH}
+                max={mobileSliderMax}
+                step={1}
+                value={Math.min(mobileFrameWidth, mobileSliderMax)}
+                onChange={(event) => {
+                  setMobileFrameWidth(Number(event.target.value));
+                  setPopover(null);
+                }}
+                aria-label="Preview width"
+              />
+            </label>
+          )}
+
           <div ref={frameShellRef} className="example-frame-shell">
             <div
               ref={frameRef}
               className="example-frame"
-              style={{ width: "min(100%, 360px)" }}
+              style={{
+                width: isMobileViewport
+                  ? `min(100%, ${Math.min(mobileFrameWidth, mobileSliderMax)}px)`
+                  : "min(100%, 360px)",
+              }}
             >
               <div className="frame-toolbar" aria-hidden="true">
                 <span />
@@ -185,6 +294,7 @@ function App() {
 
             {popover && (
               <div
+                ref={popoverRef}
                 className="popover"
                 style={{ left: `${popover.left}px`, top: `${popover.top}px` }}
                 role="dialog"