Repository navigation
[BUG] the UI compression and 3D book spine look distorted on mobile view #520
Description
while testing on mobile preview , especially 600px there's 2 regressions that i have observed so far:
- 3d book spines compress into thin slivers making the title unreadable in that format when multiple books are arranged side by side
2)the navig links like discovery , my library etc are misaligned
my proposed Fix:
I plan to adjust the media queries in css/style-responsive.css to handle the nav-links placement and also modify library-3d.js to enforce a min-width for book elements on mobile, to try and resolve the book spine issue
screenshots:
here the book spines are almost un readable
the top alginment of navigation links is not proper
@devanshi14malhotra i would like to work on this! Could you please assign this to me? #GSSOC26
edit:
tried all fixes and observed that hat the "sliver" look on the book spines in the mobile view is a content issue. The source images are front covers, not spines.
new plan: I am implementing a Python-based Spine Generator. It will:
take a book cover image.
crop a 60px–80px strip from the left side.
Apply a slight gradient/shadow to simulate 3D depth.
save it as a _spine.jpg for the frontend to use.
i'll be adding this logic to the backend/ directory
@devanshi14malhotra please assign this issue to me , i would like to work on it
UPDATE:
instead of cropping covers,i will be implementing a dynamic text-spine generator. this script will take the book's title and author, flip the text by 90 degree vertically, and generate a clean, readable spine image. This ensures all books regardless of their cover quality are perfectly readable on the 3D shelf.
Activity
aarushii25 commentedon May 15, 2026
Hi @devanshi14malhotra !
I am a GSSoC 2026 contributor
and would like to work on this issue.
My Approach:
and spine styles
for smaller screen sizes
properties for mobile view
using Chrome DevTools
Tech I'll use: HTML, CSS, Media Queries
Can you please assign this to me?
Thank you! 😊
srirammulukuntla11 commentedon May 15, 2026
Hi @devanshi14malhotra,
I’m also interested in contributing to this issue under GSSoC 2026. I noticed the mobile responsiveness and navigation alignment problems while testing on smaller screen sizes.
If this issue becomes available, I would be happy to work on it.
Thank you!
shenoyshre22 commentedon May 15, 2026
@devanshi14malhotra hii
can you assign this issue please so i could proceed with it
shenoyshre22 commentedon May 16, 2026
hello @devanshi14malhotra i have implemented the volumetric 3D book layout with the dynamic, text-wrapped spine generation pipeline. opened a PR and all automated build checks are passing cleanly. its ready for your review whenever you have a moment :))
shenoyshre22 commentedon May 16, 2026
hii @devanshi14malhotra any updates on the pr? do i need to make any changed?
devanshi14malhotra commentedon May 16, 2026
i will review... pls be patient.. thanku..
meanwhile, @shenoyshre22 pls link the pr with this issue... and add screenshots in the pr if not added yet
shenoyshre22 commentedon May 16, 2026
Hi @devanshi14malhotra, i have updated the PR description to link it directly with this issue (Fixes #520) and added the requested frontend layout screenshots to the description box :)))
thank you so much for taking the time to review it! ready whenever you are :)