Table tags overlap and split across new line when ui.table_column cell_overflow is set to "wrap" #1917
Description
Wave SDK Version, OS
H2O Wave 0.25.2 20230317093151
Linux Rocky 8.7
Firefox Extended Support Release 102.8.0esr
Actual behavior
When creating a column with tags and setting the cell overflow to wrap, tags within a cell will overlap and split across lines
Expected behavior
I would expect tags to not overlap, and only split across lines if column width was less than the tag width
Steps To Reproduce
Run the following app:
# Table / Tags
# Use tags in order to emphasize a specific value. For multiple tags in a single row use `,` as a delimiter.
# ---
from h2o_wave import main, app, Q, ui
_id = 0
class Issue:
def __init__(self, text: str, tags: str):
global _id
_id += 1
self.id = f'I{_id}'
self.text = text
self.tags = tags
# Create some issues
issues = []
issues.append(Issue("Issue 1", "DONE,SUCCESS,Feature"))
issues.append(Issue("Issue 2", "FAIL,Critical"))
issues.append(Issue("Issue 3", "DONE,SUCCESS,Critical, Feature"))
issues.append(Issue("Issue 4", "DONE,SUCCESS,Backlog"))
issues.append(Issue("Issue 5", "DONE,SUCCESS,Refactor,Backlog"))
columns = [
ui.table_column(name='text', label='Issue', min_width='100px'),
ui.table_column(name='tag', label='Badge', max_width='150px', cell_overflow='wrap', cell_type=ui.tag_table_cell_type(name='tags', tags=[
ui.tag(label='FAIL', color='$red'),
ui.tag(label='Critical', color= '$red'),
ui.tag(label='DONE', color='#D2E3F8', label_color='#053975'),
ui.tag(label='Feature', color= '$green'),
ui.tag(label='Backlog', color= '$yellow'),
ui.tag(label='Refactor', color= '$orange'),
ui.tag(label='SUCCESS', color='$mint'),
])),
]
@app('/demo')
async def serve(q: Q):
q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[
ui.table(
name='issues',
columns=columns,
height='500px',
width='300px',
rows=[ui.table_row(name=issue.id, cells=[issue.text, issue.tags]) for issue in issues],
)
])
await q.page.save()