From 923437cc573ca515e17c67b56b09436ae9014e0c Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 10 Mar 2022 20:29:44 +0500
Subject: [PATCH] GH-2447 - Updating label overflow (#2479)

* GH-2447 - Updating label overflow

* Updating labels css
---
 .../src/components/cardDetail/cardDetail.scss | 84 ++++++++++++-------
 webapp/src/styles/main.scss                   |  1 +
 webapp/src/widgets/label.scss                 |  4 +-
 webapp/src/widgets/valueSelector.tsx          |  1 +
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss
index 2f925bed0..ad46399a4 100644
--- a/webapp/src/components/cardDetail/cardDetail.scss
+++ b/webapp/src/components/cardDetail/cardDetail.scss
@@ -28,12 +28,64 @@
         width: 100%;
     }
 
+
+
+    .octo-propertyvalue {
+        font-size: 14px;
+        padding: 4px 8px;
+        min-height: 32px;
+        display: flex;
+
+        &:not(.URLProperty) {
+            flex-wrap: wrap;
+        }
+
+        &.octo-propertyvalue--readonly {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &:not(.readonly) {
+            min-width: 180px;
+            transition: background 100ms ease-out 0s;
+            cursor: pointer;
+            border-radius: 4px;
+
+            &:hover {
+                background-color: rgba(var(--center-channel-color-rgb), 0.08);
+            }
+        }
+
+        .MenuWrapper {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .ValueSelector {
+        padding: 4px 0;
+        background-color: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+
+    .ValueSelector__menu {
+        max-width: 100%;
+
+        .value-menu-option {
+            justify-content: space-between;
+        }
+
+        .label-container {
+            max-width: 90%;
+        }
+    }
+
     .octo-propertyrow {
         max-width: 595px;
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         margin: 6px 0;
-        height: 32px;
+        min-height: 32px;
 
         .Switch {
             margin-left: 8px;
@@ -54,34 +106,6 @@
             }
         }
 
-        .octo-propertyvalue {
-            font-size: 14px;
-            padding: 4px 8px;
-            height: 32px;
-
-            &.octo-propertyvalue--readonly {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            &:not(.readonly) {
-                min-width: 180px;
-                transition: background 100ms ease-out 0s;
-                cursor: pointer;
-                border-radius: 4px;
-
-                &:hover {
-                    background-color: rgba(var(--center-channel-color-rgb), 0.08);
-                }
-            }
-
-            .MenuWrapper {
-                display: flex;
-                align-items: center;
-            }
-        }
-
         .Label {
             margin: 0 4px 0 0;
         }
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index cab4d4972..febb3aab8 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -135,6 +135,7 @@ html {
     /*-- Property list --*/
 
     .octo-propertyvalue {
+        max-width: 100%;
         font-size: 12px;
         color: rgb(var(--center-channel-color-rgb));
 
diff --git a/webapp/src/widgets/label.scss b/webapp/src/widgets/label.scss
index c85a7d719..7d74428af 100644
--- a/webapp/src/widgets/label.scss
+++ b/webapp/src/widgets/label.scss
@@ -2,14 +2,16 @@
     display: inline-flex;
     align-items: center;
     padding: 2px 8px;
-    margin-right: 5px;
+    margin: 4px 4px 0 0;
     border-radius: 3px;
     line-height: 20px;
     color: rgba(var(--center-channel-color-rgb), 0.8);
     white-space: nowrap;
     text-transform: uppercase;
+    overflow: hidden;
     font-weight: 600;
     font-size: 13px;
+    max-width: 100%;
 
     &.empty {
         color: rgba(var(--center-channel-color-rgb), 0.4);
diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx
index 1ada4ab21..e7e827dd2 100644
--- a/webapp/src/widgets/valueSelector.tsx
+++ b/webapp/src/widgets/valueSelector.tsx
@@ -174,6 +174,7 @@ function ValueSelector(props: Props): JSX.Element {
                 />
             )}
             className='ValueSelector'
+            classNamePrefix='ValueSelector'
             options={props.options}
             getOptionLabel={(o: IPropertyOption) => o.value}
             getOptionValue={(o: IPropertyOption) => o.id}