openverse-frontend
openverse-frontend copied to clipboard
Single image result page's top padding is too large without 'Back to search results' link
Description
On screen widths above md breakpoints, the single image result page has a large padding above the image even when there's no Back to Search Results link.
First reported by @AetherUnbound
Reproduction
- Go to single image result page (server-rendered, i.e. go to the page directly, or refresh after you load it from search) on a screen that is at least
mdwide (768px). - You will see a large gray padding at the top. The padding is 3rem (48px) whereas the mockup has 32 px padding: https://www.figma.com/file/w60dl1XPUvSaRncv1Utmnb/Audio-Release?node-id=1228%3A21558
Screenshots
-
Padding with "Back to Search Results" link (expected)

-
Padding is too large when no link is present

Additional context
"Back to search results" link is only displayed when you navigate to this page from search results, and not on direct load, or when navigating from the related images.
The z-index is used for "Back to search results" because for 3d models the Sketchfab viewer is displayed a little differently, so it might make sense to test implementation with a Sketchfab model: https://search-staging.openverse.engineering/image/ee8c9894-0155-4a12-96d4-e099e1f02900
Resolution
- [ ] 🙋 I would be interested in resolving this bug.
I believe it was done this way by design if I recall the mockups correctly, but surely @panchovm can confirm.
Yes, as I understand this is part of the design, but we can wait for Francisco to confirm.
The spacing above the main content, and found in the mockup, is due to redesigning the results navigation through modal views where the close action is outside of the content area. This full-screen view was intended to open openverse links instead of the default navigation.
Since this is an interim solution, I will add the needs design label to create a design issue and propose a solution to solve this inconsistency until we develop the modal behavior expected.
@obulat , I am interested in working on this issue.