How to make summernote's colors palette responsive?

Question

I have a problem with the colors palette appearance in summernote editor. When the color palette is shown and I decrease the size of the browser window, I see that half of the colors don't show. What I want is to find a way to make the colors palette responsive, in order to see all colors.

Screenshots:

this is how the problem looks like:

Now the solution I'm thinking (I didn't know how to implement it) is to make the colors palette responsive just like the "image options".

this is how it looks like initially:

and this is how it becomes responsive:

So, how can we achieve this responsiveness??

Answer 1

After all this time, I had to implement a resize functionality for the palette when the colors caret is clicked:

   $('div[data-name="color"]').on('click', function (e) {
        var rt = ($(window).width() - ($('div[data-name="color"]').offset().left + $('div[data-name="color"]').outerWidth())); //get offset on the right
        var lt = $('div[data-name="color"]').offset().left; //get offset on the left

        var $colorsPalette = $('[data-name="color"] ul.dropdown-menu');

        //if language is arabic and the offset on the left is not big enough to display the horizontal palette>> then display a vertical palette
        if ((__IsArabic == '1' && lt < 340) || (__IsArabic != '1' && rt < 340)) //smaller size needed
        {
            //here I add en empty row to keep distance between the background colors (at the top) and the font colors (bottom)
            if (($colorsPalette.find('li').children().length == 2) && !$(this).parent().hasClass('open')) { //just opened

                //make changes to style to display it correctly
                $colorsPalette.find('.btn-group').first().after('<div class="btn-group" style="margin-top: 30px;"></div>');
                $colorsPalette.css({ 'min-width': '120px', 'height': '470px' });
                $colorsPalette.find('li').css({ 'width': '120px' });
                $colorsPalette.find('li').children().each(function () { $(this).css({ 'margin-right': '5px', 'margin-left': '5px' }) });
                $colorsPalette.find('li').children(":nth-child(2)").width(120);
            }

        } else {

            if ($colorsPalette.find('li').children().length == 3) {
                // undo the changes made (palette back to normal)
                $colorsPalette.find('li').children(":nth-child(2)").remove();
                $colorsPalette.find('li').children().each(function () { $(this).css({ 'margin-right': '', 'margin-left': '' }) });
                $colorsPalette.find('li').css({ 'width': '338px' });
                $colorsPalette.css({ 'min-width': '340px', 'height': '' });
            }

        }

    });

I hope this helps someone facing the same problem