From 50199ec0e4aea31952f721d766d53c92aba47b8f Mon Sep 17 00:00:00 2001 From: matteoscrugli Date: Tue, 23 Dec 2025 02:14:30 +0100 Subject: [PATCH] Fix bottom tab bar padding and improve edge swipe MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove extra top padding when tab bar is at bottom - Increase edge swipe threshold from 30px to 50px - Reduce minimum swipe distance from 50px to 40px 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- frontend/src/contexts/SidebarContext.tsx | 4 ++-- frontend/src/styles/Layout.css | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend/src/contexts/SidebarContext.tsx b/frontend/src/contexts/SidebarContext.tsx index 5e10129..df4d4a9 100644 --- a/frontend/src/contexts/SidebarContext.tsx +++ b/frontend/src/contexts/SidebarContext.tsx @@ -3,8 +3,8 @@ import type { ReactNode } from 'react'; import { useAuth } from './AuthContext'; import { settingsAPI } from '../api/client'; -const EDGE_SWIPE_THRESHOLD = 30; // pixels from left edge to start swipe -const SWIPE_MIN_DISTANCE = 50; // minimum swipe distance to trigger +const EDGE_SWIPE_THRESHOLD = 50; // pixels from left edge to start swipe +const SWIPE_MIN_DISTANCE = 40; // minimum swipe distance to trigger export type SidebarMode = 'collapsed' | 'expanded' | 'toggle' | 'dynamic'; diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css index 1b1fcce..e047c70 100644 --- a/frontend/src/styles/Layout.css +++ b/frontend/src/styles/Layout.css @@ -894,11 +894,16 @@ label, display: none; } -/* Add bottom padding to main content when bar is at bottom */ +/* Add bottom padding and remove top padding when bar is at bottom */ [data-tab-position='bottom'] .main-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } +[data-tab-position='bottom'] .page-content, +[data-tab-position='bottom'] .admin-tab-swipe { + padding-top: var(--page-padding-y); +} + /* Mobile: full width at bottom */ @media (max-width: 768px) { [data-tab-position='bottom'] .page-tabs-container, @@ -952,8 +957,13 @@ label, display: none; } - /* Add bottom padding to main content */ + /* Add bottom padding and remove top padding */ [data-tab-position='responsive'] .main-content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } + + [data-tab-position='responsive'] .page-content, + [data-tab-position='responsive'] .admin-tab-swipe { + padding-top: var(--page-padding-y-mobile); + } }