From 6022911448f82d5b9beb0a81d12d47eeabb5ef33 Mon Sep 17 00:00:00 2001 From: simoleo89 Date: Tue, 26 May 2026 19:26:07 +0200 Subject: [PATCH] fix(toolbar): bump desktop layout breakpoint to 1700px to avoid icon clip The left-nav container is `max-w-[calc(50vw-242px)]` (reserves the chat frame width) and uses `overflow-x: clip`. With the full icon set (habbo, rooms, game, catalog, buildersclub, inventory, ME, wired-tools, camera, youtube, modtools, furnieditor, housekeeping) the icons exceed the available 528-608px around the 1540-1700px viewport range, so the last icons get silently clipped on the right. Raising the desktop breakpoint from 1540px to 1700px makes the client fall back to the mobile-scrollable layout (`.tb-bar-scroll`) below 1700px, which scrolls horizontally and doesn't clip. Above 1700px the desktop fixed-icon layout still applies, now with enough horizontal room for every icon even with mod+HK enabled. Touch devices are unaffected (already forced onto the mobile layout via `pointer: coarse`). --- src/components/toolbar/ToolbarView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index edf59e6..8bec8e3 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -69,10 +69,10 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => toggleTimeoutRef.current = setTimeout(() => { toggleLockRef.current = false; }, TOGGLE_LOCK_MS); }, []); - const compactFramePosition = (isToolbarOpen && isInRoom) ? 'bottom-[90px] min-[1540px]:bottom-0' : 'bottom-0'; - const mobileOnlyClasses = isTouchLayout ? '' : 'min-[1540px]:hidden'; - const desktopBlockClasses = isTouchLayout ? 'hidden' : 'hidden min-[1540px]:block'; - const desktopFlexClasses = isTouchLayout ? 'hidden' : 'hidden min-[1540px]:flex'; + const compactFramePosition = (isToolbarOpen && isInRoom) ? 'bottom-[90px] min-[1700px]:bottom-0' : 'bottom-0'; + const mobileOnlyClasses = isTouchLayout ? '' : 'min-[1700px]:hidden'; + const desktopBlockClasses = isTouchLayout ? 'hidden' : 'hidden min-[1700px]:block'; + const desktopFlexClasses = isTouchLayout ? 'hidden' : 'hidden min-[1700px]:flex'; const leftNavVariants = useMemo(() => ({ hidden: { opacity: 0, x: isInRoom ? -10 : 0, y: isInRoom ? 0 : 8, pointerEvents: 'none' }, visible: { opacity: 1, x: 0, y: 0, pointerEvents: 'auto' }