In Advanced Themer, there is a builder tweak called Increase the Text Controls Size that already helps when writing css variables/function:
But for some users, the space is still not enough and wish to have even more space inside the text fields.
Let’s do that!
Set the builder mode to Custom
Bricks gives you the ability to add custom CSS inside the builder without affecting the frontend.
To do that, navigate to Bricks > Settings > Builder > Builder mode and choose Custom.
Save the settings and reload the page: you’ll now see a new textarea where you can add your custom CSS.
Add a custom CSS snippet to the builder
Paste the following CSS Snippet inside the textarea and save the settings again:
html .bricks-panel-controls .control-inline>[data-control=number], html .bricks-panel-controls .control-inline>div {
flex-basis: 70% !important;
}
Once done, refresh the builder and check how the inputs are displayed:
You can tweak the size even further by changing the flex-basis percentage to fit your needs.