UI improvement for header for mobile

[sinsong]

fix #16:

fixed header

implement with fixed top-0 with content correction pt-16 ( <header>'s h-16 ) anchor positing correction using scroll-pt-16 ( <header>'s h-16 )

Protocols overlaps header

Inspected by chrome devtools's Layer tool, <div class="relative rounded-lg border ..."> is Overlaps other composited content.

fix with z-10

Discovered issue

Some content's table is overflow, cause horizontal scrollbar and <header> clipping.

[vially]

Thanks a lot for working on this and sorry for the late reply. I think the feature is very useful and I would like to merge it.

However, as you've mentioned, there seem to be some minor layout issues (some content clipping and overflow as seen in the screen recording below) that I would like to get fixed before merging.

It would be great if you could investigate them a bit and see if you can find a fix. If not, no worries, as I can take a closer look at them and try to come up with a fix, but it may be a while until I'm able to do that since I'm a bit busy with work currently.

https://github.com/vially/wayland-explorer/assets/433598/2f790c96-42ca-4696-ac8b-6b7a47f08464

In any case, thanks again for your contribution!

[sinsong]

Hi! I realize that <table> are inline element, could cause overflow. Bootstrap's strategy is wrap table with <div class="table-responsive"> container (with overflow-x: auto). I hardly add block overflow-x-auto for <table>s.

Another found problem is interface/request name in header, unbreakable long word cause overflow, I add break-all.

Remain overflow caused by text and logo in header, I don't think it's a problem, maybe you have some idea.

[sinsong]

By the way, maybe right panel little big for my phone, fortunately, close button still usable.

[PolyMeilex]

Hi! I realize that <table> are inline element, could cause overflow. Bootstrap's strategy is wrap table with <div class="table-responsive"> container (with overflow-x: auto). I hardly add block overflow-x-auto for <table>s.

FYI make sure you are rebased on top of #63 as it addresses the same problem for Wayland data table, and fixed the layout for me completely. (The overflow for compositors table on the other hand was addressed in #11)

[sinsong]

FYI make sure you are rebased on top of #63 as it addresses the same problem for Wayland data table, and fixed the layout for me completely. (The overflow for compositors table on the other hand was addressed in #11)

Thanks a lot for reminder, I have sync and adjust this pr.