Merge remote-tracking branch 'origin/8.2' into 8.3

queoGmbH · Feb 5, 2024 · fe77db3 · fe77db3
2 parents 683c6b6 + 114ec9d
commit fe77db3
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.module.css b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.module.css
@@ -1,8 +1,28 @@
 .multiLineWithThumbnail__item {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--spacing-Half);
+    align-items: start;
     box-sizing: content-box;
     background: var(--colors-ContrastDarkest);
 }
 
+.multiLineWithThumbnail__item span {
+    grid-column: 2;
+    grid-row: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.multiLineWithThumbnail__secondaryLabel {
+        grid-row: 2;
+    }
+
+    &.multiLineWithThumbnail__tertiaryLabel {
+        grid-row: 3;
+    }
+}
+
 .multiLineWithThumbnail__item--multiLine {
     line-height: 20px;
 }
@@ -26,6 +46,8 @@
 .multiLineWithThumbnail__image {
     width: calc(1.33 * (var(--spacing-GoldenUnit) + var(--spacing-Full)));
     height: calc(var(--spacing-GoldenUnit) + var(--spacing-Full));
+    grid-column: 1;
+    grid-row: 1 / 4;
     object-fit: contain;
     background-color: #fff;
     background-size: 10px 10px;
@@ -35,8 +57,7 @@
     display: inline-block;
     vertical-align: middle;
     margin-left: calc(var(--spacing-Full) * -1);
-    margin-top: calc(var(--spacing-Half) * -1);
-    margin-bottom: calc(var(--spacing-Half) * -1);
+    align-self: center;
 }
 
 .multiLineWithThumbnail__item:hover .multiLineWithThumbnail__secondaryLabel,