fix: improve Coloris color picker visibility and button clickability

- Fix grid layout: add second column for input (grid-template-columns: var(--input-h) 1fr)
- Ensure color picker button is clickable with cursor pointer and pointer-events auto
- Set color picker z-index to 10000 to display above all UI elements
- Add global styles to ensure Coloris button is always clickable

Fixes issues where:
- Color picker appeared behind ElementPopup
- Button was not consistently clickable
- Grid layout was missing second column definition

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

public/assets/css/src/_forms.scss

@@ -11,25 +11,19 @@ input[type="number"] {
   // min-width: var(--input-w);
   // width: 100%;
   // padding: 0 1ch;
-  
 }
 
 .field {
   display: flex;
 
-
   label {
     font-weight: 600;
     color: var(--color-800);
   }
 
-
-
   .input-with-unit {
     display: flex;
     gap: 0.3rem;
-
-    
   }
 
   .unit-toggle {
@@ -44,23 +38,22 @@ input[type="number"] {
     .clr-field {
       width: 100%;
       display: grid;
-      grid-template-columns: var(--input-h);
+      grid-template-columns: var(--input-h) 1fr;
       grid-gap: 1ch;
       button {
         grid-column: 1;
         position: relative;
         border-radius: var(--border-radius);
-
+        cursor: pointer;
+        pointer-events: auto;
       }
       input {
         grid-column: 2;
       }
-
     }
   }
 }
 
-
 .field {
   display: grid;
   grid-template-columns: var(--label-w) 1fr;
@@ -99,7 +92,8 @@ input[type="number"] {
   }
 }
 
-.field-margin, .field-size{
+.field-margin,
+.field-size {
   display: inline-grid;
   width: calc(50% - 1ch);
   grid-template-columns: 6.5ch var(--input-w-small) 1fr;
@@ -110,9 +104,7 @@ input[type="number"] {
   }
   &:nth-of-type(odd) {
     margin-right: 2ch;
-
   }
-
 }
 
 .checkbox-field {
@@ -124,9 +116,6 @@ input[type="number"] {
   }
 }
 
-
-
-
 .field--view-only {
   opacity: 0.3;
 }
@@ -165,12 +154,6 @@ input[type="number"] {
   }
 }
 
-
-
-
-
-
-
 // INPUT NUMBER ===============================================
 
 // Masquer les spinners natifs partout
@@ -185,7 +168,6 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-
 .number-input {
   position: relative;
   // padding: 0 1ch!important;
@@ -221,15 +203,11 @@ input[type="number"] {
     }
     .spinner-down {
       svg {
-      
         // position: relative;
         // top: -2px;
       }
     }
-    
-
   }
-
 }
 // Composant NumberInput avec boutons personnalisés
 // .number-input {

public/assets/css/style.css

@@ -304,13 +304,15 @@ input[type=number] {
 .field .input-with-color .clr-field {
   width: 100%;
   display: grid;
-  grid-template-columns: var(--input-h);
+  grid-template-columns: var(--input-h) 1fr;
   grid-gap: 1ch;
 }
 .field .input-with-color .clr-field button {
   grid-column: 1;
   position: relative;
   border-radius: var(--border-radius);
+  cursor: pointer;
+  pointer-events: auto;
 }
 .field .input-with-color .clr-field input {
   grid-column: 2;
@@ -351,17 +353,20 @@ input[type=number] {
   flex-shrink: 2;
 }
 
-.field-margin, .field-size {
+.field-margin,
+.field-size {
   display: inline-grid;
   width: calc(50% - 1ch);
   grid-template-columns: 6.5ch var(--input-w-small) 1fr;
   margin-bottom: var(--space-xs);
 }
-.field-margin input, .field-size input {
+.field-margin input,
+.field-size input {
   width: var(--input-w-small);
   padding-left: 0.75ch;
 }
-.field-margin:nth-of-type(odd), .field-size:nth-of-type(odd) {
+.field-margin:nth-of-type(odd),
+.field-size:nth-of-type(odd) {
   margin-right: 2ch;
 }
 

src/App.vue

@@ -675,6 +675,19 @@ onMounted(async () => {
   height: 1.5rem;
 }
 
+/* Coloris color picker - ensure it's always on top */
+:deep(.clr-picker) {
+  z-index: 10000 !important;
+}
+
+/* Coloris button - ensure it's clickable and visible */
+:deep(.clr-field button) {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+  position: relative;
+  z-index: 1;
+}
+
 /* Hide UI elements when printing */
 @media print {
   #editor-panel,