internetarchive / internetarchive/bookreader

Ensure the button is placed correctly.

Open
#1,369 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.2k
Forks
491
Avg merge
2d 15h
Merged PRs (30d)
3

Description

**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--
![Image](https://github.com/user-attachments/assets/78fde0a3-52e7-4fd2-882b-75edad450acb)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.