abhirajadhikary06 / abhirajadhikary06/openfeedback

[Bug]: Feedback Cards Alignment and Responsive Layout Issues

Aberta Para iniciantes
#37 2 comentários 0 reações 0 responsáveis Ver no GitHub
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

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

Guia de contribuição

Abrir o 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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.