fix: Set default width for components

[marek-mihok]

The width of the following components was affected when used with ui.inline:

• ui.dropdown
• ui.date_picker
• ui.plot
• ui.vega
• ui.table
• ui.slider
• ui.range slider
• ui.toggle

https://github.com/h2oai/wave/assets/23740173/ba5974db-7be4-4c36-8639-54033e12b1d6

By default each of these elements either stretches to the width of its parent or the width can be explicitly specified through the width prop. The problem is when the parent has no defined width, in our case when placed inside ui.inline.

This PR sets the default width for each of these components in case parent width is not defined.

https://github.com/h2oai/wave/assets/23740173/b8b6cdb9-aaba-404b-a7ec-2f491655d7a5

I also include the example used in recordings:

from .synth import FakeCategoricalSeries
from h2o_wave import main, app, Q, ui, pack, data
import random

html = '''
<ol>
    <li>Spam</li>
    <li>Ham</li>
    <li>Eggs</li>
</ol>
'''
spec = '''
{
  "description": "A simple bar plot with embedded data.",
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
'''
f = FakeCategoricalSeries()
n = 20

# Generate random datum between 1 and 100
def rnd():
    return random.randint(1, 100)

@app('/demo')
async def serve(q: Q):
    q.page['example'] = ui.form_card(box='1 1 5 -1', items=[
        # ROW
        ui.inline(items=[
            ui.date_picker(name='date_picker', label='DP'),
            ui.dropdown(name='dropdown1', label='DPDWN', choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.dropdown(name='dropdown2', label='DPDWN', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
        ],
        ),
        ui.inline(items=[
            ui.dropdown(name='dropdown3', label='DPDWN2', popup='always', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.dropdown(name='dropdown4', label='DPDWN3', popup='always', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
        ]),
        ui.inline(items=[
            ui.toggle(name='toggle', label='Toggle'),
            ui.slider(name='slider', label='Slider'),
            ui.range_slider(name='range_slider', label='Range slider', max=100),
        ]
        ),
        ui.inline(items=[
            ui.table(name='table', columns=[
                ui.table_column(name='col1', label='Column 1'),
                ui.table_column(name='col2', label='Column 2'),
                ui.table_column(name='col3', label='Column 3'),
            ], rows=[
                ui.table_row(name='row1', cells=['Text A', 'Text B', 'A']),
                ui.table_row(name='row2', cells=['Text C', 'Text D', 'B']),
                ui.table_row(name='row3', cells=['Text E', 'Text F', 'C']),
            ]),
        ]
        ),
        ui.inline(items=[
            ui.visualization(
                plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
                data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
            ),
            ui.vega_visualization(
                specification=spec,
                data=data(fields=["a", "b"], rows=[
                    ["A", rnd()], ["B", rnd()], ["C", rnd()],
                    ["D", rnd()], ["E", rnd()], ["F", rnd()],
                    ["G", rnd()], ["H", rnd()], ["I", rnd()]
                ], pack=True),
            ),
        ]),
        # COLUMN
        ui.inline(items=[
            ui.date_picker(name='date_picker', label='DP'),
            ui.dropdown(name='dropdown1', label='DPDWN', choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.dropdown(name='dropdown2', label='DPDWN', values=[], choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
        ], direction='column',
        ),
        ui.inline(items=[
            ui.toggle(name='toggle', label='Toggle'),
            ui.slider(name='slider', label='Slider'),
            ui.range_slider(name='range_slider', label='Range slider', max=100),
            ui.range_slider(name='range_slider', label='Range slider', max=1000),
            ui.range_slider(name='range_slider', label='Range slider', max=10000),
        ], direction='column',
        ),
        ui.inline(items=[
            ui.table(name='table', columns=[
                ui.table_column(name='col1', label='Column 1'),
                ui.table_column(name='col2', label='Column 2'),
            ], rows=[
                ui.table_row(name='row1', cells=['Text A', 'Text B']),
                ui.table_row(name='row2', cells=['Text C', 'Text D']),
                ui.table_row(name='row3', cells=['Text E', 'Text F']),
            ]),
        ], direction='column',
        ),
        ui.inline(items=[
            ui.visualization(
                plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
                data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
            ),
            ui.vega_visualization(
                specification=spec,
                data=data(fields=["a", "b"], rows=[
                    ["A", rnd()], ["B", rnd()], ["C", rnd()],
                    ["D", rnd()], ["E", rnd()], ["F", rnd()],
                    ["G", rnd()], ["H", rnd()], ["I", rnd()]
                ], pack=True),
            ),
        ], direction='column',
        ),
    ])
    await q.page.save()

Closes #1974