CSS Editor expander not functional under certain conditions

[cocarrig]

Discussed in https://github.com/dakboard/Cloud-Platform/discussions/2042

^{Originally posted by **digital-workshop** February 23, 2024} At the moment, it´s really difficult to add or edit complex CSS. Because with this popup, you can't scroll through the code or edit it reasonable. This needs a "Quality of Life" Update!

Editor expand functions do not appear to work when text has been added, this may be a browser bug potentially.

Currently a workaround exists:

• Click in the text area
• CTRL-A to select all
• CTRL-X to cut all of it
• Resize handle appears and can be changed
• CTRL-V to paste all of it back in
• Begin editing

[Dan-Peck]

This is happening because app.css has CSS that hides the scrollbar by default in webkit supported browsers:

::-webkit-scrollbar {
    display: none;
}

To adjust this behavior, here is some CSS that can be added along with that to allow textarea elements like the Custom CSS text entry box to show its resizer corner:

TEXTAREA::-webkit-scrollbar {
    display: block !important;
    background-color: transparent;
}
TEXTAREA::-webkit-resizer,
TEXTAREA::-webkit-scrollbar-corner  {
    background-color: var(--color-theme, #303030);
}

Other options also exist for showing the scrollbar, and having it show as a thin style scrollbar, if desired. Here is some reference regarding this pseudo-element:

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Keeping in mind this does not work in all browsers, particularly while Chrome and Safari have some limited support, it looks like Firefox will ignore these stylings.

[Dan-Peck]

In the end, a simpler solution is restricting the app.css style to exclude TEXTAREA elements.

This will allow Predefined Screens to continue suppressing scrollbars on blocks where they should not show up, but allow TEXTAREA elements in the Layout Editor UI to show and use the scrollbar and corner resizer.

[Dan-Peck]

Merged in @ a5f46e3 and added to the queue for upcoming release to the live site.