abhirajadhikary06 / abhirajadhikary06/openfeedback

[Bug]: Feedback Cards Alignment and Responsive Layout Issues

Ouverte
#37 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
HTML
Étoiles
8
Forks
15
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

### 📋 Description
The feedback cards on the main page have alignment and responsiveness issues. The cards are not properly aligned, and the layout breaks or looks inconsistent on different screen sizes, particularly on mobile devices.

### 🔍 Current Behavior
- Feedback cards have inconsistent spacing and alignment
- Card layout doesn't adapt well to different screen sizes
- On mobile/tablet, cards may overlap or have awkward spacing
- Vote buttons and score display may not align properly within cards
- Company logos and sentiment badges positioning is inconsistent

### ✅ Expected Behavior
- Feedback cards should be consistently aligned in a responsive grid
- Cards should maintain equal heights and spacing
- On mobile devices, cards should stack properly with appropriate padding
- All card elements (logo, company name, sentiment badge, feedback text, vote controls) should be properly aligned
- Grid should adapt smoothly from desktop (3-4 columns) to tablet (2 columns) to mobile (1 column)

### 📱 Affected Viewports
- [ ] Desktop (1200px+)
- [x] Tablet (768px - 1199px)
- [x] Mobile (< 768px)
- [x] Small mobile (< 480px)

### 🎯 Acceptance Criteria
- [ ] Feedback cards display in a consistent grid layout
- [ ] Equal spacing between cards (both horizontal and vertical)
- [ ] Cards have equal heights in the same row
- [ ] Responsive breakpoints work correctly:
- Desktop: 3-4 cards per row
- Tablet: 2 cards per row
- Mobile: 1 card per row (full width)
- [ ] All internal card elements are properly aligned
- [ ] Vote controls (upvote, downvote, score) align consistently
- [ ] Company logo and name align properly
- [ ] Sentiment badge positioned correctly
- [ ] No horizontal scrolling on any device
- [ ] Proper padding/margins on all screen sizes

### 📸 Screenshots

Image
Image
Image

### 💡 Suggested Solution
1. **Fix Grid Layout**:
- Use CSS Grid or Flexbox with proper gap properties
- Ensure consistent column widths
- Add proper responsive breakpoints

2. **Card Internal Alignment**:
- Use flexbox for card content layout
- Ensure consistent padding inside cards
- Align vote controls properly at the bottom

3. **Responsive Design**:
- Add media queries for tablet and mobile
- Adjust card width and spacing for smaller screens
- Ensure touch-friendly button sizes on mobile

### 🎯 Priority
**Medium** - Affects user experience but doesn't break core functionality

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.