Interactive kit · grounded in code

Panel Placement · 하단 고정

Panel placement — bottom-docked pickers, menus, and filtersExternal UI/UX audit: dock pickers, action menus, and filter cascades at the bottom of the screen for one-handed thumb reach (the Toss/KakaoTalk pattern), keeping confirms centered. `ModalPanel` today always centers (modal-panel.tsx: Root's `alignItems="center" justifyContent="center"`) — the same primitive, the same auto- height-capped-at-88% layout contract, the same hardware-back and dismiss-on-overlay semantics either way. STYLE-3 (docs/canon/styling.md, "Bottom sheets are RETIRED") retired the bottom-sheet LIBRARIES — Tamagui `Sheet` portal bugs, `@gorhom` crashing the web bundle — and forbids a drag handle + snap points; a bottom PLACEMENT of the same native-`Modal` `ModalPanel` reintroduces none of that. Phones A/B compare the shipped `ReactionPickerModal` (post-row.tsx) as-is vs. docked; Phone C docks `HeaderActionsMenu` with club-detail's real 공유/나가기 rows; Phone D shows what does NOT move — the leave confirm stays centered. Open question: should `ModalPanel.Frame` gain a `placement` prop, defaulted to bottom for pickers/menus/filters, centered kept for confirms?

박준호3시간 전자유게시판

다음 주 토요일 정모 있어요! 참석 여부 남겨주세요 🎾

💬4

👍8

👏

🔥3

❤️

😂

Now — shipped`ReactionPickerModal` (post-row.tsx:80-127) — centered `ModalPanel`, the built-in X close button, 5 reaction pills in a wrapped row. Same primitive as every other `ModalPanel` consumer in the app; no bottom-sheet library, no handle, no snap points.

박준호3시간 전자유게시판

다음 주 토요일 정모 있어요! 참석 여부 남겨주세요 🎾

💬4

👍8

👏

🔥3

❤️

😂

ProposalSame picker, docked at the bottom — full width, top corners `$4` (16px), bottom corners square against the screen edge, no handle. Overlay stays above it; the Frame's own `paddingBottom` becomes `base + inset` (resolveBandPaddingBottom, bottom-cta-band- visual.ts) exactly the way `BottomCtaBand` already computes it — the device's bottom inset painted once, not stacked with a second reservation. Closes by overlay tap or hardware back, unchanged from today.

양재 테니스 클럽142명 · 강남구

홈일정채팅랭킹멤버회비

클럽 공유

🚪클럽 나가기

Proposal — action menu`HeaderActionsMenu` (club-detail-screen.tsx's real `clubActions`: 공유 default tone, 나가기 destructive tone, member-and-not-owner only), docked at the bottom. Rows keep their real 44pt `minHeight`; the destructive row stays last, after the one `Divider` the menu anatomy law requires (docs/canon/components.md).

양재 테니스 클럽142명 · 강남구

홈일정채팅랭킹멤버회비

이 클럽을 나가시겠어요?나가면 다시 초대 코드로 가입해야 해요

취소

나가기

UnchangedThe real 나가기 confirm (`ConfirmSheet`, club-detail-screen.tsx's `handleLeaveClub`) — title "이 클럽을 나가시겠어요?", message "나가면 다시 초대 코드로 가입해야 해요", 취소 / 나가기 buttons. Stays centered — a confirmation is an interruption, not a reach task.

Claude recommends: YESBottom placement for pickers, menus, and chip option lists (thumb reach, the Toss/Kakao grammar the audience knows), centered for confirms and anything that must interrupt; one prop on `ModalPanel.Frame`, no new primitive, no handle, no snap points.Rejected: reintroducing a `Sheet`/`@gorhom` library (STYLE-3); a drag handle or snap points (the no-scroll-drag law and STYLE-3); a bottom position for confirms (interruptions read centered).

Spec (grounding, anatomy)

PROPOSAL (2026-09-17) — an external UI/UX audit recommending `ModalPanel placement="bottom"` for pickers, action menus, and filter cascades (Toss/KakaoTalk one-handed thumb reach), keeping confirms centered. Phones A/B compare the shipped `ReactionPickerModal` centered vs. docked; Phone C docks `HeaderActionsMenu` with club-detail's real rows; Phone D shows the leave confirm staying centered, unchanged. One open question: should `ModalPanel.Frame` gain a `placement` prop?

grounded in 13 source file(s)

packages/ui/src/modal-panel.tsxpackages/ui/src/header-menu.tsxpackages/ui/src/confirm-sheet.tsxpackages/features/clubs/src/shared/post-row.tsxpackages/features/clubs/src/club-detail-screen.tsxpackages/features/clubs/src/shared/discover-filters.tsxpackages/ui/src/dropdown-chip.tsxpackages/ui/src/range-chip.tsxpackages/ui/src/chip-picker-panel.tsxpackages/ui/src/bottom-cta-band-visual.tspackages/app/src/config/i18n/ko/common.tspackages/app/src/config/i18n/ko/clubs.tsdocs/canon/styling.md