From 8f6b00280f4895ba652768639a54360cea78be53 Mon Sep 17 00:00:00 2001
From: rmsitz <rmsitz@gmail.com>
Date: Sun, 23 Aug 2026 14:40:48 -0400
Subject: [PATCH] Fix course title overflowing the page on mobile

The course dashboard's <h2>{{ course.name }}</h2> heading had no wrap
protection, and course.name is the raw folder name - unlike lesson
titles (cleaned up via _clean_lesson_name), it's never given real
spaces. Most real course folders are dot-separated scene-release-style
names with no natural break point at all, so the browser had nowhere
to wrap and widened the whole page instead - confirmed live against
the deployed site (page rendered at 1066px on a 375px mobile
viewport). Every other place that shows a long course/lesson name
already truncates correctly via flex + overflow:hidden; this heading
was the one gap.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 templates/course_dashboard.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html
index bcf88c8..310b128 100644
--- a/templates/course_dashboard.html
+++ b/templates/course_dashboard.html
@@ -134,6 +134,16 @@
             white-space: nowrap;
         }
 
+        .course-name-heading {
+            /* course.name is the raw folder name, unlike lesson titles
+               (cleaned up via _clean_lesson_name) - real course folders are
+               commonly dot-separated with no spaces at all, so without this
+               the browser has no natural break point and widens the whole
+               page on mobile instead of wrapping. */
+            overflow-wrap: break-word;
+            word-break: break-word;
+        }
+
         .app-footer {
             background: var(--bg-secondary);
             border-top: 1px solid var(--border-color);
@@ -870,7 +880,7 @@
 
         <div class="container">
             <div class="card">
-                <h2>{{ course.name }}</h2>
+                <h2 class="course-name-heading">{{ course.name }}</h2>
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap; gap: 10px;">
                     <div>
                         <strong>{{ stats.completed_lessons }}/{{ stats.total_lessons }}</strong> lessons completed