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