GH-2447 - Updating label overflow (#2479)

* GH-2447 - Updating label overflow

* Updating labels css

webapp/src/components/cardDetail/cardDetail.scss

@@ -28,36 +28,17 @@
         width: 100%;
     }
 
-    .octo-propertyrow {
-        max-width: 595px;
-        display: flex;
-        align-items: center;
-        margin: 6px 0;
-        height: 32px;
 
-        .Switch {
-            margin-left: 8px;
-            width: 40px;
-            height: 24px;
-            box-sizing: border-box;
-            padding: 2px;
-
-            .octo-switch-inner {
-                width: 20px;
-                height: 20px;
-            }
-
-            &.on {
-                .octo-switch-inner {
-                    transform: translateX(16px) translateY(0);
-                }
-            }
-        }
 
     .octo-propertyvalue {
         font-size: 14px;
         padding: 4px 8px;
-            height: 32px;
+        min-height: 32px;
+        display: flex;
+
+        &:not(.URLProperty) {
+            flex-wrap: wrap;
+        }
 
         &.octo-propertyvalue--readonly {
             overflow: hidden;
@@ -82,6 +63,49 @@
         }
     }
 
+    .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: flex-start;
+        margin: 6px 0;
+        min-height: 32px;
+
+        .Switch {
+            margin-left: 8px;
+            width: 40px;
+            height: 24px;
+            box-sizing: border-box;
+            padding: 2px;
+
+            .octo-switch-inner {
+                width: 20px;
+                height: 20px;
+            }
+
+            &.on {
+                .octo-switch-inner {
+                    transform: translateX(16px) translateY(0);
+                }
+            }
+        }
+
         .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}