fix(17-03): lift FAB above BottomTabBar and reserve phone content padding
- CalendarShell.tsx: FAB bottom changed from var(--space-6) to
calc(var(--bottom-chrome-h) + var(--space-6)) — sits 24px above bar
- App.tsx: contentStyle gains phone-only paddingBottom: var(--bottom-chrome-h)
via spread pattern ...(phone ? {...} : {}) — desktop unchanged
This commit is contained in:
@@ -160,6 +160,8 @@ export default function App() {
|
|||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
// Phone-only: reserve space for the fixed BottomTabBar so content is not occluded
|
||||||
|
...(phone ? { paddingBottom: 'var(--bottom-chrome-h)' } : {}),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Setup gate: while setup status is loading, render nothing (prevent flash).
|
// Setup gate: while setup status is loading, render nothing (prevent flash).
|
||||||
|
|||||||
@@ -467,7 +467,7 @@ export function CalendarShell() {
|
|||||||
onClick={() => setEventForm(true, 'create')}
|
onClick={() => setEventForm(true, 'create')}
|
||||||
style={{
|
style={{
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
bottom: 'var(--space-6)',
|
bottom: 'calc(var(--bottom-chrome-h) + var(--space-6))',
|
||||||
right: 'var(--space-6)',
|
right: 'var(--space-6)',
|
||||||
width: '56px',
|
width: '56px',
|
||||||
height: '56px',
|
height: '56px',
|
||||||
|
|||||||
Reference in New Issue
Block a user