table with mobile cards not working with Bulma theme

[gfbland]

Overview of the problem

NOTE: This is also reported as an issue in theme-bulma.

I am currently using these versions of Oruga and theme-bulma

"@oruga-ui/oruga": "^0.5.9",
"@oruga-ui/theme-bulma": "^0.2.9",
"vue": "2.7.5",

**OS/Browser**: Chrome

Description

I am replacing all references to Buefy tables (<b-table>) with Oruga tables (<o-table>) as part of our eventual upgrade to Vue 3.

I have one instance where the <b-table> will convert to cards on mobile, but it will not with my <o-table> replacement.

When I look at the table in Chrome dev tools, I see this code for the

<div class="b-table is-mobile">
    <div style="display: none;"> ... </div>
    <div class="table-wrapper ">
        <table class="table> ...</table>
    </div>
</div>

When I compare the Buefy table with the Oruga table, I can get it to display as a card by manually updating the CSS for this line to be this:

    <div class="table-wrapper has-mobile-cards">

If you look at the initial code snippet I have above, it puts a blank space after the class for table-wrapper but is not adding the additional class has-mobile-cards. The presence of the space looks like it wants to add that additional class but does not, which is causing the table to not display as a card on mobile.

The Bulma CSS will format it correctly as a card, but it needs to see the classes of .table-wrapper.has-mobile-cards. Without both classes, it will not format as a card.

Steps to reproduce

1. Install Oruga and Bulma Theme with Vue 2
2. Resize the browser window so it looks like a mobile device
3. Table does not convert to a card

Expected behavior

The o-table should display as a card on mobile and look like this:

Actual behavior

The o-table on mobile is displayed as a table instead of a card. It looks like this:

[jtommy]

Why did you open it again here?

[gfbland]

Wasn't sure which was the appropriate place

[jtommy]

I moved it in the right place, please discuss about it on the other repository