[FIX] website_event(_online): improve event menu header display

PURPOSE

Clean menu display, notably when having long event names and/or in mobile
mode.

SPECIFICATIONS

Do not use an ellipsis or crop event name: display it completely even if it
makes it take several lines.

Ensure event menu items are not broken into multiline. Each menu name should
be displayed completely. Move menu name on multiline instead.

In mobile, remove some padding to give as much space as possible to the event
name.

LINKS

Related to testing of EventOnline
Task ID-2314778
Fwd port of PR #55625
PR #55642

addons/website_event/static/src/scss/website_event.scss

@@ -148,6 +148,21 @@
 }
 
 .o_wevent_event {
+    // Multi-line event title, even in mobile mode
+    nav > div > a.navbar-brand {
+        text-overflow: revert;
+        white-space: break-spaces;
+        overflow: hidden;
+        max-width: calc(100% - 80px);
+    }
+
+    // Ensure menu labels are not split
+    #o_wevent_event_submenu {
+        li.nav-item {
+            white-space: nowrap;
+        }
+    }
+
     .o_wevent_event_title {
         margin: 3rem 0;
 

addons/website_event/views/event_templates.xml

@@ -374,8 +374,8 @@
             </t>
             <t t-else="">
                 <nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
-                    <div class="container">
-                        <a href="#" t-field="event.name" class="navbar-brand h4 my-0 mr-4"/>
+                    <div class="container align-items-baseline">
+                        <a href="#" t-field="event.name" class="navbar-brand h4 my-0 mr-0 mr-md-4"/>
                         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
                             <span class="navbar-toggler-icon"></span>
                         </button>

addons/website_event_online/static/src/scss/website_event_templates.scss

@@ -2,14 +2,6 @@
 
 .o_wevent_index, .o_wevent_event {
 
-    // Text Ellipsis for Event title in mobile mode
-    nav > div > a.navbar-brand {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: calc(100% - 80px);
-    }
-
     // Simple colored tags according to assigned background color
     @for $size from 1 through length($o-colors) {
         .o_tag_color_#{$size - 1} {