OpenLake / OpenLake/OpenLake--Website
[SPRINT-M25] fix:Improve Card Layout and Responsiveness
Open
Nobody has claimed this yet.
enhancement
good first issue
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 16
- Avg merge
- 8h 54m
- Merged PRs (30d)
- 7
Description
The current card design lacks responsiveness and has text overflow and spacing issues, especially on smaller screens. This issue aims to refine the card layout, spacing, and typography for a more consistent and readable UI.
- Tasks:
- Adjust card width and height for better scaling.
- Add proper spacing (margin-bottom, alignment fixes).
- Improve responsiveness with new media queries.
- Fix text wrapping and overflow in titles and tech sections.
- Maintain smooth flip animation and clean visuals
- Expected Result : Cards should resize smoothly, align evenly, and display text clearly on all devices.
- Labels used : enhancement
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the card component and its styling in the TypeScript website, then inspect the layout at smaller screen sizes. The work is done when cards resize and align consistently, text wraps without overflow, spacing is readable, and the existing flip animation remains smooth across devices.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100