BUG: color picker may extend viewport

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64)

Reproducible demo link

none

Describe the bug

This bug is similar to issue #596 which has been locked because of a lack of conversation. This version may provide a fix for the current version of GrapesJS.

How to reproduce the bug?

When opening a color picker close to the edges of the viewport, that picker may only partially be visible <img width="329" alt="Screenshot-of-Bug" src="https://github.com/GrapesJS/grapesjs/assets/514882/9300e2d5-f2ce-484e-8543-aaccf9d90bde">

Unfortunately, the fix mentioned in #596 does no longer work. Thus, I looked into the current code and replaced lines 1002...1012 of file src/utils/ColorPicker.ts by

    offset.top += inputHeight;             // place "picker" right below "input"

    if (offset.left + dpWidth > viewWidth) {   // "picker" would extend viewport
      offset.left = viewWidth-dpWidth
    }
    
    if (offset.top + dpHeight > viewHeight) {  // "picker" would extend viewport
      offset.top = viewHeight-dpHeight
    }
        
    // nota bene: "picker" is placed relative to the editor!
    var EditorOffset = picker.closest('.gjs-editor-cont').offset()

    offset.left = Math.max(0,offset.left - EditorOffset.left)
    offset.top  = Math.max(0,offset.top  - EditorOffset.top)

(and also deleted line 988 which is useless)

The result now works on my machine:

<img width="329" alt="Screenshot-of-Fix" src="https://github.com/GrapesJS/grapesjs/assets/514882/22efbabf-8ded-461d-8a7d-c086fe7fff6a">

You may inspect these changes in my own fork of GrapesJS

Since I'm new to GrapesJS, I'm a little reluctant to do a PR right now. However, if you expect these changes to work on all other machines as well, I would be proud to do so.

With greetings from Germany,

Andreas Rozek

Code of Conduct

• I agree to follow this project's Code of Conduct