[openstreetmap/openstreetmap-website] Improve visibility of element navigation using sticky positioning #6759 (PR #6767)

[Dheeraj Bansal]

This PR addresses issue #6759 by making the element navigation bar (containing links like History, Edit, etc.) more prominent and accessible.

Changes Made
HTML Structure: Wrapped the browse/common_details partial in a new <div class="sticky-nav-wrapper"> across the following files to ensure consistency:

app/views/browse/_node.html.erb

app/views/browse/_way.html.erb

app/views/browse/_relation.html.erb

CSS Implementation: Added the .sticky-nav-wrapper class to app/assets/stylesheets/common.scss using position: sticky and top: 0.

Styling: Added a background color (var(--bs-body-bg)) and a bottom border to the sticky container to maintain readability and separation from the scrolling content beneath it.

Technical Reasoning
Using position: sticky ensures that the navigation links remain at the top of the sidebar viewport as the user scrolls through long lists of tags, nodes, or relation members. This directly solves the issue of these links becoming hidden on long element pages.

Note on Verification
I have verified the code logic and SCSS properties locally. However, due to persistent local Docker and networking environment issues on my Windows machine, I was unable to capture final browser screenshots for this submission. I would appreciate it if a reviewer could verify the visual behavior in a running environment.

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/6767

-- Commit Summary --

  * Improve visibility of element navigation using sticky positioning #6759

-- File Changes --

    M app/assets/stylesheets/common.scss (11)
    M app/views/browse/_node.html.erb (9)
    M app/views/browse/_relation.html.erb (9)
    M app/views/browse/_way.html.erb (13)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/6767.patch
https://github.com/openstreetmap/openstreetmap-website/pull/6767.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6767
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6767 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260202/4683d570/attachment-0001.htm>