Ensure the button is placed correctly.

[abhijit9040]

Description

Description of Issue:
The buttons in the "Share this book" modal/dialog are not placed correctly. They appear to overlap or misalign, causing the UI to look cluttered and potentially confusing to users. Specifically:

The "Finished" button overlaps with the "Email" button.
The "Facebook" and "Twitter" buttons are not evenly spaced or aligned properly.
This issue affects the visual clarity and usability of the sharing options.
Steps to Reproduce:

Open the application.
Click on the "Share" button to open the sharing modal.
Observe the alignment and placement of the buttons in the "Share this book" section.
Expected Behavior:
The buttons should be properly aligned and spaced within the modal, maintaining visual consistency and ease of interaction.

Suggested Fixes:

CSS Adjustments:

Use a flexbox or grid layout to arrange buttons within the modal evenly.
Add sufficient padding or margin between buttons to ensure separation.
Responsive Design:

Test the modal’s layout across multiple screen resolutions and devices to ensure alignment remains consistent.
Utilize media queries if necessary to adjust spacing and size for smaller screens.

Button Styling:

Ensure each button has a fixed width and height to maintain uniformity.
Test for overflow issues that may cause overlap or misalignment.

image--

[AST0008]

Can i work on this?
@abhijit9040

[Darshit42]

ive thought about this we can utilize the empty space on the right and align them vertically, with this it would also be easier to adjust the buttons,

[Darshit42]

is this fine? if yes should i raise a pr?

[abhijit9040]

i think this is more appropriate UI . Should i raise a pr?