diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 70223be..89fbec5 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -121,7 +121,6 @@ export const Home: React.FC = ({ const immersiveToolbarContentRef = useRef(null) const [immersiveToolbarWidth, setImmersiveToolbarWidth] = useState(null) const immersiveToolbarHorizontalPadding = 20 - const immersiveToolbarMinWidth = 320 const [selectedStudent, setSelectedStudent] = useState(null) const [batchMode, setBatchMode] = useState(false) @@ -338,10 +337,7 @@ export const Home: React.FC = ({ if (frameId !== null) cancelAnimationFrame(frameId) frameId = requestAnimationFrame(() => { const contentWidth = Math.ceil(contentEl.scrollWidth) - const nextWidth = Math.max( - immersiveToolbarMinWidth, - contentWidth + immersiveToolbarHorizontalPadding - ) + const nextWidth = contentWidth + immersiveToolbarHorizontalPadding setImmersiveToolbarWidth((prev) => (prev === nextWidth ? prev : nextWidth)) }) } @@ -356,7 +352,7 @@ export const Home: React.FC = ({ window.removeEventListener("resize", updateToolbarWidth) if (frameId !== null) cancelAnimationFrame(frameId) } - }, [immersiveMode, immersiveToolbarHorizontalPadding, immersiveToolbarMinWidth]) + }, [immersiveMode, immersiveToolbarHorizontalPadding]) useEffect(() => { return () => { @@ -2538,12 +2534,11 @@ export const Home: React.FC = ({ immersiveToolbarContentRef.current = node }} style={{ - display: "flex", + display: "inline-flex", alignItems: "center", gap: "8px", - overflowX: "auto", + overflowX: "visible", justifyContent: "flex-start", - scrollbarWidth: "thin", }} >