BUGFIX: Resolve issue with custom data source displaying additional l… (

neos#3701)

* BUGFIX: Resolve issue with custom data source displaying additional labels incorrectly

Previously, there was an issue with the custom data source where the secondary label, utilized with label and preview, was not being displayed correctly. This commit addresses the problem, ensuring proper alignment and display of the secondary label in conjunction with the label and preview elements. The implementation includes the use of a CSS grid layout to achieve consistent and accurate rendering of the custom data source information.

Fixes: neos#3675

* BUGFIX: Adjust styles for long labels

Long labels float out of the container and do not look nice. This adds an ellipsis and the tooltip is always available on hover to read the whole text. The Image is now also aligned in centered position.

packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.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-color: 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,17 +46,17 @@
 .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;
     background-position: 0 0, 25px 25px;
     background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc);
-    margin-right: .75em;
     display: inline-block;
     vertical-align: middle;
-    margin-left: -var(--spacing-Full);
-    margin-top: -var(--spacing-Half);
-    margin-bottom: -var(--spacing-Half);
+    margin-left: -var(--spacing-Half);
+    align-self: center;
 }
 
 .multiLineWithThumbnail__item:hover .multiLineWithThumbnail__secondaryLabel,