fix: incorrect overflow in grid widget settings action view

Author: AntoineRelief

libs/shared/src/lib/components/widgets/grid-settings/grid-settings.component.html

@@ -56,6 +56,7 @@
     </ng-container>
     <ng-template uiTabContent>
       <shared-tab-buttons
+        class="flex flex-col h-full"
         [formGroup]="formGroup"
         [fields]="fields"
         [templates]="appTemplates"

libs/shared/src/lib/components/widgets/grid-settings/grid-settings.component.scss

@@ -1,5 +0,0 @@
-:host {
-  flex: 1;
-  display: flex;
-  max-width: 100%;
-}

libs/shared/src/lib/components/widgets/grid-settings/tab-buttons/tab-buttons.component.html

@@ -1,72 +1,68 @@
-<div [formGroup]="formGroup" class="flex flex-col">
-  <!-- Header -->
-  <h2>
-    {{ 'components.widget.settings.grid.buttons.title' | translate }}
-  </h2>
-  <!-- <ui-alert class="mb-4">
+<!-- Header -->
+<h2>
+  {{ 'components.widget.settings.grid.buttons.title' | translate }}
+</h2>
+<!-- <ui-alert class="mb-4">
     {{ 'components.widget.settings.grid.hint.buttons' | translate }}
   </ui-alert> -->
-  <!-- Add new button -->
-  <ui-button
-    class="self-end"
-    icon="add"
-    variant="primary"
-    (click)="addButton($event)"
-  >
+<!-- Add new button -->
+<div class="flex justify-end mb-4">
+  <ui-button icon="add" variant="primary" (click)="addButton($event)">
     {{ 'components.widget.settings.grid.buttons.create' | translate }}
   </ui-button>
-  <!-- Available buttons -->
-  <ui-tabs
-    *ngIf="buttons.length > 0"
-    cdkDropListOrientation="horizontal"
-    cdkDropList
-    (cdkDropListDropped)="onReorder($event)"
-  >
-    <ui-tab *ngFor="let button of buttons.controls; let i = index" cdkDrag>
-      <!-- Button label - tab label -->
-      <ng-container ngProjectAs="label">
-        <div class="flex items-center">
-          <!-- Error indicator -->
-          <ui-icon
-            *ngIf="button.invalid"
-            icon="error_outline"
-            variant="danger"
-            [size]="18"
-          ></ui-icon>
-          <!-- Button name -->
-          <span
-            class="max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap"
-            >{{
-              button.value.name.length > 0
-                ? button.value.name
-                : ('components.widget.settings.grid.buttons.defaultName'
-                  | translate)
-            }}
-          </span>
-          <!-- Reorder -->
-          <ui-button
-            variant="grey"
-            [isIcon]="true"
-            size="small"
-            cdkDragHandle
-            icon="drag_indicator"
-            class="draggable"
-            [uiTooltip]="'models.page.tooltip.drag' | translate"
-          >
-          </ui-button>
-        </div>
-      </ng-container>
-      <!-- Button form - tab content -->
-      <shared-button-config
-        [formGroup]="$any(button)"
-        [fields]="fields"
-        [channels]="channels"
-        [templates]="templates"
-        [distributionLists]="distributionLists"
-        [relatedForms]="relatedForms"
-        (deleteButton)="deleteButton(i)"
-      >
-      </shared-button-config>
-    </ui-tab>
-  </ui-tabs>
 </div>
+<!-- Available buttons -->
+<ui-tabs
+  class="grow"
+  *ngIf="buttons.length > 0"
+  cdkDropListOrientation="horizontal"
+  cdkDropList
+  (cdkDropListDropped)="onReorder($event)"
+>
+  <ui-tab *ngFor="let button of buttons.controls; let i = index" cdkDrag>
+    <!-- Button label - tab label -->
+    <ng-container ngProjectAs="label">
+      <div class="flex items-center">
+        <!-- Error indicator -->
+        <ui-icon
+          *ngIf="button.invalid"
+          icon="error_outline"
+          variant="danger"
+          [size]="18"
+        ></ui-icon>
+        <!-- Button name -->
+        <span
+          class="max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap"
+          >{{
+            button.value.name.length > 0
+              ? button.value.name
+              : ('components.widget.settings.grid.buttons.defaultName'
+                | translate)
+          }}
+        </span>
+        <!-- Reorder -->
+        <ui-button
+          variant="grey"
+          [isIcon]="true"
+          size="small"
+          cdkDragHandle
+          icon="drag_indicator"
+          class="draggable"
+          [uiTooltip]="'models.page.tooltip.drag' | translate"
+        >
+        </ui-button>
+      </div>
+    </ng-container>
+    <!-- Button form - tab content -->
+    <shared-button-config
+      [formGroup]="$any(button)"
+      [fields]="fields"
+      [channels]="channels"
+      [templates]="templates"
+      [distributionLists]="distributionLists"
+      [relatedForms]="relatedForms"
+      (deleteButton)="deleteButton(i)"
+    >
+    </shared-button-config>
+  </ui-tab>
+</ui-tabs>

libs/shared/src/lib/components/widgets/tabs-settings/tabs-settings.component.html

@@ -5,7 +5,10 @@
       <span>{{ 'common.tabs' | translate }}</span>
     </ng-container>
     <ng-template uiTabContent>
-      <shared-tab-main [formGroup]="widgetForm"></shared-tab-main>
+      <shared-tab-main
+        class="flex flex-col h-full"
+        [formGroup]="widgetForm"
+      ></shared-tab-main>
     </ng-template>
   </ui-tab>
   <ui-tab>

libs/ui/src/lib/tabs/tabs.component.html

@@ -17,6 +17,7 @@
   </div>
   <!-- The directive will display the content here -->
   <div
+    [ngClass]="{ 'overflow-x-hidden': vertical }"
     class="flex-1"
     [@tabContentDisplay]="triggerAnimation ? 'initial' : 'loadContent'"
   >