Widget's UI problems

[Luciogi]

1. Padding
2. Icon size

---

Add tool Widget

Image

- Search bar is too big (I mean padding) [Portrait] - Label "Add" is collapsing with search bar [Portrait] - There is extra padding every where, it is very noticeable on android - Tools under label "Import", they could be in 2 columns [Portrait]

---

Asset Widget

Expand

- Add button (+) is outside of boarder which is not press able in [Portrait] mode - Padding problem as above ### Suggestion - (+) button might look better along with ▽

---

Templates

• Close button should have circle around it (for consistency)

Image

---

Settings

• Close button should be on right side (for consistency)
• It should have open animation as slide from left to right
• It should be full screen widget like other i.e Files, Components

---

Finding more ...

[CodeDoctorDE]

Thanks for reporting. I will look into it. These are problems if you use a smaller font size on android while developing

[CodeDoctorDE]

Okay, now I have time to answer.
Firstly the big padding comes from material 3. It should be used to look modern. I don't know how we should fix that: We could break the specs or try to find an alternative way to fix the overlapping.

The add dialog

• We could put the search box in the next line to avoid these issues.
• On the tool buttons, I wanted to have a quadratic look. Maybe we could try to make the pin button smaller to make the whole button smaller
• With the previous point it should automatically be grouped in two columns.

Asset Widget

• Thanks I fixed it. Dropdowns currently doesn't support buttons as trailing in material 3.

Templates

• I just fixed it, thanks for reporting

Settings

• All close buttons are currently on the left button, I think it's good for the consistency to have it on the left side
• If you are on desktop you will see that it's not a drawer. The components or files dialogs are drawers and doesn't relate to the settings dialog.
• For me personally, I think this dialog looks better than a full page

[Luciogi]

All close buttons are currently on the left button, I think it's good for the consistency to have it on the left side

Images

These three pages have close button on right side, while Template and Settings have on left side

So all things should have close button on single side
I would suggest to move close button of Template and Settings to right. :)

On desktop having dialog is keep all things in center of screen, But on Android we have small screen devices too, so it looks odd having dialog, making them full screen also resolve issue with template dialog like search bar would have enough space, label "template" and icon next it would be on single line.
Packs dialogue have problem everything is fitted in single vertical space [portrait mode]

[CodeDoctorDE]

These three pages are not dialogs, they are drawer pages. But I would put the close button on the left here too.
The advantage here is that you don't need to move the finger too much where you opened the menu.

I will try it out with the full screen dialog. Looks like a good idea to improve the spacing.

Packs dialogue have problem everything is fitted in single vertical space [portrait mode]

What do you mean with this?

[CodeDoctorDE]

What do you think about this style of add dialog. The dialog is now in full screen on mobile and normal on desktop:

Btw: The icon is not vertically centered because it doesn't look good if you have two columns next to a one with only one column

[CodeDoctorDE]

That's a good idea.
I implemented this:

What do you think?

[Luciogi]

On Desktop, add some padding

[Luciogi]

Otherwise it is looking alright

[CodeDoctorDE]

Okay thank you very much. I commited the changes, in a few minutes it should be online at https://preview.butterfly.linwood.dev

[Luciogi]

Checked android version it looks very nice

[Luciogi]

In template dialogue , search bar is touching screen (only on android [portrait mode])

Edit: Drawer's close button got too small

[CodeDoctorDE]

I will add a bit padding on the search bar and it should look better

[Luciogi]

• Packs
• Create Pack
• Edit Pack

Make these dialogues full screen too (android only)

[Luciogi]

From my perspective, use keyboard on mobile device in landscape is too bad, because keyboard takes up whole screen. So user would likely to go to portrait mode, to use Packs dialogue. But in portrait mode , elements are too close to each other.

[CodeDoctorDE]

Can you show me what you mean with "elements are too close to each other"?

[Luciogi]

[CodeDoctorDE]

I see...
I will try to remove some spacing there

[Luciogi]

here, these two button doing same function