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,

src/components/SaveButton.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 
 const stylesheetStore = useStylesheetStore();
@@ -51,6 +51,10 @@ const lastSavedFormatted = computed(() => stylesheetStore.lastSavedFormatted);
 const hasError = computed(() => !!saveError.value);
 const showSuccess = ref(false);
 
+// Detect platform for keyboard shortcut display
+const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+const shortcutKey = isMac ? '⌘' : 'Ctrl';
+
 const handleSave = async () => {
   const result = await stylesheetStore.saveCustomCss();
 
@@ -64,12 +68,34 @@ const handleSave = async () => {
   // Errors are handled in the store and reflected in hasError
 };
 
-const getTooltip = () => {
-  if (!isDirty.value) return 'No changes to save';
-  if (isSaving.value) return 'Saving...';
-  if (hasError.value) return saveError.value;
-  return 'Save custom CSS';
+const handleKeyDown = (event) => {
+  // Check for Cmd+S (Mac) or Ctrl+S (Windows/Linux)
+  if ((event.metaKey || event.ctrlKey) && event.key === 's') {
+    event.preventDefault();
+
+    // Only save if there are changes and not currently saving
+    if (isDirty.value && !isSaving.value) {
+      handleSave();
+    }
+  }
 };
+
+const getTooltip = () => {
+  if (!isDirty.value) return 'Aucune modification à enregistrer';
+  if (isSaving.value) return 'Enregistrement...';
+  if (hasError.value) return saveError.value;
+  return `Enregistrer le CSS personnalisé (${shortcutKey}+S)`;
+};
+
+// Add keyboard listener on mount
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+// Remove keyboard listener on unmount
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
 </script>
 
 <style scoped>