When a profile or section contains a large description, the content overflows and overlaps with the last div or container at the bottom of the page. This overlap causes the bottom section (such as clickable buttons or links) to become unresponsive due to being hidden behind the content above.
Here’s the specific issue:
The clickable areas at the bottom of the page (e.g., "Discord" button) are covered by the content in the container above due to insufficient space/margin.
This makes some elements non-clickable, affecting user experience.
Expected Behavior
The container or div holding the description should have adequate margin or padding at the bottom to ensure there is enough space between it and the next section. This prevents overlap and ensures all elements remain interactive.
After adding margin-bottom, the bottom elements become clickable as expected.
No visual or interactive conflicts are present after applying the fix.
Steps To Reproduce
Navigate to a profile or section that contains a large description in the UI (or add a long description to test).
Scroll to the bottom of the page, where there are clickable elements like "Discord" or other buttons/links.
Observe that the profile container (whether large or small) causes issues with the clickable elements below it. The links or buttons become unclickable or are partially covered.
Attempt to click the buttons or links covered by the overlapping content.
Notice that they are not clickable due to the overlap.
Is there an existing issue for this?
Current Behavior
When a profile or section contains a large description, the content overflows and overlaps with the last div or container at the bottom of the page. This overlap causes the bottom section (such as clickable buttons or links) to become unresponsive due to being hidden behind the content above. Here’s the specific issue:
The clickable areas at the bottom of the page (e.g., "Discord" button) are covered by the content in the container above due to insufficient space/margin. This makes some elements non-clickable, affecting user experience.
Expected Behavior
The container or div holding the description should have adequate margin or padding at the bottom to ensure there is enough space between it and the next section. This prevents overlap and ensures all elements remain interactive.
After adding margin-bottom, the bottom elements become clickable as expected. No visual or interactive conflicts are present after applying the fix.
Steps To Reproduce
Navigate to a profile or section that contains a large description in the UI (or add a long description to test). Scroll to the bottom of the page, where there are clickable elements like "Discord" or other buttons/links.
Observe that the profile container (whether large or small) causes issues with the clickable elements below it. The links or buttons become unclickable or are partially covered.
Attempt to click the buttons or links covered by the overlapping content.
Notice that they are not clickable due to the overlap.
https://github.com/user-attachments/assets/b55cd289-7bdc-4b52-a835-4de350a59e85
Anything else?
No response