From 89876ef96f96ce6242cf1231c721c183c64bdc25 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Mon, 31 Mar 2025 15:33:30 +0200
Subject: [PATCH] :bug: Fix UI with long named colors (#6193)

---
 .../main/ui/inspect/attributes/common.scss    | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/main/ui/inspect/attributes/common.scss b/frontend/src/app/main/ui/inspect/attributes/common.scss
index 22be662af..5ea1fdf41 100644
--- a/frontend/src/app/main/ui/inspect/attributes/common.scss
+++ b/frontend/src/app/main/ui/inspect/attributes/common.scss
@@ -70,36 +70,23 @@
     visibility: visible;
   }
 }
+
 .one-line {
   max-height: $s-32;
 }
+
 .two-line {
   display: grid;
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: auto 1fr;
+  gap: $s-4;
 }
+
 .color-name-wrapper {
   @include bodySmallTypography;
   @include flexColumn;
   padding: $s-8 $s-4 $s-8 $s-8;
   height: $s-32;
   max-width: $s-80;
-
-  &.gradient-color {
-    color: var(--menu-foreground-color);
-    max-width: $s-124;
-  }
-  .color-name-library {
-    @include bodySmallTypography;
-    @include textEllipsis;
-    text-align: left;
-    height: $s-16;
-    color: var(--menu-foreground-color-rest);
-  }
-  .color-value-wrapper {
-    @include bodySmallTypography;
-    height: $s-16;
-    color: var(--menu-foreground-color);
-  }
 }
 
 .opacity-info {
@@ -152,6 +139,7 @@
 .color-name-library {
   @include inspectValue;
   color: var(--menu-foreground-color-rest);
+  word-break: break-word;
 }
 
 .image-download {