[FIX] cf: conditional formatting preview is truncated for nothing

In the side panel, the preview of a conditional formatting rule is
truncated at 142px, even if there is enough space to display it fully.

closes #7616

Task: 5344000
X-original-commit: 86b6138
Signed-off-by: Rémi Rahir (rar) <[email protected]>
Signed-off-by: Adrien Minne (adrm) <[email protected]>

Author: hokolomopo

src/components/side_panel/conditional_formatting/cf_preview/cf_preview.ts

@@ -9,14 +9,15 @@ import { ICONS } from "../../../icons/icons";
 import { CfTerms } from "../../../translations_terms";
 
 css/* scss */ `
-  .o-cf-preview {
+  .o-spreadsheet .o-cf-preview {
     &.o-cf-cursor-ptr {
       cursor: pointer;
     }
 
     border-bottom: 1px solid ${GRAY_300};
     height: 80px;
     padding: 10px;
+    box-sizing: border-box;
     position: relative;
     cursor: pointer;
     &:hover,
@@ -30,7 +31,6 @@ css/* scss */ `
     .o-cf-preview-icon {
       border: 1px solid ${GRAY_300};
       background-color: #fff;
-      position: absolute;
       height: 50px;
       width: 50px;
       .o-icon {
@@ -39,12 +39,6 @@ css/* scss */ `
       }
     }
     .o-cf-preview-description {
-      left: 65px;
-      margin-bottom: auto;
-      margin-right: 8px;
-      margin-top: auto;
-      position: relative;
-      width: 142px;
       .o-cf-preview-description-rule {
         margin-bottom: 4px;
         max-height: 2.8em;
@@ -54,16 +48,11 @@ css/* scss */ `
         font-size: 12px;
       }
     }
-    .o-cf-delete {
-      left: 90%;
-      top: 39%;
-      position: absolute;
-    }
     &:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
       display: none !important;
     }
     .o-cf-drag-handle {
-      left: -8px;
+      left: 2px;
       cursor: move;
       .o-icon {
         width: 6px;

src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml

@@ -2,46 +2,43 @@
   <t t-name="o-spreadsheet-ConditionalFormatPreview">
     <t t-set="cf" t-value="props.conditionalFormat"/>
     <div
-      class="o-cf-preview w-100"
+      class="o-cf-preview w-100 d-flex align-items-center"
       t-ref="cfPreview"
       t-att-class="props.class"
       t-att-data-id="cf.id"
       t-on-click="props.onPreviewClick"
       t-on-pointerdown="(ev) => this.onMouseDown(ev)">
-      <div class="position-relative h-100 w-100 d-flex align-items-center">
+      <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon">
+        <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+      </div>
+      <t t-if="cf.rule.type==='IconSetRule'">
+        <div class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3">
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
+        </div>
+      </t>
+      <t t-else="">
         <div
-          class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon">
-          <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+          t-att-style="getPreviewImageStyle(cf.rule)"
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0">
+          123
         </div>
-        <t t-if="cf.rule.type==='IconSetRule'">
-          <div class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
-          </div>
-        </t>
-        <t t-else="">
-          <div
-            t-att-style="getPreviewImageStyle(cf.rule)"
-            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
-            123
-          </div>
-        </t>
-        <div class="o-cf-preview-description">
-          <div class="o-cf-preview-ruletype">
-            <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
-              <t t-esc="getDescription(cf)"/>
-            </div>
+      </t>
+      <div class="o-cf-preview-description me-3 overflow-auto">
+        <div class="o-cf-preview-ruletype">
+          <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
+            <t t-esc="getDescription(cf)"/>
           </div>
-          <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
         </div>
-        <div class="o-cf-delete">
-          <div
-            class="o-cf-delete-button o-button-icon"
-            t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
-            title="Remove rule">
-            <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
-          </div>
+        <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
+      </div>
+      <div class="o-cf-delete ms-auto">
+        <div
+          class="o-cf-delete-button o-button-icon"
+          t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
+          title="Remove rule">
+          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
       </div>
     </div>