Merge pull request #2826 from bjarnef/dev-v7-U4-9025-3

U4-9025 - Fix styling of prevalues

src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less

@@ -1,5 +1,10 @@
 .umb-prevalues-multivalues {
     width: 400px;
+    max-width: 100%;
+
+    .umb-overlay & {
+        width: 500px;
+    }
 }
 
 .umb-prevalues-multivalues__left {
@@ -27,7 +32,7 @@
 
 .umb-prevalues-multivalues__add button {
     margin: 0 6px 0 0;
-    float: right
+    margin-left: auto;
 }
 
 .umb-prevalues-multivalues__listitem {
@@ -46,6 +51,7 @@
 
 .umb-prevalues-multivalues__listitem a {
     cursor: pointer;
+    margin-left: auto;
 }
 
 .umb-prevalues-multivalues__listitem input {

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -180,13 +180,13 @@ ul.color-picker li {
     div.color-picker-prediv {
         display: inline-flex;
         align-items: center;
+        max-width: 80%;
 
         pre {
-            display: inline;
+            display: inline-flex;
             font-family: monospace;
             margin-right: 10px;
             margin-left: 10px;
-            width: 50%;
             white-space: nowrap;
             overflow: hidden;
             margin-bottom: 0;
@@ -194,21 +194,28 @@ ul.color-picker li {
             padding-top: 7px;
             padding-bottom: 7px;
             background: #f7f7f7;
+            flex: 0 0 auto;
         }
 
         span {
             margin-left: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
     input[type="text"] {
-        min-width: 40%;
-        width: 320px;
-        display: inline-block;
+        display: flex;
+        flex: 1 1 100px;
         margin-top: 1px;
+        margin-right: 15px;
+        min-width: auto;
+        width: auto;
     }
 
     .sp-replacer {
+        display: inline-flex;
         margin-right: 18px;
     }