[FIX] web: fix long username in header and milestone issue

Description of the issue/feature this PR addresses:

when logged in user name is too long then it take whole header to display it
name.
In project module, if milestone name is long then name is overflowing.
Current behavior before PR:

whole header is occupied when username is long.
milestone name is overflowing when name is too long.
Desired behavior after PR is merged:

when username is long it would show with '...' format.
when milestone name is long it would show with '...' format.
Fix:

some property is added in oe_topbar_name class to display the username in short
and '...' format.
add some bootstrap class so that long name should be formatted in '...' .
task-3217427

closes odoo/odoo#133670

Signed-off-by: Xavier Bol (xbo) <xbo@odoo.com>
Signed-off-by: Ravi Bhingradiya (ravb) <ravb@odoo.com>

addons/project/static/src/components/project_right_side_panel/components/project_milestone.xml

@@ -3,19 +3,19 @@
 
     <t t-name="project.ProjectMilestone" owl="1">
         <div class="list-group mb-2">
-            <div class="o_rightpanel_milestone list-group-item list-group-item-action d-flex cursor-pointer" t-att-class="state.colorClass">
+            <div class="o_rightpanel_milestone list-group-item list-group-item-action d-flex justify-content-evenly px-0 cursor-pointer" t-att-class="state.colorClass">
                 <span t-on-click="toggleIsReached">
                     <i class="fa position-absolute pt-1" t-att-class="state.checkboxIcon"/>
                 </span>
-                <div class="o_milestone_detail d-flex justify-content-between ps-4 w-100" t-on-click="onOpenMilestone">
-                    <div class="d-flex flex-column">
+                <div class="o_milestone_detail d-flex justify-content-between ps-3 pe-2 col-11" t-on-click="onOpenMilestone">
+                    <div class="text-truncate col-7" t-att-title="milestone.name">
                         <t t-esc="milestone.name"/>
                     </div>
                     <span class="d-flex justify-content-center align-items-center">
                         <t t-esc="deadline"/>
                     </span>
                 </div>
-                <span class="d-flex align-items-center ms-3">
+                <span class="d-flex align-items-center">
                     <a t-on-click="onDeleteMilestone" title="Delete Milestone"><i class="fa fa-trash"/></a>
                 </span>
             </div>

addons/web/static/src/webclient/user_menu/user_menu.scss

 .o_user_menu .dropdown-toggle {
     padding-right: $o-horizontal-padding;
+
+    .oe_topbar_name {
+      max-width: 20rem;
+    }
 }

addons/web/static/src/webclient/user_menu/user_menu.xml

@@ -5,7 +5,7 @@
         <Dropdown class="'o_user_menu d-none d-md-block pe-0'" togglerClass="'py-1 py-lg-0'">
             <t t-set-slot="toggler">
                 <img class="rounded-circle o_user_avatar h-75 py-1" t-att-src="source" alt="User"/>
-                <span class="oe_topbar_name d-none d-lg-block ms-1"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
+                <span class="oe_topbar_name d-none d-lg-block ms-1 text-truncate"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
             </t>
             <t t-foreach="getElements()" t-as="element" t-key="element_index">
                 <t t-if="!element.hide">