appwrite / website

The Appwrite website, docs and blog šŸ 
https://appwrite.io
171 stars 162 forks source link

šŸ› Bug Report: Issues with Table of Content (ToC) Button Overlap and Header Cutoff #1042

Open rogix opened 1 week ago

rogix commented 1 week ago

šŸ‘Ÿ Reproduction steps

On the Terms of Service page:

  1. Scroll the page up to see the overlapping issue after the 12th item in the ToC.
  2. Trigger the banner at the top to observe the header being cut off.

šŸ‘ Expected behavior

šŸ‘Ž Actual Behavior

Description of Issues with Table of Content (ToC) Button

There are two minor issues affecting the Table of Content (ToC) button's functionality and appearance:

First Issue: Overlapping List Items

Problem:
The ToC button overlaps the list items when the page is scrolled up. Up to a point, it looks fine, but after the 12th item, it starts overlapping the other items.

Solution:
A simple z-index: 1 can fix this issue.

Screenshot:
Overlapping Issue

Second Issue: Header Cutoff

Problem:
When the banner appears at the top, it pushes the header down, cutting off half of the menu.

Screenshot:
Header Cutoff Issue

Proposed Solutions

  1. Add z-index: 1 to the ToC button to prevent it from overlapping the list items.
  2. Adjust the CSS to ensure the header is not pushed down and cut off when the banner appears.

These small fixes will improve the usability and visual appeal of the ToC.

šŸŽ² Appwrite version

Appwrite Cloud

šŸ’» Operating system

MacOS

šŸ§± Your Environment

Browser

šŸ‘€ Have you spent some time to check if this issue has been raised before?

šŸ¢ Have you read the Code of Conduct?