Dropdown of filterable columns not always visible and missing hinting dots for long column names

[swaldow]

Wave SDK Version, OS

Wave 1.5.1 Windows

Actual behavior

There a two ui behaviors which may have the same cause:

1. When the label of a column is to long for the column width, then the automatic three dots, which indicates that the name is longer, aren't shown anymore.
2. The dropdown menu of the filterable columns of a table cannot be seen if the label of the column is longer as the width and you have manually resize the column to get to the dropdown menu.

Here a example with Wave 1.5.1:

2024-09-26.16-05-55.mp4

Expected behavior

1. When the label is to long the dots are shown. This was the case for Wave 1.4.0 and older versions.
2. The expected beahvior would be that the dropdown is always visible and moves with column size until the end of the label is reached. This was also the case for Wave 1.4.0 and older versions.

Here the example with Wave 1.4.0:

2024-09-26.16-17-07.mp4

Steps To Reproduce

Here is the example from above:

from faker import Faker
from h2o_wave import main, app, Q, ui

fake = Faker()

_id = 0


class Issue:
    def __init__(
        self, text: str, status: str, progress: float, icon: str, notifications: str
    ):
        global _id
        _id += 1
        self.id = f"I{_id}"
        self.text = text
        self.status = status
        self.views = 0
        self.progress = progress
        self.icon = icon
        self.notifications = notifications


# Create some issues
issues = [
    Issue(
        text=fake.sentence(),
        status=("Closed" if i % 2 == 0 else "Open"),
        progress=random.random(),
        icon=("BoxCheckmarkSolid" if random.random() > 0.5 else "BoxMultiplySolid"),
        notifications=("Off" if random.random() > 0.5 else "On"),
    )
    for i in range(100)
]

# Create columns for our issue table.
columns = [
    ui.table_column(name="text", label="Issue"),
    ui.table_column(
        name="status",
        label="Long column name which does not have to be completely visible",
        filterable=True,
    ),
    ui.table_column(name="notifications", label="Notifications", filterable=True),
    ui.table_column(name="done", label="Done", cell_type=ui.icon_table_cell_type()),
    ui.table_column(name="views", label="Views"),
    ui.table_column(
        name="progress", label="Progress", cell_type=ui.progress_table_cell_type()
    ),
]


@app("/")
async def serve(q: Q):
    q.page["form"] = ui.form_card(
        box="1 1 -1 7",
        items=[
            ui.table(
                name="issues",
                columns=columns,
                rows=[
                    ui.table_row(
                        name=issue.id,
                        cells=[
                            issue.text,
                            issue.status,
                            issue.notifications,
                            issue.icon,
                            str(issue.views),
                            str(issue.progress),
                        ],
                    )
                    for issue in issues
                ],
            )
        ],
    )
    await q.page.save()

[mturoci]

Looks like a regression caused by #2371. Thanks for reporting!

[dbranley]

I've submitted a new PR to fix this bug - which I introduced!