🐛 Fix project name width in dashboard header (#11564)

The project title's max-width was capped via an inline style computed
from the number of thumbnail columns fitting in the grid below it (an
unrelated value, reused only because it happened to be in scope). This
produced an oversized gap between a short/medium title and the file
count, timestamp, and action buttons, and gave long titles an
arbitrary, columns-based truncation point unrelated to the row's
actual available width.

Replace it with a standard flexbox truncate-to-fit: the title sizes to
its own content and sits right next to the info/actions, only
shrinking (and ellipsizing) once the row runs out of room, while the
info/actions never shrink.

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -216,8 +216,7 @@
          (fn [event]
            (when (kbd/enter? event)
              (dom/stop-propagation event)
-             (on-menu-click event))))
-        title-width (/ 100 limit)]
+             (on-menu-click event))))]
 
     [:article {:class (stl/css-case :dashboard-project-row true :first is-first)}
      [:header {:class (stl/css :project)}
@@ -227,7 +226,6 @@
                              :on-end on-edit
                              :max-length 250}]
          [:h2 {:on-click on-nav
-               :style {:max-width (str title-width "%")}
                :class (stl/css :project-name)
                :title (if (:is-default project)
                         (tr "labels.drafts")

frontend/src/app/main/ui/dashboard/projects.scss

@@ -92,11 +92,14 @@
   block-size: $sz-16;
   line-height: 0.8;
   margin-inline-end: var(--sp-m);
+  flex: 0 1 auto;
+  min-inline-size: 0;
 }
 
 .info-wrapper {
   display: flex;
   align-items: center;
+  flex: 0 0 auto;
   gap: var(--sp-s);
 }