jhoang304 / jhoang304/Whelp

Responsive layout for restaurant list, detail, and review pages

Open
#38 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.