search

vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.95k stars 1.19k forks source link

Sponsors Cards Cut Off at Bottom of Screen in Documentation #2346

Closed sreeharsha-rav closed 3 months ago

sreeharsha-rav commented 3 months ago

Reproduction

The issue occurs on the Vue Router documentation website.

Steps to reproduce the bug

  1. Visit the Vue Router documentation website
  2. Scroll down to view the sponsors section on the right side of the page
  3. Observe that the sponsors' cards are cut off at the bottom of the viewport

Expected behavior

The sponsors' cards should be fully visible, either by fitting within the viewport or by allowing scrolling to view all content.

Actual behavior

The sponsors' cards are partially hidden, with the bottom portion cut off at the edge of the screen. This creates an incomplete and visually unappealing display of sponsor information.

image

Additional information

Environment:

  1. Chrome Version: Version 127.0.6533.100 (Official Build) (64-bit)
  2. OS: Windows 11 Home

This UI issue affects the readability and accessibility of sponsor information, which is important for acknowledging supporters of the project. It also impacts the overall user experience of the documentation website.

The issue is visible in the attached screenshot, where sponsor logos and information are cut off at the bottom of the viewport.

sreeharsha-rav commented 3 months ago

Potential solutions to explore:

  1. Adjust the layout to ensure all sponsor cards fit within the typical viewport height
  2. Implement a scrollable container for the sponsors section if it exceeds the viewport height
  3. Reduce the size of individual sponsor cards to fit more content vertically

I can work on this issue. .take

posva commented 3 months ago

The container is scrollable thought If you want to work on this, feel free to. Note part of the relevant code is in vitepress