egullickson/motovaultpro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: FAB button overlaps content and bottom nav on mobile (#162) #170

New Issue
Closed
opened 2026-02-13 22:23:17 +00:00 by egullickson · 1 comment
egullickson commented 2026-02-13 22:23:17 +00:00
Owner
Copy Link
Copy Source

Relates to #162

Severity: High

Problem

The floating action button (+) at bottom center on mobile overlaps the "Log Fuel" quick action text on the dashboard and partially obscures the bottom nav labels.

Recommendation

  • Add bottom padding to content areas so scrollable content clears the FAB
  • Reposition the FAB to not overlap navigation labels

Acceptance Criteria

  • FAB does not overlap bottom nav labels
  • FAB does not obscure content text on the dashboard
  • Scrollable content has sufficient bottom padding to clear the FAB
  • FAB remains easily accessible for its intended action
  • Tested on mobile (320px, 768px)
Relates to #162 ## Severity: High ## Problem The floating action button (+) at bottom center on mobile overlaps the "Log Fuel" quick action text on the dashboard and partially obscures the bottom nav labels. ## Recommendation - Add bottom padding to content areas so scrollable content clears the FAB - Reposition the FAB to not overlap navigation labels ## Acceptance Criteria - FAB does not overlap bottom nav labels - FAB does not obscure content text on the dashboard - Scrollable content has sufficient bottom padding to clear the FAB - FAB remains easily accessible for its intended action - Tested on mobile (320px, 768px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:23:33 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:23:48 +00:00
egullickson commented 2026-02-14 01:15:09 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 6)

Phase: 2 (Navigation cleanup) | Priority: High | Depends on: None | Blocks: None

Context

The floating action button (FAB) overlaps with the bottom navigation labels and dashboard content on mobile, making both hard to tap.

Implementation

1. Raise FAB position in frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx:

  • Current CSS: bottom: 'calc(64px + env(safe-area-inset-bottom, 0px) - 26px)'
  • Change -26px to +4px: bottom: 'calc(64px + env(safe-area-inset-bottom, 0px) + 4px)'
  • This raises the FAB above the bottom nav labels

2. Increase content bottom padding in frontend/src/components/Layout.tsx:

  • Change the mobile content div padding from pb-20 to pb-24 (at ~line 89, mobile layout ONLY)
  • Desktop layout (~line 237) uses different padding and should NOT be changed

Files

  • frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx
  • frontend/src/components/Layout.tsx (mobile content div only)

Commit Convention

fix: raise FAB above bottom nav and add content clearance on mobile (refs #170)

Test Criteria

  • FAB does not overlap bottom nav labels
  • FAB does not overlap dashboard content or other page content
  • Content scrolls completely clear of both bottom nav and FAB
  • FAB is still easily tappable
  • Desktop layout is unaffected
  • Verify on mobile (320px, 768px) viewports only (mobile-specific fix)

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 6) **Phase**: 2 (Navigation cleanup) | **Priority**: High | **Depends on**: None | **Blocks**: None ### Context The floating action button (FAB) overlaps with the bottom navigation labels and dashboard content on mobile, making both hard to tap. ### Implementation **1. Raise FAB position in `frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx`:** - Current CSS: `bottom: 'calc(64px + env(safe-area-inset-bottom, 0px) - 26px)'` - Change `-26px` to `+4px`: `bottom: 'calc(64px + env(safe-area-inset-bottom, 0px) + 4px)'` - This raises the FAB above the bottom nav labels **2. Increase content bottom padding in `frontend/src/components/Layout.tsx`:** - Change the mobile content div padding from `pb-20` to `pb-24` (at ~line 89, mobile layout ONLY) - Desktop layout (~line 237) uses different padding and should NOT be changed ### Files - `frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx` - `frontend/src/components/Layout.tsx` (mobile content div only) ### Commit Convention ``` fix: raise FAB above bottom nav and add content clearance on mobile (refs #170) ``` ### Test Criteria - FAB does not overlap bottom nav labels - FAB does not overlap dashboard content or other page content - Content scrolls completely clear of both bottom nav and FAB - FAB is still easily tappable - Desktop layout is unaffected - Verify on mobile (320px, 768px) viewports only (mobile-specific fix) ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No labels
status
backlog
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#170