Sidebar content off the screen

[jmacura]

Bug

Describe the bug Content of panels in the sidebar overflows from the screen when there is a slider present

To Reproduce Steps to reproduce the behavior:

1. Go to any panel which has a lot of content. E.g. 'Layermanager' or 'Styler'
2. See how the content on the right hand side is cropped by the window edge

Expected behavior Either the panel shall enlarge by the size of the slider or the content must shrink so it does not overflow. Or reserve the place on the side of the panel since the beginning. Displaying another slider in the bottom is not an option.

Screenshots

Additional context I observed a change in b6f460f5086d387c8b060aa8e19aaff4cd576321 on this line https://github.com/hslayers/hslayers-ng/blob/b6f460f5086d387c8b060aa8e19aaff4cd576321/projects/hslayers/src/components/styles/symbolizers/fill-symbolizer/fill-symbolizer.component.html#L27 which seemed to deal with that exact issue at one particular place.

[raitisbe]

This seems to be browser/OS specific, where chrome works better than firefox. Partly it comes from the fact that we are forcing the body element to have margin: 0; That for the main body slider, which is set in index.html so we hslayers doesnt care about that.

A different beast is the separate slider for .hs-panelplace element. Since not all panels are filling the complete height, it would not make sense to have a margin-right applied to all of them. Just to be on the safe side, I would go with the application of me-1 or me-2 to the tricky controls, such as the cog icon in layer manager or filter/scale/+ buttons in styler. Also buttons in panel headers seem to need margins.

[FilipLeitner]

I remember doing some changes for symbolizer indentation in #3584. Will rebase and check if its solved already or need some work.

[raitisbe]

I did some experimentation in my branch, but not 100% happy with the result. Its a struggle to align betweeen chrome and firefox, since chrome automatically takes into account the scrollbars and margin isn't even necessary and in the results its padded too much. On firefox its seems to be too little on the other hand.

[raitisbe]

In case your result is better @FilipLeitner lets go with yours

[FilipLeitner]

Unfortunately not, was bit something different at last. I probably I agree with on this

I would go with the application of me-1 or me-2

[FilipLeitner]

This seems to be working, for now at least: https://sass-lang.com/documentation/breaking-changes/moz-document

  @-moz-document url-prefix() {
    & .hs-panelplace {
      padding-right: 0.25rem;
    }
  }

[jmacura]

It is slightly better now, but not perfect for sure.

[raitisbe]

Is it on firefox?

On Tue, 3 Jan 2023, 15:26 jmacura, @.***> wrote:

It is slightly better now, but not perfect for sure. [image: image] https://user-images.githubusercontent.com/5598693/210365857-530d1423-d176-4c21-aa80-2ef90b51dc18.png

— Reply to this email directly, view it on GitHub https://github.com/hslayers/hslayers-ng/issues/3648#issuecomment-1369769474, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADAR6T7O5XIJRZ5ZAVJSU3WQQSGVANCNFSM6AAAAAATBR72VQ . You are receiving this because you modified the open/close state.Message ID: @.***>

[jmacura]

Is it on firefox?

Indeed.

[raitisbe]

How does it look 9n chrome?

On Tue, 3 Jan 2023, 16:44 jmacura, @.***> wrote:

Is it on firefox?

Indeed.

— Reply to this email directly, view it on GitHub https://github.com/hslayers/hslayers-ng/issues/3648#issuecomment-1369848342, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADAR6UXQY5N375MMVDIGHDWQQ3MVANCNFSM6AAAAAATBR72VQ . You are receiving this because you modified the open/close state.Message ID: @.***>

[jmacura]

In Chrome/Edge it is fine, as it was mentioned already.

[raitisbe]

It looks even too far away from the border. So I guess the current state is the best middleground which to strike without detecting browsers and dynamically adjusting offset.

On Tue, 3 Jan 2023, 17:26 jmacura, @.***> wrote:

In Chrome/Edge it is fine, as it was mentioned already. [image: image] https://user-images.githubusercontent.com/5598693/210387753-488e1b14-3e95-41d6-9b78-fe5bb04eb650.png

— Reply to this email directly, view it on GitHub https://github.com/hslayers/hslayers-ng/issues/3648#issuecomment-1369898846, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADAR6XYWUBJQIHZ54ADTFTWQRAJPANCNFSM6AAAAAATBR72VQ . You are receiving this because you modified the open/close state.Message ID: @.***>