Fix Quasar's layout rules for ui.card that remove children's borders and shadows

[falkoschindler]

Quasar's QCard is the base for ui.card. But in the early days of NiceGUI we decided to set a default gap and padding, so that you don't need to wrap content in card sections. If you do need Quasar's original tight layout, you can call .tight().

But this decision caused quite some trouble, because Quasar keeps removing borders and shadows of child elements, which makes sense for the tight layout without padding, but not with NiceGUI's default card style (#726, #1295, #2265, #2301). We already planned to introduce a new ui.box element to avoid confusion between both behaviors, which would have caused a major breaking change.

Now I finally found a rather neat solution to change Quasar's CSS rules to apply to tight cards only. In my point of view, this is exactly what we needed. I just didn't think of the possibility to manipulate existing rules using JavaScript, which turned out to be pretty easy and powerful.

With this change, the following cards behave as expected:

with ui.card():
    ui.label('Borders and shadows').classes('border shadow')
    ui.label('of child divs').classes('border shadow')
    ui.label('are preserved').classes('border shadow')

with ui.card().tight():
    ui.label('Borders and shadows').classes('border shadow')
    ui.label('of child divs').classes('border shadow')
    ui.label('are removed').classes('border shadow')

Old behavior for reference:

Open tasks:

• add pytest to avoid regression when updating Quasar
• update documentation

[rodja]

That's a wonderful solution :-)