Skip to content

fix(ui): add responsive breakpoints to all pages #178

Description

@gery25

Issue: Pages Not Responsive on Mobile/Tablet

Problem

Multiple pages provide a poor experience on small screens. The following issues have been identified:

  1. Login.login-card has padding: 60px (excessive on mobile); only one media query exists
  2. Register — Platform icons overflow; card padding too large on small screens
  3. Movie/Series Details — 350px sidebar doesn't collapse properly; recommendations lack mobile padding
  4. Admin Tables (users_table.html, gestion_cartelleres.html) — Multi-column tables overflow; filter bars don't stack
  5. Admin Dashboard — Chart.js canvases have fixed 400px height; date filters don't stack; grid breaks
  6. Legal Pages — Cards have padding: 40px and titles 32px, both too large for mobile
  7. Home Page — Search bar has margin-left: 20%; filter dropdowns don't stack vertically
  8. Profile/Settings — Sidebar grid lacks mobile margins; avatar positioning breaks
  9. Header/Base — Welcome text and language selector compete for space on narrow screens

Steps

  1. Add responsive breakpoints (480px, 768px) to static/css/login.css and static/css/register.css
  2. Add mobile breakpoint to static/css/details.css for sidebar collapse and font sizes
  3. Add overflow-x: auto and stacked filter layout to admin management CSS
  4. Add responsive canvas height and stacked filter grid to dashboard templates
  5. Add mobile padding and font size overrides to privacy_policy.css and terms_use.css
  6. Fix search bar margin and stack filter dropdowns in static/css/home/home.css and static/css/home/filter.css
  7. Fix profile grid spacing and avatar positioning in base_profile.css and user_settings.css
  8. Hide .welcome-text and compact language selector on very small screens in base.css

Relevant Files

  • static/css/login.css, static/css/register.css
  • static/css/details.css
  • static/css/home/home.css, static/css/home/filter.css
  • static/css/privacy_policy.css, static/css/terms_use.css
  • static/css/base.css, static/css/global.css
  • users/static/users/css/base_profile.css, user_settings.css, user_profile.css, admin_management.css
  • All affected templates listed above

Metadata

Metadata

Labels

scope: frontendUI components, styling (CSS/SCSS), client-side logic, and state management.scope: ui/uxFor tasks that focus on the visual design of the login/header.type: choreFor maintenance or initial configuration tasks.type: featureNew functionality or requirement implementation.

Type

Fields

No fields configured for Task.

Projects

Status
In progress

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions