254 frontend responsive mobile layout and rtl support for courses pages

[smattymatty]

Responsive Mobile Layout and RTL Support for Courses Pages

Description

Makes all courses pages mobile-friendly with proper RTL (Arabic) support, matching the responsive quality of the slideshow and profile pages.

Closes #254

Mandatory Checklist

• I have read and followed the CONTRIBUTING.md
• I have linked the related issue above
• My branch is up to date with main
• I have tested my changes locally
• I have added or updated tests where applicable
• I have not introduced any new linting errors
• My commit messages are clear and descriptive
• I have updated documentation if my changes affect public APIs, setup steps, or user-facing behavior

What Changed

CourseListPage (CourseListPage.tsx)

• Filter button: Shows "Filters" label on sm+ screens with active count badge (e.g. "Filters 2") instead of a plain dot
• Filter panel animation: Smooth slide-down/up transition using max-height + opacity instead of conditional rendering
• Mobile cards: Added language badge alongside subject in the mobile card layout
• RTL fixes: border-l-* to border-s-* (enrolled indicator), text-left/right to text-start/end on table headers and cells, right-3 to end-3 on dropdown chevron, pr-10 to pe-10 on visibility button, rtl:rotate-180 on pagination arrows

CourseDetailPage (CourseDetailPage.tsx)

• Action buttons: Stack vertically and go full-width on mobile (w-full sm:w-auto), with justify-center for centered text
• Save changes banner: Stacks vertically on mobile with full-width cancel/save buttons (flex-col sm:flex-row)
• Padding: Reduced section padding on mobile (p-4 sm:p-8)

CourseFormPage (CourseFormPage.tsx)

• Sticky bottom bar: Fixed save/cancel bar at bottom of screen on mobile (sm:hidden) so buttons are always accessible while scrolling the form
• Desktop button: Hidden on mobile (hidden sm:block), inline as before on desktop
• Spacer: Added h-20 spacer on mobile so form content doesn't hide behind the sticky bar
• Refactored handleSubmit into doSubmit to share logic between form submit and mobile bar button

EnrollmentActions (EnrollmentActions.tsx)

• All action buttons now w-full sm:w-auto with justify-center for proper mobile stacking

MembersTab (MembersTab.tsx)

• Mobile card action buttons increased from p-1.5/w-4 h-4 to p-2.5/w-5 h-5 (44x44px touch targets per Apple HIG)
• RTL fix: !pl-2 !pr-8 to !ps-2 !pe-8 on HardLoadSelect

ModulesTab (ModulesTab.tsx)

• Action buttons use responsive sizing: p-2.5 sm:p-1.5 and w-5 h-5 sm:w-4 sm:h-4 (44px on mobile, compact on desktop)

ConfirmationModal (ConfirmationModal.tsx)

• Mobile sizing: max-w-sm sm:max-w-md (smaller on phones)
• Scroll overflow: max-h-[90vh] overflow-y-auto for long content
• RTL fix: right-4 to end-4 on close button

i18n (en.json, ar.json)

• Added course.list.filtersLabel key ("Filters" / "فلاتر")

Tests (CourseListPage.test.tsx)

• Updated filter panel tests to work with the new animation approach (panel is always in DOM, toggled via CSS classes instead of conditional rendering)
• Updated filter button selection to use text "Filters" instead of finding empty-text buttons

How to Test

1. Start the frontend: cd Frontend/EduLiteFrontend && npm run dev
2. Open Chrome DevTools responsive mode
3. Test at these widths: 375px, 390px, 768px, 1024px, 1440px

Course List Page (/courses/me and /courses/public)

• Verify filter button shows "Filters" label on sm+ screens, icon only on mobile
• Click filter button — panel should slide down smoothly
• Set 2+ filters — badge should show count (e.g. "2")
• Mobile cards should show visibility, subject, language, and member count badges
• Enrolled courses should have green left border (right border in Arabic)
• Pagination arrows should flip in RTL

Course Detail Page (/courses/:id)

• Action buttons (Edit/Delete/Join/Leave) should be full-width and stacked on mobile
• If editing with unsaved changes, the save banner should stack vertically on mobile
• Tab bar should remain usable on mobile

Course Form Page (/courses/new)

• On mobile, a sticky save/cancel bar should appear at the bottom of the screen
• Scroll down — the bar stays fixed
• On desktop (768px+), the inline button appears instead

RTL Testing

• Switch language to Arabic (Settings or i18n toggle)
• Verify all above tests with RTL layout
• Enrolled border flips to right side
• Pagination arrows point correctly
• Modal close button in correct corner
• Dropdown chevrons on correct side

Run Tests

cd Frontend/EduLiteFrontend
npm run test        # 636 tests pass
npm run lint        # No errors
npx tsc --noEmit   # No type errors
npx vite build      # Build succeeds

Screenshots (if applicable)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
edulite	Ready	Preview, Comment	Feb 13, 2026 0:19am

[github-actions]

PR Template Check

All checks passed.