[FRONTEND] Responsive Mobile Layout and RTL Support for Courses Pages

[smattymatty]

Claiming This Task

Before you start working, check the Assignees section. If no one is assigned, leave a comment claiming the issue and assign it to yourself. This prevents duplicate work.

See the Community Wiki for contributing guidelines and git workflow.

Goal

Make all courses pages look and feel great on mobile devices, matching the responsive quality of the slideshow and profile pages. This includes card layouts, collapsible filters, touch-friendly controls, and proper RTL (Arabic) support.

Task Description

1. Course List Page — Mobile Card Layout

• Desktop (md+): Table layout with columns (current behavior)
• Mobile (<md): Switch to stacked cards showing:
  • Course title (large, clickable)
  • Subject + Language badges
  • Member count
  • Visibility icon
  • Action button (Join/View/Leave)
• Use Tailwind responsive classes (hidden md:block, md:hidden, etc.)
• Reference: SlideshowListPage.tsx handles this pattern

2. Course List Page — Collapsible Filters

• On mobile, filters should be hidden behind a "Filters" toggle button
• Button shows active filter count badge (e.g., "Filters (2)")
• Tapping opens a slide-down panel with all filter dropdowns
• Close button or tap-outside to dismiss
• Smooth height transition animation

3. Course Detail Page — Stacked Layout

• Desktop (lg+): Side-by-side layout for metadata + tabs
• Mobile (<lg): Single column, stacked vertically:
  1. Course header with metadata
  2. Enrollment action buttons (full-width)
  3. Tab bar (Members / Modules) — horizontally scrollable if needed
  4. Tab content below
• Ensure modals (invite member, delete course, etc.) are properly sized:
  • max-w-sm on mobile, max-w-md on desktop
  • Internal content scrolls if it overflows viewport height

4. Touch-Friendly Controls

• Action buttons: minimum 44x44px touch target (per Apple HIG)
• Context menus / dropdowns: larger tap areas on mobile
• Swipe gesture support between Members and Modules tabs (optional, stretch goal)
• Role badges and status indicators: large enough to read and tap

5. RTL (Arabic) Layout Testing & Fixes

• Switch to Arabic and verify every courses page:
  • Text alignment flips correctly
  • Icons on the correct side (e.g., arrows flip direction)
  • LazySelect dropdowns open in the right direction
  • Pagination controls mirror correctly
  • Modal close buttons in correct corner
  • Filter panel opens from correct side
• Fix any layout issues found

6. Course Form Page — Mobile Optimization

• Form fields stack to single column on mobile
• Date pickers are usable on mobile (native <input type="date"> or mobile-friendly picker)
• Save/Cancel buttons: sticky bottom bar on mobile for easy access
• Outline textarea: reasonable min-height on mobile

Definition of Done

• Course list page shows cards on mobile, table on desktop
• Filters are collapsible on mobile with active count badge
• Course detail page stacks vertically on mobile
• All touch targets meet 44x44px minimum
• All modals are usable on mobile screens
• Arabic RTL layout works correctly on all courses pages
• No horizontal overflow / scroll issues on mobile
• No console errors on any viewport size
• Tested on: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1024px+ (desktop)

Benefits

EduLite is built for areas with limited resources — many users will access it on mobile devices. Making courses mobile-friendly isn't optional, it's core to our mission. The contributor will gain practical experience with responsive design patterns used in production applications.

Skills You'll Practice

• Tailwind CSS responsive design (breakpoint prefixes)
• Mobile-first development approach
• Touch target sizing and mobile UX best practices
• RTL layout debugging
• Responsive component patterns (table → card, side-by-side → stacked)
• CSS transitions and animations

Files to be Altered

• Frontend/EduLiteFrontend/src/pages/CourseListPage.tsx — card layout + collapsible filters
• Frontend/EduLiteFrontend/src/pages/CourseDetailPage.tsx — stacked layout + touch targets
• Frontend/EduLiteFrontend/src/pages/CourseFormPage.tsx — mobile form optimization
• Frontend/EduLiteFrontend/src/components/courses/EnrollmentActions.tsx — touch-friendly buttons
• Any courses modal components — mobile sizing fixes

Testing

1. Open each courses page in Chrome DevTools responsive mode
2. Test at these widths: 375px, 390px, 768px, 1024px, 1440px
3. Switch to Arabic and repeat all tests
4. Use "Touch simulation" in DevTools to verify tap targets
5. Check that no content overflows horizontally at any width
6. Verify filter toggle shows/hides smoothly on mobile
7. Verify modals don't extend beyond viewport
8. Test with actual mobile device if possible (or BrowserStack)

Tips

• Look at how SlideshowListPage.tsx handles the table-to-card responsive pattern — follow the same approach
• Tailwind's md: prefix = 768px, lg: = 1024px — use md: for the main mobile/desktop split
• For collapsible filters, check if there's an existing pattern in the codebase before building from scratch
• RTL issues often come from hardcoded left/right — use Tailwind's logical properties (ms-, me-, ps-, pe-) where possible
• Don't forget dark: variants for all new mobile-specific styles!

---

Getting started? These wiki pages will help you get set up:

• Getting Started, First Contribution
• Getting Started, Frontend

This task can be tackled section by section. Start with the list page card layout and work your way through.