style(admin-ui): Style improvements to Product detail views

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

@@ -137,23 +137,6 @@
                                     [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                                 ></vdr-tabbed-custom-fields>
                             </section>
-
-                            <div class="facets">
-                                <vdr-facet-value-chip
-                                    *ngFor="let facetValue of facetValues$ | async"
-                                    [facetValue]="facetValue"
-                                    [removable]="['UpdateCatalog', 'UpdateProduct'] | hasPermission"
-                                    (remove)="removeProductFacetValue(facetValue.id)"
-                                ></vdr-facet-value-chip>
-                                <button
-                                    class="btn btn-sm btn-secondary"
-                                    *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']"
-                                    (click)="selectProductFacetValue()"
-                                >
-                                    <clr-icon shape="plus"></clr-icon>
-                                    {{ 'catalog.add-facets' | translate }}
-                                </button>
-                            </div>
                         </section>
                     </div>
                     <div class="clr-col-md-auto">
@@ -162,6 +145,22 @@
                             [featuredAsset]="assetChanges.featuredAsset || product.featuredAsset"
                             (change)="assetChanges = $event"
                         ></vdr-product-assets>
+                        <div class="facets">
+                            <vdr-facet-value-chip
+                                *ngFor="let facetValue of facetValues$ | async"
+                                [facetValue]="facetValue"
+                                [removable]="['UpdateCatalog', 'UpdateProduct'] | hasPermission"
+                                (remove)="removeProductFacetValue(facetValue.id)"
+                            ></vdr-facet-value-chip>
+                            <button
+                                class="btn btn-sm btn-secondary"
+                                *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']"
+                                (click)="selectProductFacetValue()"
+                            >
+                                <clr-icon shape="plus"></clr-icon>
+                                {{ 'catalog.add-facets' | translate }}
+                            </button>
+                        </div>
                     </div>
                 </div>
 

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

@@ -1,3 +1,4 @@
+@import "variables";
 
 :host {
     ::ng-deep {
@@ -7,6 +8,16 @@
     }
 }
 
+.facets {
+    margin-top: 12px;
+    @media screen and (min-width: $breakpoint-small) {
+        max-width: 340px;
+    }
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
 vdr-action-bar clr-toggle-wrapper {
     margin-top: 12px;
 }

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

@@ -107,6 +107,7 @@
 
     .facets {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
     }