Responsive layout for restaurant list, detail, and review pages
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 0
- Avg merge
- 2h 19m
- Merged PRs (30d)
- 30
Description
## Summary
Only 8 of the 24 component stylesheets contain a `@media` query (Navigation, HomePage, the Login/Signup pages, UserPage, UpdateProfile, DisplayPhotos, SearchBar). The core browsing pages have none:
`Restaurant.css`, `RestaurantList.css`, `SingleRestaurant.css`, `GetAllReviews.css`, `OwnerResponse.css`, `CreateRestaurantModal.css`, `EditRestaurant.css`, `AddPhoto.css`, `CreateNewReview.css`, `UpdateReview.css`, `ConfirmDeleteModal.css`, `Footer.css`, `LoginForm.css` (modal), `SignupForm.css` (modal), `RatingStar.css`, `DeleteRestaurant.css`.
On a phone the restaurant card (`Restaurant/index.tsx`) keeps its fixed image-plus-summary row, the detail page (`SingleRestaurant/index.tsx`) keeps a two-column `bottom-section` with a sidebar, and the modals overflow the viewport.
## Proposal
- Define two or three breakpoints once (custom properties in `index.css`) and use them consistently.
- Restaurant card: stack image above text below roughly 600px. Detail page: single column, with the contact sidebar moving under the description. Modals: `max-width: 100vw` with internal scroll.
- Verify at 375px and 768px in the devtools device toolbar and add a short checklist to the README.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading index.css, Restaurant/index.tsx, and SingleRestaurant/index.tsx alongside their stylesheets to understand the current layout rules. Inspect the listed component CSS files for existing fixed widths, rows, columns, and modal overflow. Verify the restaurant and detail layouts plus modals at 375px and 768px in the devtools device toolbar, then add the requested checklist to the README.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100