diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 4d8079ee24..1855a3a6b0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/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,10 +194,14 @@ 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;
         }
     }