From 2d8485f842b4181d2b3aa5786dac3aa94b3fb1e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=BCnther?= Date: Mon, 5 Feb 2024 13:01:21 +0100 Subject: [PATCH] =?UTF-8?q?BUGFIX:=20Resolve=20issue=20with=20custom=20dat?= =?UTF-8?q?a=20source=20displaying=20additional=20l=E2=80=A6=20(#3701)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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: #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. --- .../style.css | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css index 041f4b0055..a1295c4be9 100644 --- a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.css +++ b/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,