Excessive top spacing and inconsistent left alignment on mobile view (My Books page)

[akramcodez]

Problem

On mobile view, the My Books page shows noticeable layout spacing issues that make the interface look misaligned.

There appears to be unnecessary vertical space above the username section and inconsistent left alignment for some headers such as My Stats and other sections.

This makes the layout feel uneven and visually inconsistent on larger mobile screens.

Reproducing the bug

1. Open the My Books page on a mobile device (or use a mobile viewport in browser dev tools).
2. Observe the profile header section where the username (e.g., akram_sk698) is displayed.
3. Notice the large empty space above the username.
4. Scroll down and observe section headers such as My Stats and others.

Current behavior

• There is a noticeable empty vertical space above the username section.
• Some headers appear overly indented from the left side, causing inconsistent alignment with the rest of the content.

Expected behavior

• The username header should appear closer to the top navigation without excessive spacing.
• Section headers should have consistent left alignment with the main content contain

Context

• Browser (Chrome, Safari, Firefox, etc): Chrome
• OS (Windows, Mac, etc): Windows
• Logged in (Y/N): Y
• Environment (prod, dev, local): prod

Screenshot

[aayushirajesh]

Hi @akramcodez I’ve looked into this issue and identified the likely cause in My Books page templates and mobile CSS layout. I have a clear approach to fix the spacing and alignment inconsistencies on mobile by adjusting the header container spacing and normalizing section header alignment through mobile-specific CSS.

I’d be happy to work on implementing the fix and submit a PR.

Could this issue please be assigned to me?

[mekarpeles]

I believe this is a duplicate issue of #9229 and there's a partial solution #9285

[mekarpeles]

@aayushirajesh can you provide a design of what you think it should look like and any break down of which files you will need to touch and what your solution will be?

[Mohammad-saif079]

UI / UX Improvement Suggestion

While exploring the user dashboard of Open Library, I noticed that the current UI feels somewhat outdated compared to modern web applications. The layout, navigation patterns, and visual design resemble interfaces from the mid-2000s, and there is significant opportunity to enhance the overall user experience.

Open Library is an incredible project with a massive global audience, and improving the frontend experience could make the platform more accessible and engaging for modern users.

Some possible improvement areas could include:

• Modernizing the overall UI layout and typography
• Improving navigation between sections such as reading lists, loans, and stats
• Enhancing responsiveness for mobile and tablet devices
• Introducing smoother interactions and transitions
• Improving visual hierarchy and component consistency

From a technical perspective, it may also be interesting to explore a more modern frontend architecture (for example, a component-based approach using technologies such as React) to enable a more interactive and scalable interface.

Of course, this would require careful consideration to ensure compatibility with the existing backend and infrastructure, but a gradual modernization of the frontend could significantly improve usability and maintainability over time.

Overall, Open Library is an amazing resource, and enhancing the UI/UX could make the experience even better for readers and contributors worldwide.

Here what I have reimagined with Light and dark mode toggle