maintain nft image aspect ratios and center images in collection view (#13136)

* maintain nft image aspect ratios and center images in collection view

ui/components/app/collectible-details/index.scss

@@ -43,10 +43,7 @@ $spacer-break-small: 16px;
 
   &__image {
     width: 100%;
-
-    @media screen and (min-width: $break-large) {
-      width: $card-width-break-large;
-    }
+    object-fit: contain;
   }
 
   &__address {

ui/components/app/collectibles-items/collectibles-items.js

@@ -48,7 +48,7 @@ export default function CollectiblesItems({ collections = {} }) {
             const isExpanded = dropdownState[key];
             return (
               <div
-                className="collectibles-items__item"
+                className="collectibles-items__collection"
                 key={`collection-${index}`}
                 onClick={() => {
                   setDropdownState((_dropdownState) => ({
@@ -62,19 +62,19 @@ export default function CollectiblesItems({ collections = {} }) {
                   display={DISPLAY.FLEX}
                   alignItems={ALIGN_ITEMS.CENTER}
                   justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
-                  className="collectibles-items__item__accordion-title"
+                  className="collectibles-items__collection-accordion-title"
                 >
                   <Box
                     alignItems={ALIGN_ITEMS.CENTER}
-                    className="collectibles-items__item__collection-header"
+                    className="collectibles-items__collection-header"
                   >
                     {collectionImage ? (
                       <img
                         src={collectionImage}
-                        className="collectibles-items__item__collection-image"
+                        className="collectibles-items__collection-image"
                       />
                     ) : (
-                      <div className="collectibles-items__item__collection-image-alt">
+                      <div className="collectibles-items__collection-image-alt">
                         {collectionName[0]}
                       </div>
                     )}
@@ -108,9 +108,13 @@ export default function CollectiblesItems({ collections = {} }) {
                         ipfsGateway,
                       );
                       return (
-                        <Box width={width} key={`collectible-${i}`}>
+                        <Box
+                          width={width}
+                          key={`collectible-${i}`}
+                          className="collectibles-items__collection-item-wrapper"
+                        >
                           <div
-                            className="collectibles-items__image__wrapper"
+                            className="collectibles-items__collection-item"
                             style={{
                               backgroundColor,
                             }}
@@ -121,7 +125,7 @@ export default function CollectiblesItems({ collections = {} }) {
                                   `${ASSET_ROUTE}/${address}/${tokenId}`,
                                 )
                               }
-                              className="collectibles-items__image"
+                              className="collectibles-items__collection-item-image"
                               src={collectibleImage}
                             />
                           </div>

ui/components/app/collectibles-items/index.scss

@@ -1,33 +1,18 @@
 .collectibles-items {
-  &__image__wrapper {
-    border-radius: 4px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-  }
-
-  &__image {
-    border-radius: 4px;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-
-  &__item {
+  &__collection {
     margin-bottom: 24px;
 
-    &__accordion-title {
+    &-accordion-title {
       cursor: pointer;
     }
 
-    &__collection-image {
+    &-image {
       width: 32px;
       height: 32px;
       border-radius: 50%;
     }
 
-    &__collection-image-alt {
+    &-image-alt {
       border-radius: 50%;
       width: 32px;
       height: 32px;
@@ -37,5 +22,25 @@
       text-align: center;
       line-height: 1;
     }
+
+    &-item-wrapper {
+      align-self: center;
+    }
+
+    &-item {
+      border-radius: 4px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      align-self: center;
+    }
+
+    &-item-image {
+      border-radius: 4px;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
   }
 }