[UI BUG] : Creating a shortcut with 3-4 keybindings pushes 'Add' button out of the layout's border

[Irtesaam]

Description

There is a UI issue when adding a shortcut with 3-4 keybindings, which pushes the 'Add' button outside the layout's border. I have tested this issue on both Linux and Windows, and it is easily reproducible on both."

Steps to reproduce

1. Go to : Brave > Settings > System > Shortcuts
2. Add a custom shortcut using 3-4 keybindings (eg- Ctrl+Shift+Alt+H)
3. Save it and notice the 'Add' button's positions getting out of layout's border.

Actual result

Below is the screen recording for the same :

brave-ui-bug.mp4

Expected result

The 'Add' button should not get out of the layout even when no. of keybindings are high. Instead, it can shift to the next line below 'Reset' button making the look of the UI consistent.

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Version : 1.70.123 Chromium: 129.0.6668.89 (Official Build) (64-bit)
Revision : 7c1bbf03546a64d969d010808e4f5c99fdf343bb
OS : Linux

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

No response

[Irtesaam]

Hey @rebron , As a beginner in Open source, I might not come up with the most optimal & correct solution to solve this issue and meet the code quality as per Brave's standard.
But still I have tried on my own by inspecting the 'Add' element in browser and found that the size of padding was unnecessary (--leo-spacing-m: 8px) and removing just this line solves the issue. However, I have not tested whether this change produces any other errors as I have not locally set up this project. All this insight is only through inspecting it.

I have attached the screen recording for the same :

inspect-solution-to-brave-issue.mp4

Any reviews on my solution or what could be the optimal way to solve it ?

[fallaciousreasoning]

Hmm, yeah, that could work as the approach. I think the ideal way to remove the padding there would be to do add

--leo-button-padding: 0

alternatively, we could probably set the shortcuts to wrap when they get too long with with flex-wrap: wrap on the row of shortcuts.

If you want to submit a PR, feel free to tag me, and I can take a look!

[Irtesaam]

@fallaciousreasoning
Thank you! I’ll try the wrap and padding method you suggested and let you know how it goes.

If you want to submit a PR, feel free to tag me, and I can take a look!

And yes, I’d love to solve this issue, but I encountered some challenges setting up brave-browser locally. Once I’ve resolved the setup, I’ll work on implementing the fix and let you know when my PR is ready for a review.

[fallaciousreasoning]

Sweet, let me know if you have any questions @Irtesaam

[Irtesaam]

Hey @rebron , As a beginner in Open source, I might not come up with the most optimal & correct solution to solve this issue and meet the code quality as per Brave's standard.
But still I have tried on my own by inspecting the 'Add' element in browser and found that the size of padding was unnecessary (--leo-spacing-m: 8px) and removing just this line solves the issue. However, I have not tested whether this change produces any other errors as I have not locally set up this project. All this insight is only through inspecting it.

I have attached the screen recording for the same :

inspect-solution-to-brave-issue.mp4

Any reviews on my solution or what could be the optimal way to solve it ?

[fallaciousreasoning]

Hmm, yeah, that could work as the approach. I think the ideal way to remove the padding there would be to do add

--leo-button-padding: 0

alternatively, we could probably set the shortcuts to wrap when they get too long with with flex-wrap: wrap on the row of shortcuts.

If you want to submit a PR, feel free to tag me, and I can take a look!

[Irtesaam]

@fallaciousreasoning
Thank you! I’ll try the wrap and padding method you suggested and let you know how it goes.

If you want to submit a PR, feel free to tag me, and I can take a look!

And yes, I’d love to solve this issue, but I encountered some challenges setting up brave-browser locally. Once I’ve resolved the setup, I’ll work on implementing the fix and let you know when my PR is ready for a review.

[fallaciousreasoning]

Sweet, let me know if you have any questions @Irtesaam