From 551a53e073f7fa94053bf9f92ac2d2e426fa6712 Mon Sep 17 00:00:00 2001
From: brian <github@orbitfrost.com>
Date: Tue, 31 Mar 2026 19:16:52 -0400
Subject: [PATCH] Fixed: Discovery page movie titles wrapping on mobile
 viewports

Allow long movie titles to wrap to multiple lines on small screens so status icons remain visible.

Fixes #11344
---
 .../Overview/DiscoverMovieOverview.css            | 15 +++++++++++++++
 .../DiscoverMovie/Posters/DiscoverMoviePoster.css |  7 +++++--
 .../Posters/DiscoverMoviePosterInfo.css           |  9 +++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css
index 73ff1a651f..8a2f5dffd2 100644
--- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css
+++ b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverview.css
@@ -103,4 +103,19 @@ $hoverScale: 1.05;
   .overview {
     display: none;
   }
+
+  .title {
+    white-space: normal;
+    word-wrap: break-word;
+    font-size: 18px;
+  }
+
+  .titleRow {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .actions {
+    margin-top: 5px;
+  }
 }
diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css
index 6bff586252..6ce8e1e553 100644
--- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css
+++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePoster.css
@@ -110,7 +110,10 @@ $hoverScale: 1.05;
 }
 
 @media only screen and (max-width: $breakpointSmall) {
-  .container {
-    padding: 5px;
+  .title {
+    padding: 0 5px;
+    text-align: left;
+    white-space: normal !important;
+    word-wrap: break-word;
   }
 }
diff --git a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css
index ba79b97b83..402d0da3a0 100644
--- a/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css
+++ b/frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.css
@@ -3,3 +3,12 @@
   text-align: center;
   font-size: $smallFontSize;
 }
+
+@media only screen and (max-width: $breakpointSmall) {
+  .info {
+    padding: 0 5px;
+    text-align: left;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}