duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(toolbar): bump desktop layout breakpoint to 1700px to avoid icon clip

Browse Source 
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`).
This commit is contained in:
simoleo89
2026-05-26 19:26:07 +02:00
committed by simoleo89
parent d5d5ca59a8
commit 6022911448
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/toolbar/ToolbarView.tsx
+4 -4
View File
@@ -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<Variants>(() => ({
hidden: { opacity: 0, x: isInRoom ? -10 : 0, y: isInRoom ? 0 : 8, pointerEvents: 'none' },
visible: { opacity: 1, x: 0, y: 0, pointerEvents: 'auto' }