From 9e2bf4820a5c07fe3172233842dbd2921607f634 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 10 Jul 2024 20:14:59 -0700
Subject: [PATCH] Enhancement: wrapping of saved view fields d-n-d UI (#7216)

---
 src-ui/package-lock.json                                   | 7 ++++---
 .../app/components/admin/settings/settings.component.html  | 2 +-
 .../input/drag-drop-select/drag-drop-select.component.html | 6 +++---
 .../input/drag-drop-select/drag-drop-select.component.scss | 4 ----
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json
index 966c8c203..ab635fabd 100644
--- 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 285599639..d146b3657 100644
--- 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 bd7359e23..2a2c0a780 100644
--- 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 d30c9848b..483c6c592 100644
--- 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;
-}