abhirajadhikary06 / abhirajadhikary06/openfeedback
[Bug]: Feedback Cards Alignment and Responsive Layout Issues
- Linguagem predominante
- HTML
- Estrelas
- 8
- Forks
- 15
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Descrição
### 📋 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
Guia de contribuição
Direção de pesquisa
Look for the feedback cards component in the frontend code, likely in a CSS file or a component using Flexbox/Grid. The screenshots show the layout issues. Test responsive breakpoints (desktop, tablet, mobile) and adjust the grid properties and media queries to meet the acceptance criteria. Verify the fix by checking alignment and spacing across viewports.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- css, html
- Domínio
- frontend
- Tipo de issue
- Bug
- Dificuldade
- 2/5
- Tempo estimado
- 1-3 horas
- Status de atividade
- Estagnada
- Clareza
- Claramente especificada
- Facilidade para iniciantes
- 65/100