`ui.separator().props("vertical")` takes `width: 100%` instead of `1px` with new `nicegui.css`

[backbord]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

from nicegui import ui

ui.separator().props("vertical")

ui.run()

Description

Hi,

I noticed that my ui.separator.props("vertical") elements stretched to occupy all the horizontal space instead of just 1px after updating to NiceGUI 3.

It seems to stem from f571ff1#diff-5d9345fb48521f49b1b64d5d6e3cec49ab5a59b10621f21532e1d87613e3e69bR43

Can you advise on how to re-enable the "vertical" feature without having to add a style like ui.separator().props("vertical").style("width: 1px")?

Thanks!
Tim

NiceGUI Version

3.0.4

Python Version

3.12.11

Browser

Firefox

Operating System

Linux

Additional Context

No response

[python-and-novella]

The test code is:

from nicegui import ui

def index():
    with ui.row():
        ui.button('1')
        ui.separator().props('vertical')
        ui.button('2')
index()
ui.run(
    #root=index,
    #native=True
)

It shows in NiceGUI 3.0.0 above:

But it shows in NiceGUI 2.24.2:

Because of @layer of CSS in NiceGUI 3.0.0, the priority of .nicegui-separator in nicegui.css is higher than .q-separator--vertical in quasar.*.css:

See rules in https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#layer_order_and_the_!important_flag

[python-and-novella]

@evnchn I change

.nicegui-separator {
  width: 100%;
}

into

.q-separator--vertical.nicegui-separator {
  width: 1px;
}
.q-separator--horizontal.nicegui-separator {
  width: 100%;
}

It works well. Is it OK?

[python-and-novella]

@backbord You can fix it temporarily by adding:

ui.add_css(
    '''
    .q-separator--vertical.nicegui-separator {
        width: 1px;
    }
    .q-separator--horizontal.nicegui-separator {
        width: 100%;
    }
    ''',
    shared=True
)