GH-2447 - Updating label overflow (#2479)

* GH-2447 - Updating label overflow

* Updating labels css

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;
         }

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));
 

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);

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}