Don't wrap thread header above md screens

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Current (in progress)
 
-- Nothing yet
+- Fix thread header wrapped when title is too long [#64](https://github.com/etalab/udata-front/pull/64)
 
 ## 1.2.1 (2022-01-11)
 

theme/js/components/discussions/thread.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bg-contrast-grey fr-mt-2w" :id="discussionUrl(id)">
-    <header class="fr-grid-row fr-grid-row--middle justify-between fr-py-2w fr-px-3w">
+    <header class="fr-grid-row fr-grid-row--middle justify-between fr-py-2w fr-px-3w no-wrap wrap-md">
       <div class="fr-col-auto text-default-warning fr-text--bold fr-pr-2w" v-if="closed">
         <span>{{ $t("Discussion closed") }}</span>
       </div>
-      <h3 class="fr-p-2w fr-p-md-0 fr-h6 fr-mb-0">{{ title }}</h3>
+      <h3 class="fr-mx-3v fr-mx-md-0 fr-h6 fr-mb-0">{{ title }}</h3>
       <div class="text-align-right">
         <a
           :id="id + '-copy'"

theme/less/layout/grid.less

@@ -247,6 +247,16 @@ each(@breakpoints, .(@bk, @_k, @_i) {
     flex-wrap: nowrap;
 }
 
+.wrap {
+    flex-wrap: wrap;
+}
+
+@media @query-md {
+        .wrap-md {
+            .wrap;
+        }
+    }
+
 .flex-direction-column {
     flex-direction: column;
 }