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

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"
       },

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>

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) {

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;
-}