alumni_lookup

Phase 4: Mobile-First Interface Cleanup

Status: ✅ Complete
Planning Completed: January 2026
Implementation: January 18, 2026
Prerequisites: Phase 3 Complete (Discussion Boards)

Related Documents:

• ../README.md — Phase Index
• ../../development/DESIGN-GUIDELINES.md — Design standards (§8 Mobile-First Polish, §10 Image Variant Sizing)

---

Completion Summary (January 18, 2026)

Phase 4 delivered a comprehensive mobile-first polish pass across the Champion Portal. All high-priority and medium-priority issues identified in the 43-screenshot mobile audit have been addressed.

Key Achievements

1. Mobile Navigation: Bottom nav overlap fixed globally with pb-20 sm:pb-0 pattern
2. Profile Wizard: Button visibility fixed, pill navigation for edit sections
3. Event Cards: Complete redesign with 8:5 aspect ratio images
4. Directory Filters: Collapsible on mobile with filter count badge
5. Image Variant Audit: All resize_to_fill calls audited and fixed to match display sizes
6. Reusable Components: scroll_to_selected_controller.js, _back_link.html.erb partial

✅ Completed Items (23 total)

Issue	Status	Notes
Bottom nav overlap	✅ Done	Added pb-20 sm:pb-0 padding globally
Profile wizard buttons	✅ Done	Fixed button overlap with bottom nav on steps 3-6
Quick Actions → hamburger	✅ Done	Moved from Dashboard to hamburger menu
Card margin inconsistencies	✅ Done	Standardized across views
Back link inconsistencies	✅ Done	Created shared partial, standardized chevron pattern
Hero section heights	✅ Done	Reduced to acceptable levels
Event detail duplicate back link	✅ Done	Removed bottom back link
Leadership member cards	✅ Done	Improved mobile layout
Message bubble width	✅ Done	Capped at reasonable width
Long text truncation	✅ Done	Fixed awkward line breaks
Form section spacing	✅ Done	Tightened accordion sections
Profile edit pill navigation	✅ Done	Replaced dropdown with scrollable pills
Settings pill navigation	✅ Done	Replaced dropdown with scrollable pills
Auto-scroll selected pill	✅ Done	Created scroll_to_selected_controller.js
Header logo breakpoint	✅ Done	Stacked logo until 1024px
Profile/Directory education text	✅ Done	Increased text and icon sizes
Save button full-width	✅ Done	Applied w-full sm:w-auto pattern
Privacy step spacing	✅ Done	Stacked layout with description above
Connected Accounts padding	✅ Done	Responsive padding added
Notifications padding	✅ Done	Responsive padding + button
Event list card redesign	✅ Done	Mobile: 8:5 full-width; Desktop: w-48 thumbnail right
Mobile column ordering	✅ Done	Dashboard: Events/District column shows first on mobile
Directory filters collapsible	✅ Done	Filters hidden on mobile with “Filters (X)” toggle button
Image variant sizing audit	✅ Done	Fixed 7 files with variant/display size mismatches

📋 Deferred to Backlog (Low Priority)

Issue	Priority	Notes
Profile wizard header tweaks	🟢 Low	Minor refinements to step headers
Message reactions sizing	🟢 Low	Reactions may be slightly small on mobile

Image Variant Fixes

The following files had variant sizes corrected to match display dimensions:

File	Before	After	Issue
_champion_card.html.erb	64×64	56×56	Matches w-14
directory/show.html.erb	128×128	112×112	Matches sm:w-28
events/show.html.erb	800×500	800×450	aspect-video is 16:9
_step_photo.html.erb	200×200	160×160	Matches w-40
_discussion_card_compact.html.erb	112×112	128×96/80×80	Rectangular displays
_event_card_compact.html.erb	112×112	128×112/128×96	Rectangular displays
_news_card_compact.html.erb	112×112	128×96/80×80	Rectangular displays

Tests

All 454 Champion Portal controller tests pass.

---

Table of Contents

Files: app/views/cp/discussions/_reactions.html.erb (or similar)

---

Table of Contents

1. Overview
2. Why This Phase Exists
3. Screenshot Audit Findings
4. Pattern Issues to Fix
5. Sub-Phases
6. Definition of Success
7. Documentation Updates

---

1. Overview

Phase 4 is a polish pass across all Champion Portal views to ensure mobile-first consistency, visual cohesion, and adherence to design guidelines before MVP launch.

What This Phase Delivers

Focus	Description
Mobile Consistency	Ensure all views work well on phone-sized screens
Design Alignment	Apply DESIGN-GUIDELINES.md patterns consistently
Pattern Standardization	Fix inconsistencies identified in screenshot audit
UX Polish	Loading states, error handling, transitions
Performance	Optimize images, lazy loading, pagination

Philosophy

This is NOT a redesign — it’s a consistency pass. The goal is to ensure everything built in Phases 1-3 works together cohesively on mobile devices before beta users arrive.

---

2. Why This Phase Exists

The Reality of Iterative Development

Features built across Phases 1-3 were developed incrementally. While each feature was tested individually, the holistic experience has inconsistencies:

• Different spacing/margins across views
• Inconsistent navigation patterns (back links)
• Mobile breakpoints that don’t align
• Filter UX that works on desktop but is cumbersome on mobile

Mobile-First Priority

Champions will primarily use the portal on mobile devices:

• Checking messages while commuting
• Looking up fellow Champions at events
• Quick profile updates between meetings

A desktop-first experience retrofitted to mobile creates friction. This phase establishes mobile as a first-class experience.

---

3. Screenshot Audit Findings

January 2026: Review of 43 mobile screenshots identified the following issues:

• 21 general views
• 7 profile wizard steps
• 5 additional (event detail, auth pages, invite)
• 5 leadership views (notifications dropdown, moderation, members, boards)
• 5 settings & support (settings sections, support threads, contact form)

Summary by Priority

Category	Issue Count	Priority
Bottom nav overlap	~20 views + wizard + forms	🔴 High
Profile wizard buttons hidden	4 steps (3-6)	🔴 CRITICAL
Mobile column ordering	Dashboard, 2-column layouts	🔴 HIGH
Card margins inconsistent	~10 views	🔴 High
Quick Actions placement	1 view	🔴 High
Section padding varies	~8 views	🔴 High
Wizard hero images	3 steps (3-5)	🟡 Medium
Back link inconsistency	~4 views (invite, event, others)	🟡 Medium
Duplicate back links	1 view (event detail)	🟡 Medium
Hero section too tall	~4 views	🟡 Medium
Discussion image handling	~3 views	🟡 Medium
Text truncation issues	~3 views	🟡 Medium
Filter UX cumbersome	1 view	🟡 Medium
Leadership member card layout	1 view	🟡 Medium
Notifications dropdown z-index	1 component	🟡 Medium
Rich text toolbar touch targets	1 view	🟡 Medium
Settings text wrapping	1 view	🟡 Medium
Message bubble width	1 view	🟢 Low
Event date badges	2 views	🟢 Low
Metric placeholders	1 view	🟢 Low
Form spacing	1 view	🟢 Low
Auth pages	0 issues	✅ Clean
Boards index	0 issues	✅ Clean
Support threads	0 issues	✅ Clean
Contact form	0 issues	✅ Clean
Settings - Connected Accounts	0 issues	✅ Clean

⚠️ Implementation Note: Long Pages

Several views are very long on mobile (Settings - Notifications, Settings - Account, Profile Wizard steps). Screenshots only captured the top portions. During implementation, scroll through entire pages to verify:

• Bottom content isn’t hidden behind nav
• Save/Submit buttons are accessible
• No unexpected layout breaks mid-page

Pages requiring full scroll review:

• Settings - Notifications (extensive options list)
• Settings - Account (multiple sections)
• Profile show (full profile with all sections)
• Community show (members list, events, discussions)
• Any paginated list view

View-by-View Audit

Dashboard (cp/dashboard/show.html.erb)

| Item | Status | Notes | |——|——–|——-| | Hero gradient | ✅ Good | Responsive, warm design | | Next Steps card | ⚠️ Review | Inconsistent padding | | Community snapshot | ⚠️ Review | Photo grid on small screens | | Quick Actions row | 🔴 Fix | Move to hamburger menu — takes too much space, duplicates menu functionality | | Bottom nav overlap | 🔴 Fix | Content extends behind fixed nav |

Directory (cp/directory/index.html.erb)

| Item | Status | Notes | |——|——–|——-| | Search/filter bar | 🔴 Fix | Make filters collapsible — takes too much vertical space | | Champion cards | ✅ Good | Card layout responsive | | Card margins | 🔴 Fix | Inconsistent horizontal margins | | Pagination | ✅ Good | “Load more” pattern | | Empty state | ⚠️ Review | Verify copy per DESIGN-GUIDELINES |

Profile (cp/profile/show.html.erb)

| Item | Status | Notes | |——|——–|——-| | Hero section | 🟡 Review | Takes 40-50% viewport — reduce padding | | Hero overlap | ✅ Good | Phase 1.9.3 refresh applied | | Section cards | ⚠️ Review | Inconsistent shadow/spacing | | Education display | ✅ Good | College icons, truncation | | Actions (Edit/View Public) | 🟡 Review | Consider moving outside hero on mobile |

Communities Index (cp/communities/index.html.erb)

Note: There is no separate “explore” view — index handles all community browsing.

Item	Status	Notes
Tab navigation	⚠️ Review	Works on small screens?
Community cards	✅ Good	Activity scores visible
Long names	🟡 Fix	“College of Lib. Arts & S…” truncates mid-word
Join/Leave actions	⚠️ Review	Button consistency
Card margins	🔴 Fix	Inconsistent horizontal margins

Community Show (cp/communities/show.html.erb)

| Item | Status | Notes | |——|——–|——-| | Hero section | 🟡 Review | Too tall on mobile | | Back link | 🟡 Fix | Uses different pattern than other views | | Action buttons | ✅ Good | Manage/Leave buttons |

Messages (cp/messages/index.html.erb)

| Item | Status | Notes | |——|——–|——-| | Thread list | ✅ Good | Simple, scannable | | Unread indicators | ✅ Good | Badge styling | | Bottom nav overlap | 🔴 Fix | May hide last thread | | Empty state | ⚠️ Review | Per DESIGN-GUIDELINES |

Message Thread (cp/messages/show.html.erb)

| Item | Status | Notes | |——|——–|——-| | Message bubbles | 🟢 Polish | Cap width at 75% | | Input area | ⚠️ Review | Doesn’t overlap bottom nav? | | Back link | 🟡 Fix | Inconsistent pattern |

News (cp/news/index.html.erb)

| Item | Status | Notes | |——|——–|——-| | Card grid | ✅ Good | Responsive stacking | | Card margins | 🔴 Fix | Inconsistent horizontal margins | | Image handling | ⚠️ Review | Aspect ratios consistent | | Pagination | ✅ Good | Standard pattern |

Events (cp/events/index.html.erb)

| Item | Status | Notes | |——|——–|——-| | Time filter tabs | ⚠️ Review | Tab styling mobile | | Event cards | 🟢 Polish | Date badge proportions | | RSVP actions | ⚠️ Review | Button placement | | Filter dropdowns | 🟡 Fix | Consider collapsible |

Discussions (cp/discussions/index.html.erb)

| Item | Status | Notes | |——|——–|——-| | “Hot Discussions” card | ✅ Good | Featured with large image | | List items | 🟡 Review | Establish thumbnail vs. feature pattern | | Card margins | 🔴 Fix | Inconsistent | | Back link | 🟡 Fix | Uses ← instead of chevron |

Discussion Detail (cp/discussions/show.html.erb)

| Item | Status | Notes | |——|——–|——-| | Post content | ✅ Good | Images display well | | Comment area | ⚠️ Review | Touch targets for toolbar | | Back link | 🟡 Fix | Inconsistent with other views |

Leadership Dashboard (cp/leadership/index.html.erb)

| Item | Status | Notes | |——|——–|——-| | Metric cards | ✅ Good | 2×2 grid works | | Placeholder text | 🟢 Polish | “Events (Phase 2)” too long | | Recent members | ⚠️ Review | Name truncation |

Settings (cp/settings/show.html.erb)

| Item | Status | Notes | |——|——–|——-| | Section navigation | ⚠️ Review | Works on mobile? | | Form inputs | ⚠️ Review | Touch-friendly sizing | | Action buttons | ⚠️ Review | Consistent styling |

Edit Profile (cp/profile/edit.html.erb)

| Item | Status | Notes | |——|——–|——-| | Accordion sections | 🟢 Polish | Tighten content spacing | | Form fields | ✅ Good | Single column | | Back link | ⚠️ Review | Consistent pattern |

Profile Wizard (cp/profile_wizard/show.html.erb)

All 7 steps reviewed (Jan 2026 screenshots)

Step	Item	Status	Notes
All	Bottom nav overlap	🔴 CRITICAL	Steps 3-6 show action buttons hidden behind nav
All	Back/Skip/Continue layout	🟡 Fix	Horizontal arrangement too cramped on mobile
1	Education confirmation	✅ Good	Card layout clean
1	Error banner	⚠️ Bug	“Invalid wizard step” showing in dev
2	Location step	✅ Good	Two-button pattern works
2	Info box	🟡 Review	“Local connections matter” — consider collapsible
3-5	Hero image	🔴 Fix	Takes ~100px — remove from wizard steps
3	Champion Role card	✅ Good	Role selection clear
4	Profession form	✅ Good	Form fields standard
5	Photo upload	✅ Good	Photo tips helpful
6	Affinities search	✅ Good	Category dropdown + checkboxes
6	Selected items	✅ Good	Pill display with ✕
7	Privacy settings	✅ Good	Dropdowns accessible
7	Celebration box	✅ Good	“You’re almost done!” motivating

Critical Issue: Steps 3, 4, 5, and 6 clearly show the “Skip for now” text and buttons being cut off by the fixed bottom navigation. The pb-20 fix is essential here.

Recommendation: Remove decorative hero image from wizard steps 3-5 to maximize vertical content space on mobile. The wizard is already branded with the header — the hero adds no functional value.

---

Event Detail (cp/events/show.html.erb)

Item	Status	Notes
Hero image	✅ Good	Appropriately sized, nice overlay
College tags	✅ Good	Pills format works
Date/time/location	✅ Good	Clear with icons
RSVP button	✅ Good	Prominent, accessible
Views/clicks stats	✅ Good	Subtle, informative
Back link (TOP)	🟡 Fix	“← All Events” uses arrow, should be chevron
Back link (BOTTOM)	🟡 Fix	Has BOTH top and bottom — pick one location
Bottom nav overlap	🔴 Fix	Long descriptions may extend behind nav

Recommendation: Remove bottom “← Back to All Events” link — the top link is sufficient. Reduces redundancy and frees space.

---

Auth Pages (cp/sessions/new.html.erb, cp/registrations/new.html.erb)

Item	Status	Notes
Hero section	✅ Good	Subtle, appropriate height
Google OAuth button	✅ Good	Clear, well-styled
Form fields	✅ Good	Touch-friendly sizing
“What happens next?”	✅ Good	Helpful onboarding copy
Buttons (Sign In/Create)	✅ Good	Full-width, accessible
No bottom nav	✅ Correct	Unauthenticated pages correctly omit it

Remember Me Interstitial: | Item | Status | Notes | |——|——–|——-| | Two-button layout | ✅ Good | Clear primary/secondary | | Explanation box | ✅ Good | Helpful security context | | Security note | ✅ Good | Appropriate warning |

✅ Auth pages are clean — no significant mobile issues!

---

Invite Page (cp/invites/new.html.erb)

Item	Status	Notes
Hero section	✅ Good	Icon + title appropriate size
Two options layout	✅ Good	Clear separation between link/email
Copy button	✅ Good	Accessible and functional
Email form	✅ Good	Standard inputs, textarea
Personal note field	✅ Good	Appropriate height
Send button	✅ Good	Full-width
Back link	🟡 Fix	“← Back to Dashboard” uses arrow, should be chevron
Bottom nav overlap	🔴 Verify	May hide content at bottom

---

Notifications Dropdown

Item	Status	Notes
Dropdown positioning	⚠️ Issue	Text from page behind bleeds through (z-index?)
Notification items	✅ Good	Clear icon + text + timestamp layout
Text truncation	✅ Good	Long text truncates with ellipsis
Touch targets	✅ Good	Items are adequate tappable height
Icon differentiation	✅ Good	Bell vs calendar icons distinguish types

---

Moderation Queue (cp/leadership/moderation/queue.html.erb)

Item	Status	Notes
Back link	✅ Good	Uses chevron < correctly
Page title	✅ Good	Icon + title + subtitle clear
Flagged Posts section	✅ Good	Empty state with checkmark
Flagged Comments section	✅ Good	Card layout with flag details
Action buttons	✅ Good	View/Hide/Escalate accessible
Recent Actions list	🔴 Fix	Long list extends behind bottom nav
Action badges	✅ Good	Color-coded (Hide, Lock, Unlock)
Moderation Tips	✅ Good	Helpful guidance box
Bottom nav overlap	🔴 Fix	Tips section may be partially hidden

---

Leadership Members (cp/leadership/members.html.erb)

Item	Status	Notes
Breadcrumb navigation	✅ Good	My Leadership > Community > Members
Tab navigation	✅ Good	All Members / Active This Week / New This Month
Stats summary	✅ Good	“4 total members · 4 active this week”
Member cards	🟡 Fix	Layout awkward — badges + buttons crowded
“Active this week” badge	✅ Good	Green badge visible
“New” badge	✅ Good	Blue badge visible
Text wrapping	🟡 Fix	Details breaking oddly (“Nashville TN”, “Ministry ‘10”)
View Profile / Welcome buttons	⚠️ Review	Crowded on same line as location
Bottom nav overlap	🔴 Fix	Member list extends behind nav

Recommendation: Restructure member cards to stack information more cleanly on mobile:

[Avatar] Name
         Badges (Active, New)
         Location · Major · Joined date
         [View Profile] [Welcome]

---

Community Discussions / Boards (cp/boards/index.html.erb)

Item	Status	Notes
Back link	✅ Good	Uses chevron < correctly
Hero section	✅ Good	Appropriate height with icon
New post button	✅ Good	+ button accessible
“Hot Discussions” featured	✅ Good	Image + text card layout works
Title truncation	✅ Good	“What’s the bes…” truncates properly
Metadata display	✅ Good	Author, time, comments
“All Discussions” section	✅ Good	Clear section divider

---

New Discussion Form (cp/boards/new.html.erb or cp/discussions/new.html.erb)

Item	Status	Notes
Back link	✅ Good	Uses chevron < correctly
Page title	✅ Good	Icon + “Start a Discussion”
Form fields	✅ Good	Touch-friendly sizing
Rich text toolbar	⚠️ Review	Small icons — verify 44px touch targets
Textarea	✅ Good	Appropriate default height
Image upload	✅ Good	Clear dropzone with file type info
Guidelines callout	✅ Good	Blue info box, prominent
Post/Cancel buttons	🔴 Fix	May be hidden behind bottom nav
Bottom nav overlap	🔴 Fix	Buttons at risk

---

Settings - Account (cp/settings/show.html.erb section: account)

Item	Status	Notes
Section dropdown	✅ Good	Works for navigation between settings sections
Email change form	🟡 Review	Helper text wrapping is awkward (“We will send a confirmation…”)
Password section	✅ Good	Clear change password form
Blocked Users	✅ Good	Clear list with unblock actions
Request Deletion	✅ Good	Red destructive button prominent
Page length	⚠️ Long	Very long scrolling page
Bottom nav overlap	🔴 Verify	Content may extend behind nav

---

Settings - Connected Accounts (cp/settings/show.html.erb section: connected_accounts)

Item	Status	Notes
Hero section	✅ Good	Blue gradient with section title
Section dropdown	✅ Good	Easy section switching
Google connection	✅ Good	Clear connected status display
“More options” note	✅ Good	Expectation setting for future providers
Card layout	✅ Good	Clean and simple

---

Settings - Notifications (cp/settings/show.html.erb section: notifications)

Item	Status	Notes
Section organization	✅ Good	Clear grouping by notification type
Toggle switches	✅ Good	Touch-friendly In-App/Email toggles
Frequency dropdowns	✅ Good	Clear options for email frequency
Page length	⚠️ Very Long	Extensive scrolling required
Save Preferences button	🔴 Fix	At bottom of very long page, may overlap nav
Bottom nav overlap	🔴 Fix	Save button at high risk

---

Support Threads Index (cp/support_threads/index.html.erb)

Item	Status	Notes
Back link	✅ Good	Uses chevron < correctly
“New Message” button	✅ Good	Prominent position and color
Section tabs	✅ Good	Active/Resolved clear segmentation
Thread cards	✅ Good	Shows subject, timestamp, status badge
Status badges	✅ Good	“In Progress”, “Resolved” color-coded
Empty state	✅ Verify	Ensure encouraging message if no threads
Bottom nav overlap	🔴 Visible	Thread list extends behind bottom nav

---

Contact Engagement Team (cp/support_threads/new.html.erb)

Item	Status	Notes
Back link	✅ Good	Uses chevron < correctly (“Back to Support”)
Page title	✅ Good	Clear heading with icon
Form fields	✅ Good	Subject and message fields appropriate
Tips box	✅ Good	Helpful guidance for users
Cancel/Send buttons	🔴 Verify	May overlap with bottom nav
Touch targets	✅ Good	Form elements adequately sized

---

4. Pattern Issues to Fix

🔴 High Priority (Affects Most Views)

4.1 Fixed Bottom Navigation Overlap

Issue: The bottom navigation bar is position: fixed, but pages don’t account for this, causing content to be hidden behind the nav.

Affected Views: All Champion Portal pages (~15 views)

Fix: Add consistent pb-20 sm:pb-0 (80px mobile, 0 desktop) padding to main content containers.

Implementation:

<%# In app/views/layouts/champions.html.erb or individual views %>
<main class="pb-20 sm:pb-0">
  <%# Content %>
</main>

---

4.2 Inconsistent Card Horizontal Margins

Issue: Cards have varying horizontal margins — some edge-to-edge, some with mx-3, some with mx-4.

Affected Views: Dashboard, Communities, News, Events, Discussions (~10 views)

Fix: Standardize to mx-4 sm:mx-0 (16px mobile, 0 desktop in grids).

Pattern:

<div class="mx-4 sm:mx-0">
  <div class="bg-white rounded-xl shadow-sm p-4 sm:p-6">
    <%# Card content %>
  </div>
</div>

---

4.3 Quick Actions — Move to Hamburger Menu

Issue: The Quick Actions 2×2 grid (Edit Profile, Find Alumni, Invite Friends, Help) on the Dashboard:

• Takes significant vertical space (~200px)
• Icons are disproportionately large
• Duplicates functionality available in navigation

Decision: Move Quick Actions to hamburger menu.

Rationale:

• Actions are accessible from any page via menu
• Frees Dashboard for more valuable content (community, messages, news)
• Reduces visual noise on most important page

Implementation:

• Remove Quick Actions card from Dashboard mobile view
• Verify hamburger menu contains: Edit Profile, Find Alumni, Invite Friends, Help, Settings
• Keep on desktop Dashboard as subtle row per DESIGN-GUIDELINES §6.8 (optional)

---

4.4 Inconsistent Section Padding

Issue: Card internal padding varies (p-4 vs p-6 vs p-5) creating visual inconsistency.

Affected Views: Most card-based views (~8 views)

Pattern to Establish:

Breakpoint	Card Internal Padding	Section Spacing
Mobile (< 640px)	p-4 (16px)	space-y-4
Desktop (≥ 640px)	p-6 (24px)	space-y-6

---

🟡 Medium Priority

4.5 Back Link Inconsistency

Issue: “Back to X” links use different patterns:

• Some use left arrow ←
• Some use chevron <
• Inconsistent capitalization (“Back to Dashboard” vs “Back to Discussions”)
• Different text colors

Affected Views: Discussion detail, Event detail, Profile, News detail, Community show (~6 views)

Pattern to Establish:

<%# app/views/shared/_back_link.html.erb %>
<%= link_to path, class: "inline-flex items-center gap-1 text-gray-600 hover:text-belmontblue text-sm mb-4" do %>
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
  </svg>
  Back to <%= section_name %>
<% end %>

Rules:

• Always use chevron icon (<)
• Format: “Back to [Section Name]” (title case)
• Color: text-gray-600 with hover:text-belmontblue
• One location only — top of page preferred, not both top and bottom

Special Case — Event Detail: Event detail currently has BOTH “← All Events” at top AND “← Back to All Events” at bottom. Remove the bottom link — it’s redundant and wastes space.

---

4.6 Hero Sections — Reduce Mobile Height

Issue: Hero sections (Profile, Community Show) consume 40-50% of initial viewport, pushing content below the fold.

Affected Views: Profile show, Community show, Leadership Dashboard (~4 views)

Fix: Reduce hero padding on mobile while maintaining brand presence.

Element	Mobile	Desktop
Hero padding	py-4 or py-5	py-8
Profile photo	w-20 h-20	w-24 h-24
Action buttons	Below hero, full-width	Inside hero

Principle: Heroes should help users know where they are (~35% max viewport), but content is king.

---

4.7 Discussion Card Image Handling

Issue: Discussion cards have inconsistent image treatment.

Pattern to Establish:

Context	Image Treatment
“Hot Discussions” / Featured	Large image above text, full card width, h-40
List items with image	Small thumbnail on right, w-20 h-20 max
List items without image	No placeholder needed

---

4.8 Long Text Truncation

Issue: Long names truncate awkwardly mid-word (e.g., “College of Lib. Arts & S…”)

Affected Views: Communities index, Directory cards, Event cards (~3 views)

Pattern:

Content Type	Strategy	Tailwind Class
Community names	Allow 2-line wrap	line-clamp-2
Person names	Single line truncate	truncate
Descriptions	2-line clamp	line-clamp-2

---

4.9 Directory Filters — Collapsible on Mobile

Issue: Filter section (District, College, Graduation Year, Group/Organization) takes significant vertical space, pushing results far down.

Fix: Make filters collapsible on mobile with applied filter count.

Pattern:

┌─────────────────────────────────┐
│ 🔍 Search by name...   [Search] │
├─────────────────────────────────┤
│ Filters (2 applied)        [▼]  │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│ (collapsed by default on mobile)│
├─────────────────────────────────┤
│ 17 champions found  Sort: A-Z ▼ │
└─────────────────────────────────┘

Implementation:

• Use or create collapsible_filters_controller.js Stimulus controller
• Show filter count badge when filters applied
• Remember collapse state in localStorage
• Filters always visible on desktop (≥ 640px)

---

4.10 Leadership Members Card Layout

Issue: Member cards on Leadership Members page have awkward mobile layout:

• Badges, location, and buttons all compete for horizontal space
• Text breaks oddly (“Nashville TN” on one line, “Ministry ‘10” on another)
• “View Profile” and “Welcome” buttons crowded

Affected Views: cp/leadership/members.html.erb

Current Layout (problematic):

[Avatar] Name
         Active this week  Nashville, TN  [View Profile] [Welcome]
         Ministry '10
         Joined Jan 2026

Recommended Layout:

[Avatar] Name
         [Active] [New]           ← Badges on own line
         Nashville, TN · Ministry '10 · Joined Jan 2026
         [View Profile]  [Welcome]   ← Buttons on own line

Fix: Stack elements vertically on mobile, allow horizontal on desktop.

---

🟢 Lower Priority / Polish

4.11 Message Bubble Max Width

Issue: Message bubbles may be too wide on larger phones.

Fix: Cap at max-w-[75%] of container.

---

4.12 Event Date Badge Proportions

Issue: Date badges take significant horizontal space.

Fix: On mobile, make date badge smaller (w-12 instead of w-16).

---

4.13 Leadership Dashboard Metric Placeholders

Issue: “Events (Phase 2)” placeholder text is too long.

Fix: Show “—” with short label: <div>—</div><div class="text-xs">Events</div>

---

4.14 Form Section Spacing

Issue: Profile edit accordion sections have excess whitespace between header and content.

Fix: Tighten to pt-4 from pt-6.

---

4.15 Profile Wizard — Mobile Critical Fixes

Issue: The 7-step Profile Wizard has several mobile-specific issues:

1. 🔴 CRITICAL: Bottom nav overlap — Steps 3-6 show action buttons (“Skip for now”, “Continue”) hidden behind the fixed bottom navigation
2. 🟡 Hero images in wizard — Steps 3-5 display decorative campus hero images (~100px tall) that waste valuable vertical space
3. 🟡 Button bar layout — Horizontal arrangement of Back + Skip + Continue is cramped on mobile

Affected Files: app/views/cp/profile_wizard/show.html.erb, step partials

Fixes:

Issue	Solution
Bottom nav overlap	Apply pb-20 sm:pb-0 to wizard container
Hero images	Remove from mobile (hidden sm:block) or remove entirely from wizard steps
Button layout	Consider stacking Skip/Continue on mobile with wider spacing

Implementation:

<%# Wizard footer - improved mobile layout %>
<div class="flex flex-col sm:flex-row items-center gap-3 pb-24 sm:pb-6">
  <%= link_to "Back", ..., class: "text-gray-600 hover:text-belmontblue" %>
  <div class="flex items-center gap-4">
    <%= link_to "Skip for now", ..., class: "text-sm text-gray-500" %>
    <%= button_tag "Continue", class: "bg-belmontblue text-white px-6 py-2 rounded-lg" %>
  </div>
</div>

---

4.16 Mobile Column Ordering (Two-Column Layouts)

Issue: On desktop, many pages use a 2-column layout:

• Left column: Main content (community snapshot, news, events)
• Right column: Sidebar content (profile summary, messages, quick actions)

On mobile, these collapse to single-column. By default with flex-col, left column content appears first. However, some right-column content (like upcoming events) may be more important on mobile than some left-column content.

Current Behavior: Right column content appears AFTER left column content.

Affected Views:

• Dashboard (cp/dashboard/show.html.erb) — Events section may need higher visibility on mobile
• Community show (cp/communities/show.html.erb) — Upcoming events vs other content
• Any view with sidebar + main content layout

Consideration: Content priority may differ between mobile and desktop users:

• Mobile: “What’s happening soon?” (events, messages) may trump “community overview”
• Desktop: More screen space allows showing everything with equal weight

Potential Solutions:

1. Tailwind order- classes: ```erb <%# Desktop: sidebar on right, Mobile: events card first %>

<%# Main content %>

<%# Sidebar with events — appears first on mobile %>

2. **CSS Grid with named areas:**
```css
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-areas:
      "events"
      "messages"
      "community"
      "profile";
  }
}

1. Duplicate critical content (less ideal — maintenance burden)

Recommendation: Use Tailwind order- classes. Review each 2-column layout to determine mobile content priority.

Mobile Content Priority (based on JTBD analysis):

Content Block	Mobile Priority	JTBD Rationale
Upcoming Events	🔴 HIGH	Job C3 (Host Gathering) + C5 (Stay in Loop) — “What’s happening?” is a primary mobile use case
Community Snapshot	🔶 MEDIUM-HIGH	Job C1 (Find My Tribe) + C9 (Feel Like I Belong) — Connection to local community
News/Posts	🔶 MEDIUM	Job C5 (Stay in Loop) — Fresh content for return visits
Messages	🟡 MEDIUM	Already accessible via bottom nav + notifications bell; don’t need duplicate prominence
Profile Summary	🔽 LOW	User already knows their own profile
Quick Actions	🔽 LOWEST	Moving to hamburger menu anyway

Note: Messages de-prioritized because Champions have multiple access points (bottom nav icon, notifications dropdown). Events have no other prominent entry point on the Dashboard.

---

5. Sub-Phases

Sub-Phase 4.1: Global Layout Fixes ✅

Goal: Fix issues affecting all or most views.

Status: Complete

Deliverables:

• Add pb-20 sm:pb-0 to champions layout for bottom nav padding
• Move Quick Actions from Dashboard to hamburger menu
• Standardize card horizontal margins (mx-4 sm:mx-0)
• Standardize card internal padding (p-4 sm:p-6)
• Mobile column ordering — Reorder Dashboard sections for mobile priority (Events first) ← REMAINING

Files:

• app/views/layouts/champions.html.erb
• app/views/cp/dashboard/show.html.erb
• app/views/shared/_mobile_nav.html.erb (or equivalent menu)

---

Sub-Phase 4.2: Component Consistency 🚧

Goal: Create/update shared components for consistency.

Status: Mostly Complete

Deliverables:

• Create app/views/shared/_back_link.html.erb partial
• Update all views to use back link partial
• Create collapsible_filters_controller.js Stimulus controller ← REMAINING
• Implement collapsible filters on Directory ← REMAINING
• Button audit — consistent sizing, colors, states
• Card audit — consistent shadows, borders, padding
• Empty state audit — follow DESIGN-GUIDELINES §5.5
• Loading state audit — skeleton screens vs spinners
• Error state audit — friendly messages, recovery actions

Files:

• app/views/shared/_back_link.html.erb ✅
• app/javascript/controllers/collapsible_filters_controller.js (needed)
• app/views/cp/directory/index.html.erb
• All views with back links (~6 files) ✅

---

Sub-Phase 4.3: Hero Section Polish ✅

Goal: Reduce hero heights on mobile while maintaining brand presence.

Status: Complete (mostly)

Deliverables:

• Profile show — reduce hero padding, move buttons outside on mobile
• Community show — reduce hero padding
• Leadership dashboard — verify hero doesn’t dominate

Files:

• app/views/cp/profile/show.html.erb
• app/views/cp/communities/show.html.erb
• app/views/cp/leadership/show.html.erb

---

Sub-Phase 4.3b: Profile Wizard Mobile Fixes ✅

Goal: Fix critical issues in the 7-step profile wizard flow.

Status: Complete (minor header tweaks possible)

Deliverables:

• Add pb-24 sm:pb-6 padding to wizard container for bottom nav clearance
• Remove/hide hero images on mobile from steps 3-5 (hidden sm:block)
• Improve Back/Skip/Continue button layout on mobile
• Verify all 7 steps accessible at 320px width
• Fix “Invalid wizard step” error banner
• Minor header refinements ← OPTIONAL REMAINING

Files:

• app/views/cp/profile_wizard/show.html.erb
• app/views/cp/profile_wizard/_step_*.html.erb
• Related Stimulus controllers

---

Sub-Phase 4.4: View-Specific Fixes ✅

Goal: Address medium/low priority issues in specific views.

Status: Mostly Complete

Deliverables:

• Discussions — establish image handling pattern (featured vs. thumbnail)
• Communities — fix long name truncation (line-clamp-2)
• Messages — cap bubble width at 75%
• Events — review date badge proportions
• Leadership — fix metric placeholder text (“—”)
• Edit Profile — tighten form section spacing
• Event List Card Redesign — Mobile vertical layout with image on top ← REMAINING
• Message reactions — touch targets may be slightly small ← OPTIONAL

---

Sub-Phase 4.5: Mobile Breakpoint Verification ✅

Goal: Verify all views render correctly at mobile breakpoints.

Status: Complete

Test Breakpoints: | Breakpoint | Device | Width | |————|——–|——-| | XS | Small phone | 320px | | SM | Standard phone | 375px | | MD | Large phone | 414px | | LG | Tablet | 768px+ |

Deliverables:

• Screenshot each major view at 320px and 375px
• Verify no horizontal scrolling
• Verify all content accessible above bottom nav
• Verify touch targets ≥ 44px
• Dashboard — all sections readable at 320px
• Directory — search/filter usable at 320px
• Profile — no horizontal scroll at any breakpoint
• Communities — tabs accessible at 320px
• Messages — thread list scannable
• News/Events — cards stack properly
• Settings — sections navigable on mobile

---

Sub-Phase 4.6: Touch Target Optimization ✅

Goal: Ensure all interactive elements meet minimum touch target size.

Status: Complete (minor reaction size review possible)

Requirements per WCAG/Apple HIG:

• Minimum touch target: 44×44px
• Adequate spacing between targets (8px minimum)
• No overlapping touch areas

Deliverables:

• Audit all buttons, links, icons
• Fix undersized touch targets
• Add padding to icon-only buttons
• Verify dropdown/autocomplete usability

---

Sub-Phase 4.7: Performance Polish

Goal: Optimize loading performance on mobile networks.

Deliverables:

• Image optimization — WebP format, responsive sizes
• Lazy loading — off-screen images load on scroll
• Pagination review — consistent “load more” pattern
• N+1 query check — no new N+1s introduced
• Stimulus controller cleanup — no unused controllers

---

Sub-Phase 4.8: Visual Consistency

Goal: Apply final visual polish per DESIGN-GUIDELINES.md.

Deliverables:

• Color consistency — Belmont Blue/Red usage audit
• Typography consistency — heading sizes, line heights
• Spacing consistency — margins, padding patterns
• Icon consistency — Heroicons usage throughout
• Shadow consistency — card elevation patterns

---

6. Definition of Success

Functional Criteria

• No content hidden behind bottom navigation on any page
• All cards have consistent horizontal margins (mx-4 sm:mx-0)
• All cards have consistent internal padding (p-4 sm:p-6)
• Back links use consistent pattern across all views
• Directory filters are collapsible on mobile
• Quick Actions accessible via hamburger menu (not Dashboard)
• All views render correctly at 320px width
• All interactive elements meet 44px minimum touch target
• No horizontal scrolling on any mobile view
• Loading states exist for all async operations
• Error states are user-friendly and actionable

Visual Consistency

• Hero sections don’t exceed ~35% of mobile viewport
• Long text truncates gracefully (no mid-word cuts)
• Message bubbles capped at reasonable width
• Consistent visual rhythm across all views
• Consistent visual language across all views

Quality Criteria

• Lighthouse mobile score ≥ 80 on all major views
• No accessibility violations (WCAG AA)
• Page load < 3s on 3G connection

User Experience

• Can reach main content without scrolling on most pages
• Filter state preserved when toggling visibility
• Champion can complete common tasks on phone-only
• Navigation is intuitive without training
• Visual hierarchy guides attention appropriately
• Design feels “warm” not “sterile” per DESIGN-GUIDELINES

---

7. Documentation Updates

After completing Phase 4:

• Update ../README.md — mark Phase 4 complete
• Update roadmap_controller.rb with Phase 4 status
• Update ../../development/DESIGN-GUIDELINES.md §8 if patterns evolved
• Add mobile-specific patterns to component documentation
• Update CHANGELOG.md

---

Files to Create/Modify Summary

New Files

| File | Purpose | |——|———| | app/views/shared/_back_link.html.erb | Consistent back navigation | | app/javascript/controllers/collapsible_filters_controller.js | Toggle filter visibility |

Files to Modify

| File | Changes | |——|———| | app/views/layouts/champions.html.erb | Add pb-20 sm:pb-0 to main | | app/views/cp/dashboard/show.html.erb | Remove Quick Actions section | | app/views/shared/_mobile_nav.html.erb | Add Quick Action items | | app/views/cp/directory/index.html.erb | Collapsible filters | | app/views/cp/profile/show.html.erb | Reduce hero, move buttons | | app/views/cp/communities/show.html.erb | Reduce hero height | | app/views/cp/messages/show.html.erb | Cap bubble max-width | | Multiple views | Update back links to use partial | | Multiple views | Standardize card margins/padding |

---

Questions Resolved

Question	Decision
Bottom nav is fixed or scrolling?	Fixed — need pb-20 padding on all pages
Quick Actions placement?	Move to hamburger menu — accessible on all pages
Filter UX on mobile?	Collapsible with filter count badge
Hero section aggressiveness?	Reduce but maintain brand presence (~35% max viewport)

---

Tools & Testing

Browser DevTools

• Chrome mobile emulation for breakpoint testing
• Lighthouse for performance auditing
• Accessibility audit in DevTools

Physical Devices

• Test on actual iOS and Android phones
• Verify touch targets feel right in hand
• Check loading performance on cellular

Design Review

• Screenshot each view at each breakpoint
• Compare against DESIGN-GUIDELINES
• Document deviations for fix or guideline update

---

Related Documentation

Document	Purpose
../../development/DESIGN-GUIDELINES.md	Visual standards
../../JOBS-TO-BE-DONE.md	User context
../phase-1/1.9-pre-beta-polish.md	Previous polish work

---

This phase ensures the Champion Portal is ready for mobile-first beta users.