[ui5-table]: Avoid popin of table columns if there is enough space left.

[mofterdinger]

Bug Description

Hi,

we are using the SAP UI5 WebComponents 2.17.0 in an SAP internal application. We are facing an issue with the Popin feature of the table control in Safari.
Sometimes (not always) the table control performs an popin of all columns, even if there is enough space in the window. Here is a screenshot:

As you can see on the screenshot, there is still enough space to show some columns. This issue happens only with Safari and after Zooming.

Here the declaration of the table in our code:

            ui5-table { "overflow-mode": "Popin",
                ui5-table-header-row { slot: "headerRow",
                    ui5-table-header-cell { width: "11rem", "Result" }
                    ui5-table-header-cell { width: "6rem", importance: "-1", "Duration" }
                    ui5-table-header-cell { width: "auto", "min-width": "20rem", "Commit" }
                    ui5-table-header-cell { width: "13rem", "Author" }
                    if *show_details.read() {
                        ui5-table-header-cell { width: "9rem", importance: "-1", "Start" }
                        ui5-table-header-cell { width: "9rem", importance: "-1", "End" }
                        ui5-table-header-cell { width: "4rem", importance: "-1", "Retries" }
                        ui5-table-header-cell { width: "4rem", importance: "-1", "Error" }
                    }
                }
...

Can you give as a hint how we can avoid this column popin if there is still enough space to show the columns.

Thanks,
Markus

Affected Component

ui5-table

Expected Behaviour

If there is enough space to show columns, do not popin them.

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.17.0

Browser

Safari

Operating System

MacOS

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[IlianaB]

Hello @mofterdinger ,
Please provide an isolated and reproducible sample of the issue you are facing. Normally, if there is enough space, columns should be shown (taken into account importance and width/min-width).

Regards,
Iliana

[mofterdinger]

Hi,
thanks for your response. I'm not sure if I can provide an isolated sample to reproduce it. Meanwhile, could you give me some hints, what I could check in the DOM to find the root cause? Maybe there is something I can already check?
Thanks,
Markus

[IlianaB]

Hello @UI5/ui5-team-ctr-tbl ,
I am forwarding this issue to you, because it seems there is some problem with table popin behavior on Safari (MacOS).
I was able to reproduce the problem described by @mofterdinger with the following sample: here

I am using SauceLabs for testing on Safari with MacOS. Otherwise, I cannot reproduce on Chrome with my Windows laptop.

Steps:

1. Open sample
2. Zoom in, so that the Dimensions column overflows (I am using alt + + on SauceLabs and zoom in steps/cannot see percentage values)
3. Start zooming out --> for me column overflows on a certain step/zoom factor, but then gets out of overflow with a few steps more/different zoom factor

When I inspect the HTML, I can see there is enough space for Dimensions column to appear (a lot more than the minimum required 20rem/320px are available - table has 937px width while first column takes 176px).

Please have a look at this issue.

Regards,
Iliana