Enhancement: wrapping of saved view fields d-n-d UI (#7216)

diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json
index 966c8c2036351574ed1e5ade87ec685d24e8f5ee..ab635fabdda9a367728de446c3234d1d76e50373 100644 (file)
--- a/src-ui/package-lock.json
+++ b/src-ui/package-lock.json
@@ -1513,9 +1513,10 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "18.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.0.6.tgz",
-      "integrity": "sha512-9CmlQ8uZ0cHuj+1jDdabbFw90QpjrJzh1/cgeHN/8vAGE4ranxX3l6cqpVxuoWRLkB2ykTHt2xeoTM8y0d9ERA==",
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.1.0.tgz",
+      "integrity": "sha512-GWUyJQ7KdOS0WwQPp7UKnRd7lUKvOrMvktqNWfSxBy/VEdyEeKlXfghk6GQ4u1RXFZ2RU0m1KhX8rY9srYJOwA==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
       },

diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html
index 285599639bb30a7c10dc0695bbfb3e2a794ffd0c..d146b3657b8752a94cbc49de926df864436cd392 100644 (file)
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@@ -348,7 +348,7 @@
 
           @for (view of savedViews; track view) {
             <li class="list-group-item py-3">
-            <div [formGroupName]="view.id" class="row">
+            <div [formGroupName]="view.id">
               <div class="row">
                 <div class="col">
                   <pngx-input-text title="Name" formControlName="name"></pngx-input-text>

diff --git a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
index bd7359e2373d126f1ba72f38ab2feb2e7ceacbf0..2a2c0a780050a5f385dbfd739286f72ee7adf279 100644 (file)
--- a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
+++ b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
@@ -13,10 +13,10 @@
         }
     </div>
 </div>
-<div class="d-flex flex-row mt-2 align-items-center bg-light p-2">
-    <div class="d-flex flex-row gap-2 w-100 mh-1" style="min-height: 1em;"
+<div class="mt-2 align-items-center bg-light p-2">
+    <div class="d-flex flex-wrap flex-row gap-2 w-100"
         cdkDropList #unselectedList="cdkDropList"
-        cdkDropListOrientation="horizontal"
+        cdkDropListOrientation="mixed"
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="[selectedList]">
         @for (item of unselectedItems; track item.id) {

diff --git a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss
index d30c9848b39c117354223ca86c06a660331412b3..483c6c59277148dda10132da4b07b6825460a77a 100644 (file)
--- a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss
+++ b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss
@@ -1,7 +1,3 @@
 .badge {
     cursor: move;
 }
-
-.d-flex {
-    overflow-x: scroll;
-}