Less readable when horizontally combining dataframe using ipywidgets

[YongcaiHuang]

Description

different display between voila and notebook when using ipywidgets to combine dataframes. In voila, it's less readable.

Reproduce

1. Run below example code
2. Open voila preview inside the jupyterlab
3. compare the display between output in notebook and voila

from ipywidgets import Output, HBox
import pandas as pd

def horizontally_display(dataframes):
    outputs = []

    for df in dataframes:
        output = Output()
        with output:
            display(df)
        outputs.append(output)

    hbox = HBox(outputs)
    display(hbox)

_sr_value = ["XXXXXXXXXXXXXXXXXXXX", "XXXXXXXXXXXXXXXXXXXX", "XXXXXXXXXXXXXXXXXXXX", "XXXXXXXXXXXXXXXXXXXX"]
_df = pd.DataFrame(
    {
        "A": _sr_value,
        "B": _sr_value,
        "C": _sr_value
    }
)

horizontally_display([_df] * 4)

Notebook.mp4

Voila.mp4

Expected behavior

the display in notebook is well readable. expected behavior is the same display as in notebook

Context

• voila version 0.5.7
• Operating System and version: macOS Sequoia 15.0
• Browser and version: Edge 129.0.2792.65

If using JupyterLab

• JupyterLab version: 4.2.5

Installed Labextensions

jupyterlab-rainbow-brackets v0.1.0 enabled OK (python, jupyterlab_rainbow_brackets)

jupyter_copilot v0.1.1 enabled OK (python, jupyter_copilot)

jupyterlab_pygments v0.3.0 enabled OK (python, jupyterlab_pygments)

jupyterlab-unfold v0.3.2 enabled OK (python, jupyterlab-unfold)

jupyter-matplotlib v0.11.4 enabled OK

jupyterlab-execute-time v3.2.0 enabled OK (python, jupyterlab_execute_time)

jupyterlab_hide_code v4.0.0 enabled OK (python, jupyterlab_hide_code)

@jupyter-server/resource-usage v1.1.0 enabled OK (python, jupyter-resource-usage)

@pyviz/jupyterlab_pyviz v3.0.3 enabled OK

@jupyter-lsp/jupyterlab-lsp v5.1.0 enabled OK (python, jupyterlab-lsp)

@voila-dashboards/jupyterlab-preview v2.3.7 enabled OK (python, voila)

@jupyter-widgets/jupyterlab-manager v5.0.13 enabled OK (python, jupyterlab_widgets)

[YongcaiHuang]

similar problem shows when plotting in svg format. it's not readable.

import pandas as pd
import pingouin as pg
import numpy as np
from ipywidgets import HBox, Output
import matplotlib.pyplot as plt
%config InlineBackend.figure_format = 'svg'

def horizontally_display(objs):
    outputs = []

    for obj in objs:
        output = Output()
        with output:
            display(obj)
        outputs.append(output)

    hbox = HBox(outputs)
    display(hbox)

data = pg.read_dataset("anova2")
data_piv = data.pivot_table("Yield", "Blend", "Crop")

figs = [data_piv.plot(kind='barh', figsize=[6,3]).get_figure() for i in range(6)]
plt.close('all')
horizontally_display(figs)

Plot.mp4