[FIX] web: properly align fields in calendar popover

Previously, the fields in the calendar popover were misaligned. This fix ensures proper alignment of the fields. Task-4315829 closes odoo#188757 Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
OCA · Dec 10, 2024 · 2bcc305 · 2bcc305
1 parent 9d00d91
commit 2bcc305
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 10 deletions.
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.scss b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.scss
@@ -6,14 +6,6 @@ $o-cw-popup-avatar-size: 16px;
     max-width: 328px;
     font-size: $font-size-base;
 
-    .role-container span {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100%;
-    }
-
     .card-header,
     .card-header .popover-header {
         font-size: 1.05em;
@@ -49,6 +41,10 @@ $o-cw-popup-avatar-size: 16px;
         border: none;
     }
 
+    .o_cw_popover_field .o_field_widget {
+        @include o-text-overflow(block);
+    }
+
     .o_cw_popover_fields_secondary {
         max-height: 170px; // Fallback for old browsers
         max-height: 25vh;

diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
@@ -59,8 +59,8 @@
                                     <t t-esc="fieldInfo.string" />:
                                 </t>
                             </strong>
-                            <div class="role-container text-truncate">
-                                <Field name="fieldName" class="'w-100'" record="slot.record" fieldInfo="fieldInfo" type="fieldInfo.widget" />
+                            <div class="o_cw_popover_field overflow-hidden">
+                                <Field name="fieldName" record="slot.record" fieldInfo="fieldInfo" type="fieldInfo.widget" />
                             </div>
                         </li>
                     </t>