abhirajadhikary06 / abhirajadhikary06/openfeedback
[Bug]: Feedback Cards Alignment and Responsive Layout Issues
- 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
### 💡 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.