panels CSS doesn't play great with default themes (e.g. alabaster)

[chrisjsewell]

See https://sphinx-panels.readthedocs.io/en/alabaster-theme/

The main egregious thing is that somehow alabaster CSS seems to set the width of the main container to less than 100% so that e.g. col-lg-6 doesn't work unless you set max-width from 50% to ~47%. (checked also for classic, traditional, agogo)

From a quick mess around, I couldn't find any specific theme CSS to override to "fix" this.

@pauleveritt coincidentally, given we just spoke on executablebooks/MyST-Parser#4, I come across your https://github.com/pauleveritt/sphinxstrap4, dealing with exactly alabaster/bootstrap hybrids! Perhaps you may have some insight to add here?

[chrisjsewell]

Ok sussed it:
The RTD and Bootstrap theme set box-sizing for everything:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
}

and the default themes don't. So something like this works:

a.btn.reference,
div.row div.d-flex,
div.row div.d-flex *,
details.dropdown * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div.row div.d-flex p,
details.dropdown p {
    margin-top: 0;
}

(probably best to add a specific top-level class to select, e.g. sphinx-bs)

[pauleveritt]

I see you already got to it. Feel free to nudge me on things in the future.