max width for micro color label (#5130)

Author: stuartromanek

modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue

@@ -139,19 +139,4 @@ export default {
     display: flex;
   }
 
-  .apos-field--micro {
-    .apos-input-color__preset-button {
-      width: 20px;
-      height: 20px;
-    }
-
-    .apos-input-color {
-      gap: $spacing-half;
-    }
-
-    .apos-input-color__ui {
-      gap: 3px;
-    }
-  }
-
 </style>

modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss

@@ -195,22 +195,38 @@
   &.apos-field--color {
     position: relative;
 
+    .apos-input-color__preset-button {
+      width: 20px;
+      height: 20px;
+    }
+
+    .apos-input-color {
+      gap: $spacing-half;
+    }
+
+    .apos-input-color__ui {
+      gap: 3px;
+    }
+
     .apos-button.apos-button--color {
       width: 30px;
       height: 30px;
       padding: 0;
     }
 
+    .apos-field__label {
+      max-width: 200px;
+    }
+
     .apos-input-color__info {
       position: absolute;
       right: 0;
       display: flex;
       place-content: center;
-      height: 17px;
       margin-left: 0;
       font-size: var(--a-type-base);
       white-space: nowrap;
-      transform: translateY(-25px);
+      transform: translateY(-23.5px);
       line-height: 1.3;
     }
   }