CSS fixes for smaller "input_sidebar" width to stop overflow (and other tweaks)

[Dwedit]

Feature Idea

Currently, "input_sidebar" can have its width reduced as low as 300 pixels. But "main_inputs_area_wrapper" defines 30 pixels of padding on the left and right sides (60 pixels total), leaving 223 pixels for the content. But the actual UI elements (sliders, etc) have a minimum width of 272 pixels (17rem), so it overflows past the right edge.

If you add "container-type: inline-size;" to the "input_sidebar" CSS, you get the ability to use @container queries (available in browsers since 2023). Then you can add a rule like this to shrink the padding when the width is small:

@container (max-width: 350px) {
    #main_inputs_area_wrapper {
        padding: 30px 8px;
    }
}

Then it no longer overflows.

Then there's the main image area, inside of "current_image_wrapbox". I'm considering making the buttons shrink down when it's under 500 pixels wide, so they all fit in one row.

To do that, add "container-type: inline-size;" to the css for "current_image_wrapbox", then use this style:

@container (max-width:500px) {
    .current-image-buttons .basic-button {
        font-size:75%;
    }
}

Other

No response

[mcmonkey4eva]

The batch view sidebar already has a dynamic padding like this, guess parameter view was missed