[BUG] Long x axis labels misaligned on charts

[mart00n]

Software versions

Python version : 3.8.12 | packaged by conda-forge | (default, Oct 12 2021, 21:22:46) [MSC v.1916 64 bit (AMD64)]
IPython version : 8.2.0
Tornado version : 6.1
Bokeh version : 2.4.2
BokehJS static path : C:\ProgramData\CooperConda\lib\site-packages\bokeh\server\static
node.js version : (not installed)
npm version : (not installed)
Operating system : Windows-10-10.0.19042-SP0

Browser name and version

No response

Jupyter notebook / Jupyter Lab version

No response

Expected behavior

We recently upgraded from Bokeh 1.3.4 to 2.4.2. In 1.3.4, when using rotated x axis labels on a bar chart, long labels would extend off of the chart space as in the below example:

Observed behavior

When the same chart is created with 2.4.2, the leftmost label is shifted away from its bar and renders over other text:

The ideal behavior might be to allow an option that causes the chart to shrink to accomodate the long text so that it isn't "chopped" off, but the behavior in 1.3.4 is probably better than 2.4.2.

Example code

from bokeh.io import output_file, show
from bokeh.plotting import figure

fruits = [
    'Apples Apples Apples Apples Apples Apples Apples Apples Apples', 
    'Pears Pears Pears Pears Pears Pears Pears Pears Pears Pears Pears', 
    'Nectarines Nectarines Nectarines Nectarines Nectarines Nectarines', 
    'Plums Plums Plums Plums Plums Plums Plums Plums Plums Plums Plums Plums', 
    'Grapes Grapes Grapes Grapes Grapes Grapes Grapes Grapes Grapes Grapes', 
    'Strawberries Strawberries Strawberries Strawberries Strawberries Strawberries'
]
counts = [5, 3, 4, 2, 4, 6]

# sorting the bars means sorting the range factors
sorted_fruits = sorted(fruits, key=lambda x: counts[fruits.index(x)])

p = figure(x_range=sorted_fruits, height=500, title="Fruit counts",
           toolbar_location=None, tools="")

p.vbar(x=fruits, top=counts, width=0.9)

p.xgrid.grid_line_color = None
p.y_range.start = 0
p.xaxis.major_label_orientation = 1.0472
show(p)

Stack traceback or browser console output

No response

Screenshots

No response

[mosc9575]

Base on this post on StackOverflow there is another related problem.

Reducing the size to p = figure(height=350, ...) leads to an error in the console and the figure is not displayed.

Uncaught (in promise) Error: invalid bbox {left: 20, top: 27, right: 595, bottom: -17}
    at new o (eval at evalInContext (index.js:12:12), <anonymous>:382:1196)
    at g.compute (eval at evalInContext (index.js:12:12), <anonymous>:442:2571)
    at O.compute_layout (eval at evalInContext (index.js:12:12), <anonymous>:648:3001)
    at O.build (eval at evalInContext (index.js:12:12), <anonymous>:648:2859)
    at O.renderTo (eval at evalInContext (index.js:12:12), <anonymous>:648:2690)
    at f (eval at evalInContext (index.js:12:12), <anonymous>:736:410)
    at async t.add_document_standalone (eval at evalInContext (index.js:12:12), <anonymous>:736:476)

[mattpap]

(...) leads to an error in the console and the figure is not displayed.

This was fixed, possibly coincidentally, at some point in 3.0-dev.