[Bug] Lack of spacing between 'Add Link' and 'Submit Case' buttons for mobile screens

[justaskulkarni]

Description

There is no margin between the 'Add Link' and 'Submit Case' buttons. Add Link buttons is aligned to the right and therefore, it doesn't cause an issue on larger screens. However on smaller screens, the lack of a margin is clearly noticable.

Reproduction

1. Visit https://legaldb.creativecommons.org/cases/submit/
2. Open inspect.
3. Use the Toggle device toolbar to simulate a smaller screen. You may use a dimension such as 270x760.
4. See error.

Expectation

There should be spacing between the two buttons.

Screenshots

Environment

• Device: Mobile Devices
• OS: Not OS specific
• Browser: Not browser specific
• Version: Not version specific

Resolution

• [x] I would be interested in resolving this bug.

[justaskulkarni]

Approaches tried

Tried using Bulma class mgb-small on 'Add Link' button to no avail. Similarly, use of class mgt-small on 'Submit Case' button does not solve the issue. Then I tried removing some of the existing Bulma classes and then eventually came to the following conclusion.

Cause of the Error

When the is-pulled-right class is removed, we obtain the desired spacing. However, as expected, the 'Add Link' is no longer aligned to the right.

Course of Action

Clearly, we need to design a way to align the 'Add Link' button to the right without the use of is-pulled-right class.

[justaskulkarni]

Solution

buttons.is-right can be used to align the 'Add Link' button to the right.

Current Code

Suggested Solution

Video after making the changes

https://user-images.githubusercontent.com/98650743/225553991-a40b7ee2-8089-4d43-9ede-6d5962e8e63a.mp4