Mobile Responsiveness Enhancement Plan — Lifehub

Master, this plan outlines the path to make Lifehub fully responsive and mobile-first. The Force of DRY patterns guides every decision here.

1. Current State Audit

What Already Works Well

• main uses p-4 lg:p-6 — appropriate gutter switch between mobile and desktop
• Most KPI grids already use grid-cols-2 lg:grid-cols-4 — stacks gracefully
• The layout already separates _footer_nav.html.erb (mobile) from the desktop navbar in _navbar.html.erb
• The mobile sidebar drawer (_sidebar.html.erb) exists with a hamburger trigger
• Background, card, and border colours are already CSS variables — easy consistent theming
• Modal has mx-4 on mobile and max-h-[90vh] overflow-hidden — a solid start

What Needs Fixing

2. Design Principles

1. Mobile-first Tailwind classes — write sm: / md: / lg: as enhancement, not the baseline.
2. DRY via shared partials — every repeated pattern (page header, KPI card, table wrapper, bottom sheet) becomes a reusable partial.
3. Bottom-sheet modals on mobile — modals on < sm viewports slide up from the bottom (iOS/Android native feel).
4. 44 px minimum touch targets — all interactive elements meet WCAG 2.5.5.
5. Safe-area insets — use pb-safe (env(safe-area-inset-bottom)) on sticky bars so notch devices aren't clipped.
6. Consistent CSS variable tokens — all colours stay on var(--bg-*), var(--text-*), var(--sidebar-*).

3. Shared Component Upgrades (DRY Foundation)

3.1 _footer_nav.html.erb — Enhanced Bottom Navigation Bar

Goal: Promote to a proper bottom navigation bar with labelled icons, active state, "More" overflow drawer, and safe-area padding.

New structure:

┌─────────────────────────────────────┐
│  🏠       💸       ✅       📈     ⋯  │
│ Home    Expenses  Habits  Invest  More│
└─────────────────────────────────────┘
           safe-area-inset-bottom

Changes:

• Items: Dashboard · Expenses · Habits · Investments · More (drawer)
• "More" opens a mini drawer (Turbo Frame or Stimulus) showing: Goals, Analytics, Accounts, Simulator, Planning, Sports, Notes, Market Lists, Birthdays, Countdowns, Construction, Converter, Gamification
• Each item = flex column (icon + label), min-w-[44px] min-h-[44px]
• Active item: coloured icon + white label, inactive: text-gray-500
• pb-[env(safe-area-inset-bottom)] + pb-3 fallback on the nav itself
• Pin to fixed bottom-0 left-0 right-0 (not sticky — safer on mobile browsers)
• New Stimulus controller: bottom-nav-controller.js — handles "More" toggle

DRY helper to reuse: nav_link helper already exists — extend it to support label: argument and render the vertical layout.

Relevant file: app/views/shared/_footer_nav.html.erb

3.2 _turbo_modal.html.erb — Bottom Sheet on Mobile

Goal: On mobile (< sm), the modal slides up from the bottom like a native sheet; on sm+ it remains centre-anchored.

Changes:

• Add sm:items-center items-end to the backdrop flex container — modal anchors to bottom on mobile, centre on desktop.
• Modal wrapper: remove mx-4 fixed margin; use w-full sm:w-auto sm:mx-6 md:mx-8
• Add rounded-b-none rounded-t-2xl sm:rounded-2xl to the card
• Add drag-handle indicator (w-10 h-1 bg-white/20 rounded-full mx-auto mb-2) visible on mobile only
• Reduce max-h on mobile: max-h-[85vh] sm:max-h-[90vh]
• Animation: translate-y-full → translate-y-0 on mobile (slide up), scale-95 opacity-0 → scale-100 opacity-100 on desktop
• Add pb-[env(safe-area-inset-bottom)] to modal body on mobile

Relevant file: app/views/shared/_turbo_modal.html.erb

3.3 _page_header.html.erb — Responsive Header Pattern

Goal: Standardise how every feature page renders its title + action buttons, making them stack vertically on mobile with full-width CTA buttons.

Changes:

• Two-line layout on mobile: title row, then actions row (flex-col sm:flex-row)
• Action buttons go w-full sm:w-auto on mobile
• Title font: text-xl sm:text-2xl
• Expose mobile_actions: local to allow a compact "+" FAB on mobile when multiple actions exist

Relevant file: app/views/shared/_page_header.html.erb

3.4 New Shared Partial — _table_scroll_wrapper.html.erb

Goal: Wrap every data table in a scrolable container to prevent horizontal overflow breaking layouts.

<%# app/views/shared/_table_scroll_wrapper.html.erb %>
<div class="overflow-x-auto -mx-4 sm:mx-0 rounded-xl">
  <div class="min-w-[540px] sm:min-w-0">
    <%= yield %>
  </div>
</div>

Apply to: accounts table, balance registries table, investments table, analytics tables.

3.5 New Shared Partial — _fab.html.erb (Floating Action Button)

Goal: On mobile, replace multiple header buttons with a single FAB that reveals a speed-dial if multiple actions exist.

<%# app/views/shared/_fab.html.erb %>
<%# Usage: render "shared/fab", actions: [{label:, path:, color:, icon:}] %>
<div class="fixed bottom-20 right-4 z-30 lg:hidden" data-controller="fab">
  ...speed-dial buttons...
</div>

Apply to: accounts (2 actions), dashboard (2 quick actions), balance registries.

3.6 Tailwind main Padding — Bottom Clearance

Goal: Ensure content isn't hidden under the bottom nav.

Change in layouts/application.html.erb:

<main class="flex-grow p-4 pb-24 lg:pb-6 lg:p-6 ...">

pb-24 gives 96px clearance which safely clears the bottom nav + FAB on mobile.

3.7 Filter Pills / Tab Rows — Horizontal Scroll

Goal: All flex gap-2 flex-wrap pill rows become horizontally scrollable on mobile (no wrap = no reflow jank).

Change pattern (applied consistently across expenses, investments, balance registries, habits, analytics):

<%# Before: %>
<div class="flex flex-wrap gap-2 mb-5">

<%# After: %>
<div class="flex gap-2 mb-5 overflow-x-auto pb-1 scrollbar-none">
  <%# Each pill gets flex-shrink-0 %>

Add CSS utility once in app/assets/stylesheets/application.css:

.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

4. Feature-by-Feature View Changes

4.1 Dashboard (organizations/dashboard/index.html.erb)

4.2 Accounts (organizations/accounts/index.html.erb)

4.3 Expenses (organizations/expenses/index.html.erb)

4.4 Investments (organizations/investments/index.html.erb)

4.5 Goals (organizations/goals/index.html.erb)

4.6 Analytics (organizations/analytics/index.html.erb)

4.7 Habits (organizations/habits/index.html.erb)

4.8 Sports & Workout Sessions

4.9 Notes (organizations/notes/)

4.10 Market Lists (organizations/market_lists/)

4.11 Birthdays / Countdowns

4.12 Construction Projects

4.13 Currency Converter

4.14 Gamification Pages

4.15 Simulator & Planning

4.16 Finance Settings (organizations/finance_settings/show.html.erb)

4.17 Memberships / Invitations

4.18 Auth Pages (Devise)

4.19 Landing Page / Static Pages

5. Bottom Navigation — Detailed Spec

Items (5 tabs + More)

"More" Drawer — Items

Categorised in two rows of 4:

Row 1: Goals · Analytics · Accounts · Simulator

Row 2: Sports · Notes · Market Lists · Gamification

Footer links: Planning · Birthdays · Countdowns · Construction · Converter · Settings

Visual Design

┌─────────────────────────────────────────────────────────────────┐
│                                                                   │
│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐             │
│  │  🏠  │  │  💸  │  │  ✅  │  │  📈  │  │  ⋯⋯  │             │
│  │ Home │  │Spend │  │Habits│  │Invest│  │ More │             │
│  └──────┘  └──────┘  └──────┘  └──────┘  └──────┘             │
│                  safe-area-inset-bottom                           │
└─────────────────────────────────────────────────────────────────┘

• Active tab: icon uses text-blue-400, label text-[11px] font-semibold text-white
• Inactive: text-gray-500 dark:text-gray-600 for both
• Active indicator: 2px top border border-t-2 border-blue-400 on the tab
• Background: var(--bg-sidebar) with border-t: 1px solid var(--sidebar-border)
• Height: ~52px + env(safe-area-inset-bottom) padding

Stimulus Controller: bottom-nav-controller.js

// app/javascript/controllers/bottom_nav_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["drawer", "backdrop"]

  openMore() {
    this.drawerTarget.classList.remove("translate-y-full")
    this.backdropTarget.classList.remove("hidden")
  }

  closeMore() {
    this.drawerTarget.classList.add("translate-y-full")
    this.backdropTarget.classList.add("hidden")
  }
}

"More" drawer — slides up from below the bottom nav:

┌─────────────────────────────────────┐
│ ╌╌ (drag handle) ╌╌                 │  ← rounded-t-2xl
│                                     │
│  🎯 Goals      📊 Analytics         │
│  🏦 Accounts   📐 Simulator         │
│                                     │
│  ⚽ Sports     📝 Notes             │
│  🛒 Market     ⚡ Gamification      │
│                                     │
│  ─ Planning · Birthdays · Converter │
└─────────────────────────────────────┘

6. Implementation Order (Sprints)

Sprint 1 — Foundation (no visual regressions)

1. Add pb-24 lg:pb-6 to main in layouts/application.html.erb
2. Create _table_scroll_wrapper.html.erb partial
3. Apply table scroll wrapper to: accounts, balance registries, investments, analytics
4. Add .scrollbar-none CSS utility to application.css
5. Convert all filter pill rows to overflow-x-auto scrollbar-none (expenses, investments, analytics, habits)

Sprint 2 — Modal Bottom Sheet

1. Update _turbo_modal.html.erb — bottom sheet on mobile, centred on desktop
2. Update modal animation classes
3. Add safe-area padding to modal body
4. Test all forms that open in modals: expenses, investments, goals, habits, accounts, balance registries

Sprint 3 — Bottom Navigation Bar

1. Rewrite _footer_nav.html.erb with 5-tab layout + "More" drawer
2. Create bottom_nav_controller.js Stimulus controller
3. Register controller in app/javascript/controllers/index.js
4. Update nav_link helper (or create bottom_nav_item helper) to render icon + label + active state

Sprint 4 — Page Header & FAB

1. Update _page_header.html.erb to support mobile_actions: + stack layout
2. Create _fab.html.erb shared partial
3. Create fab_controller.js Stimulus controller (speed-dial toggle)
4. Apply FAB to: accounts, dashboard, expenses, investments, goals

Sprint 5 — Feature Page Fixes

1. Dashboard: remove min-w-[280px], wrap KPI table
2. Expenses: fix summary cards grid, fix overflow
3. Investments: wrap table, fix filter pills
4. Analytics: wrap tables, verify chart heights
5. Goals: verify chart container overflow
6. Habits: verify touch targets
7. Sports / Notes / Market Lists / Birthdays / Countdowns: grid fixes

Sprint 6 — Auth & Static Pages

1. Devise pages: verify padding and form widths
2. Landing page: hero heading sizes, pricing grid, feature alternating layout
3. Static navbar hamburger

Sprint 7 — Polish & QA

1. Safe-area insets audit on iPhone SE (375px) and iPhone 14 (390px)
2. Touch target audit — all interactive elements ≥ 44px
3. Horizontal scroll regression test — no page should scroll horizontally
4. Dark mode regression test on mobile
5. Turbo navigation regression — bottom nav active state updates on navigate

7. CSS Tokens & Shared Utilities to Add

In app/assets/stylesheets/application.css (or app/assets/tailwind/application.css):

/* Safe-area bottom padding */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Hide scrollbar but keep functionality */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Bottom sheet slide-up animation */
.slide-up-enter {
  transform: translateY(100%);
}
.slide-up-enter-active {
  transform: translateY(0);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

8. DRY Pattern Summary

9. Files Changed — Complete Reference

10. Non-Goals (Out of Scope)

• Rearchitecting Stimulus controllers for touch-drag reordering (future enhancement)
• PWA offline improvements (separate concern)
• Admin views — staff-only tool, desktop-first is acceptable, excluded from this plan
• Adding swipe gestures to modals (can follow this plan)
• Changing the overall design language or colour palette

May the Force of clean, responsive HTML be with you, always.