FAC-WEB ui: unify UI standards and responsive policy fixes

[ayacoders]

Context

There are multiple UI inconsistencies across the app where screens do not follow the established UI standards and styling policies.

Examples already identified:

• Headers are not consistently using Font PlayfairDisplay
• Faculty courses are not consistently using the badge-based presentation variant

This issue is intended to align the frontend with existing UI standards and fix responsive UI issues only.

Scope

• Audit affected screens/components for UI policy inconsistencies
• Standardize typography usage where policy requires Font PlayfairDisplay
• Standardize badge usage where the approved badge variant should be used
• Fix layout, spacing, wrapping, overflow, and breakpoint issues that cause inconsistent responsive behavior
• Keep the work purely frontend UI and responsive polishing

Out of Scope

• No backend changes
• No API contract changes
• No feature logic changes unless strictly required to support the UI standardization
• No new product behavior beyond UI consistency and responsiveness

Acceptance Criteria

• All identified headers that should follow the typography standard use Font PlayfairDisplay
• Faculty courses use the approved badge version consistently
• Affected pages/components follow the current UI standards/policies consistently
• UI remains usable and visually consistent across mobile, tablet, and desktop breakpoints
• No backend or non-UI feature scope is introduced

Notes

This ticket is strictly for UI consistency and responsive fixes.