Mobile: stack project-head instead of squeezing it, wrap headings cleanly

.project-head (title + action buttons, shared by ProjectView and
ProjectConfigureView) was a plain flex row at every width, so on a
narrow screen the title and the Manage/Back buttons fought over space
instead of wrapping. Below 768px it's now flex-direction:
column-reverse -- the buttons (last in the DOM in both views) render
on top on one line, and the title wraps to as many lines as it needs
underneath, full width.

Also add a global h1/h2/h3 overflow-wrap: break-word so a long,
unbroken heading (a project title with no spaces, say) wraps instead
of overflowing its container, without breaking ordinary multi-word
headings mid-word. Drops .project-head__title's now-redundant own
word-break rule, since it's an <h1> and the global rule covers it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/style.css

@@ -206,6 +206,16 @@ body {
     z-index: 150;
     background: rgba(0, 0, 0, 0.45);
   }
+
+  /* Buttons stay on one line on top; the title, which can't shrink to fit
+     alongside them, wraps to however many lines it needs underneath instead
+     of squeezing into whatever space is left. column-reverse rather than
+     reordering the markup -- the title comes first in both .project-head's
+     users (ProjectView, ProjectConfigureView). */
+  .project-head {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
 }
 
 .sidebar__nav {
@@ -302,6 +312,14 @@ body {
   padding: 1.75rem;
 }
 
+h1,
+h2,
+h3 {
+  /* Wrap at word boundaries where possible; only break inside a word (a long
+     name, an unbroken URL, ...) when a single word wouldn't otherwise fit. */
+  overflow-wrap: break-word;
+}
+
 h1 {
   margin: 0 0 0.75rem;
   font-size: 1.4rem;
@@ -575,7 +593,6 @@ h1 {
   flex: 1;
   min-width: 0;
   margin: 0 0 0.5rem;
-  word-break: break-word;
 }
 
 .project-head__actions {