matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix bottom tab bar padding and improve edge swipe

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2025-12-23 02:14:30 +01:00
parent 1bb03f4569
commit 50199ec0e4
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/contexts/SidebarContext.tsx
View File

@@ -3,8 +3,8 @@ import type { ReactNode } from 'react';
import { useAuth } from './AuthContext'; import { useAuth } from './AuthContext';
import { settingsAPI } from '../api/client'; import { settingsAPI } from '../api/client';
const EDGE_SWIPE_THRESHOLD = 30; // pixels from left edge to start swipe const EDGE_SWIPE_THRESHOLD = 50; // pixels from left edge to start swipe
const SWIPE_MIN_DISTANCE = 50; // minimum swipe distance to trigger const SWIPE_MIN_DISTANCE = 40; // minimum swipe distance to trigger
export type SidebarMode = 'collapsed' | 'expanded' | 'toggle' | 'dynamic'; export type SidebarMode = 'collapsed' | 'expanded' | 'toggle' | 'dynamic';

14
frontend/src/styles/Layout.css
View File

@@ -894,11 +894,16 @@ label,
display: none; 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 { [data-tab-position='bottom'] .main-content {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); 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 */ /* Mobile: full width at bottom */
@media (max-width: 768px) { @media (max-width: 768px) {
[data-tab-position='bottom'] .page-tabs-container, [data-tab-position='bottom'] .page-tabs-container,
@@ -952,8 +957,13 @@ label,
display: none; display: none;
} }
/* Add bottom padding to main content */ /* Add bottom padding and remove top padding */
[data-tab-position='responsive'] .main-content { [data-tab-position='responsive'] .main-content {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); 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);
}
} }