[UI] Misalignment of text and buttons in Explore section (Discover Developers) #40
Description
🎯 What’s the suggestion?
Align the text and buttons inside each user card in the Explore section of the Discover Developers page, ensuring that profile names, images, and both “Add Friend” and “View GitHub” buttons are visually consistent and neatly arranged. Adjust padding, margins, and centering so that all elements are balanced and none appear overlapped or out of place.
👀 What’s wrong with the current version?
Currently, the buttons and text within these cards are often misaligned. The “Add Friend” and “View GitHub” buttons are not consistently placed relative to the names and user images, sometimes overlapping or appearing off-center.
🚶♂️Steps to Reproduce the Misalignment Issue:
-Go to the “Discover Developers” page on CodeNearby.
-Look at the “Explore” section displaying a grid/list of user cards.
-Observe the positioning and alignment of the profile names, images, and the “Add Friend” and “View GitHub” buttons within each card.
-Through inspect, try changing screen size(specifically iPad dimensions)
-Notice that in several cards, the buttons and text are not properly aligned, appear off-center, or overlap with other elements.
-Compare across different cards or screen sizes to see inconsistent padding, margin, or spacing.
🧠 Mockup or Reference
iPad Mini view:
iPad Air view:
iPad Pro view:
I’d like to take this up. Kindly assign me this issue.