fix: improve Coloris color picker visibility and button clickability
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s

- 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>
This commit is contained in:
isUnknown 2026-01-09 16:54:10 +01:00
parent 9127520ff7
commit 83455b7098
4 changed files with 58 additions and 62 deletions

View file

@ -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;
}