sidebar width too small at medium/tablet sizes

[rawlins]

On the default bootstrap theme, when the window width is between 768 and 992 pixels wide, I'm seeing the sidebar shrink one notch too small for the layout at that size -- bootstrap col-sm-2, width 16.6%. I think the sidebar simply shouldn't have this class, if I remove it (or set col-sm-3 in the dev inspector, but that seems too big to trigger) it doesn't do this. A screenshot of what I mean is attached below. (This is some test data I've been using to prototype some css tweaks on a local OJS install, but otherwise a clean install and the base bootstrap theme where I've disabled the css tweaks.) iPad resolution is in this range and so I can also get it in responsive layout testing in browser dev tools.

Versions: Firefox 101 on a mac, also happens in Chrome 100. The bootstrap3 version is 3.2.0.4, which I believe is the most recent one. Let me know if I can provide more information.

[rawlins]

On further testing, just setting col-sm-3 doesn't work; the ratio is still wrong. It's currently using 10-2 main to sidebar, and 8-4 seems to work better better, so I think a fix would be that the main/sidebar should have col-sm-8 and col-sm-4 respectively.

Here's my current css patch for fixing this with an installed current bootstrap theme, which effectively forces this:

@media (min-width: 768px) and (max-width: 991px) {
#sidebar.col-sm-2 {
    width: 33.333333%; /* col-sm-4 */
}
.pkp_structure_main.col-sm-10 {
    width: 66.666666%; /* col-sm-8 */
}
}```

[asmecher]

Will be fixed by https://github.com/pkp/bootstrap3/issues/126.