fix(admin-ui): Correctly size images when using alternate asset servers

Fixes #1514

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

@@ -48,6 +48,11 @@
         border: 2px solid var(--color-component-border-100);
         cursor: pointer;
 
+        img {
+            width: 50px;
+            height: 50px;
+        }
+
         &.featured {
             border-color: var(--color-primary-500);
         }

packages/admin-ui/src/lib/core/src/shared/components/asset-preview/asset-preview.component.html

@@ -11,6 +11,7 @@
             <img
                 class="asset-image"
                 [src]="asset | assetPreview: size"
+                [ngClass]="size"
                 #imageElement
                 (load)="onImageLoad()"
             />

packages/admin-ui/src/lib/core/src/shared/components/asset-preview/asset-preview.component.scss

@@ -31,6 +31,12 @@
 
     .asset-image {
         width: 100%;
+
+        &.tiny { max-width: 50px; max-height: 50px; }
+        &.thumb { max-width: 150px; max-height: 150px; }
+        &.small { max-width: 300px; max-height: 300px; }
+        &.medium { max-width: 500px; max-height: 500px; }
+        &.large { max-width: 800px; max-height: 800px; }
     }
 
     .focal-point-info {

packages/admin-ui/src/lib/order/src/components/order-table/order-table-mixin.scss

@@ -51,4 +51,8 @@
         cursor: pointer;
         text-transform: lowercase;
     }
+    .thumb img {
+        width: 50px;
+        height: 50px;
+    }
 }

packages/admin-ui/src/lib/static/styles/global/_overrides.scss

@@ -5,6 +5,12 @@
     background-color: var(--clr-global-app-background);
 }
 
+.content-area img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
 a:link, a:visited {
     color: var(--clr-btn-link-color);
 }