heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(safe-area): paint Android edge-to-edge top/bottom strips with the active surface tone instead of a fixed body bg

Browse source
This commit is contained in:
heaven 2026-05-11 23:13:56 +03:00
parent f38cb42344
commit ce82d66883
2 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/app/features/room/Room.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React, { useCallback, useEffect } from 'react';
import { Box, Line, toRem } from 'folds';
import { useMatch, useParams } from 'react-router-dom';
import { isKeyHotkey } from 'is-hotkey';
@ -112,6 +112,25 @@ export function Room({ renderRoomView }: RoomProps) {
const profileOpen = !!useAtomValue(userRoomProfileAtom);
const showProfileHorseshoe = profileOpen && !isMobile && !showThreadDrawer;
// Match the Android edge-to-edge safe-area zones (status bar + gesture
// pill) to the chat surface while a Room is mounted: `body` reads
// `--vojo-safe-area-bg`, which `app/styles/global.css.ts` defaults to
// `#0d0e11` (chat-list tone). We retune to `#181a20`
// (`SurfaceVariant.Container`, the chat tone painted by RoomView's
// `<Page>`) for the lifetime of Room and `removeProperty` on cleanup
// so the chat-list view goes back to its dark tone. Hardcoded because
// folds tokens are scoped to the `.dark-theme` class on `body` —
// writing `var(--xxx)` on `:root` (where `--vojo-safe-area-bg` lives)
// would leave it unresolved and body would fall back to the literal
// `#0d0e11` in index.css.
useEffect(() => {
const root = document.documentElement;
root.style.setProperty('--vojo-safe-area-bg', '#181a20');
return () => {
root.style.removeProperty('--vojo-safe-area-bg');
};
}, []);
useKeyDown(
window,
useCallback(

11
src/index.css
View file

@ -60,8 +60,15 @@ body {
height: 100%;
display: flex;
flex-direction: column;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
env(safe-area-inset-left);
/* Top / left / right insets keep app chrome clear of system bars and
display cutouts. Bottom inset is intentionally zero so the chat
surface (RoomView's `<Page>`) and the chat-list shell (PageRoot's
Background-coloured outer Box) extend all the way to the screen
edge — same edge-to-edge pattern WhatsApp / Telegram use. Without
this, the bottom env zone showed a different colour from the
painted surface, and the composer's wrap-padding-bottom kept
overlapping the gesture-pill area, visually "eating" the form. */
padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
*,