fix(admin-ui): Improve display of many channels on Product detail

Relates to #1431. There's currently no API that will allow us to partial-load the channels, so the
suggestions of lazy-loading the full list is not quite straightforward.

So for now here's at least a solution that should be usable.

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.scss

@@ -54,6 +54,8 @@ vdr-action-bar clr-toggle-wrapper {
 
 .channel-assignment {
     flex-wrap: wrap;
+    max-height: 144px;
+    overflow-y: auto;
 }
 
 .auto-rename-wrapper {

packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.scss

@@ -20,9 +20,11 @@
 .variant-container {
     transition: background-color 0.2s;
     min-height: 330px;
+
     &.disabled {
         background-color: var(--color-component-bg-200);
     }
+
     .header-row {
         display: flex;
         align-items: center;
@@ -46,10 +48,13 @@
             flex-direction: row;
             height: 36px;
         }
+
         .name {
             flex: 1;
+
             ::ng-deep .clr-control-container {
                 width: 100%;
+
                 input.clr-input {
                     min-width: 100%;
                 }
@@ -113,6 +118,7 @@
 
     .pricing {
         display: flex;
+
         > div {
             margin-right: 12px;
         }
@@ -138,6 +144,10 @@
 
 .channel-assignment {
     justify-content: flex-end;
+    flex-wrap: wrap;
+    max-height: 110px;
+    overflow-y: auto;
+
     .btn {
         margin: 6px 12px 6px 0;
     }
@@ -146,6 +156,7 @@
 .out-of-stock-threshold-wrapper {
     display: flex;
     flex-direction: column;
+
     clr-toggle-wrapper {
         margin-left: 24px;
     }