Modernflyouts: [Enhancement] The side arrows overlap with the Title and the Thumbnail

[hsusanoo]

I think there should be extra padding space, or some other solution, to solve this this :

[ShankarBUS]

Yep! That's a great request.

I should reconsider the design and make it better

[ShankarBUS]

But they are not disturbing you, right?

I mean they are not that much overlapping with the content.

[hsusanoo]

@ShankarBUS No, you can give this the lowest priority. I like the design overall 👍🏻

[ShankarBUS]

I had to make the scroll button as small as possible. I had to squash it to the edge. I copied the exact layout and dimensions from the Windows 10X global system media transport controls panel. There was no space for the scroll button in their layout.

I'm currently confused about what to do 😅

[Cyberdroid1]

Expand the flyout size maybe? A few pixels won't hurt. But that's just me. 😂

[ShankarBUS]

I will reconsider the layout and UI later 😁😉

[Samuel12321]

i personally don't think there is a problem, as long as both items are visible. The arrow its self doesn't cover the text or picture, just the highlighting.

[zeealeid]

Maybe this problem could be fixed by making the arrows appear only when the curser is hovering over the flyout? Also adding a bit of padding on both sides can fix this issue as well :)

[ShankarBUS]

Hmm. Sounds interesting.
Carry on.

Should those buttons be round?

[zeealeid]

Hmm. Sounds interesting.
Carry on.

Should those buttons be round?

I like the pill shaped rounded buttons as it looks more in-line with the Windows 10X-ish look also it sort of looks like a clickable button with the background so it might be better but removing it wouldn't make a huge difference in terms of looks IMO.

[ShankarBUS]

@zeealeid,

In case you need the current design.

I made this Figma project a while ago (haven't been useful since then).

Hope it helps https://www.figma.com/file/Gq5AKs5k8lOl0rmDjQeXT2/ModernFlyouts.

Edit: certain parts of the design have changed. But most of the design is still the same.

P.S. I used some components from your Shell Templates Figma project in this 😜.