Skip to content

basic mobile design#186

Merged
interim17 merged 9 commits into
mainfrom
mobile
Mar 24, 2026
Merged

basic mobile design#186
interim17 merged 9 commits into
mainfrom
mobile

Conversation

@interim17

@interim17 interim17 commented Mar 20, 2026

Copy link
Copy Markdown
Contributor

A more complete fix than #185

If we don't want to these kind of changes now/ever, I'll just close this, but it's a much nicer look/feel.

The main change is a hamburger menu for the recipe panel.

Screenshot 2026-03-23 at 10 43 15 AM Screenshot 2026-03-23 at 10 43 25 AM Screenshot 2026-03-23 at 10 43 35 AM

@interim17
interim17 requested a review from Copilot March 20, 2026 00:25
@github-actions

github-actions Bot commented Mar 20, 2026

Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 31.64% 663 / 2095
🔵 Statements 31.64% 663 / 2095
🔵 Functions 39.42% 41 / 104
🔵 Branches 72.72% 144 / 198
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
src/App.tsx 0% 0% 0% 0% 1-9, 18-23, 25, 27-29, 31-43, 45, 47-49, 51-57, 59-72, 74-118, 120-128, 130-166, 168-173, 175-183, 185-190, 192-204, 206-211, 213-220, 222-233, 235, 237
src/components/StatusBar/index.tsx 0% 0% 0% 0% 1-7, 9-13, 24-25, 27-28, 32-37, 39-42, 44-48, 50-56, 58-59, 62-71, 73-81, 83-90, 92-96, 98-102, 104, 106
Generated in workflow #252

@interim17 interim17 mentioned this pull request Mar 20, 2026
@github-actions

github-actions Bot commented Mar 20, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-03-24 17:43 UTC

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Improves the app’s small-screen/mobile experience by introducing a hamburger-driven recipe panel, alongside responsive style refinements, and adds a dev-server host setting to ease mobile testing on LAN.

Changes:

  • Adds a small-screen hamburger menu / slide-in overlay for the recipe (PackingInput) panel.
  • Refines responsive styling for header/footer/status bar and the small-screen warning layout.
  • Updates Vite dev server configuration to bind to all network interfaces.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 10 comments.

Show a summary per file
File Description
vite.config.ts Exposes dev server on network (server.host: true) to support testing on mobile devices.
src/App.tsx Implements small-screen conditional layout and hamburger menu overlay/backdrop behavior.
src/App.css Adds styles for mobile menu overlay/backdrop and adjusts responsive header/footer/input sizing.
src/components/SmallScreenWarning/style.css Adjusts warning overlay layout/centering for small screens.
src/components/StatusBar/index.tsx Simplifies wrapper class usage for status bar layout.
src/components/StatusBar/style.css Updates status bar spacing and small-screen behavior.
package.json Adds @ant-design/icons dependency required by new/expanded icon usage.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/App.tsx Outdated
Comment thread src/App.css Outdated
Comment thread src/components/SmallScreenWarning/style.css Outdated
Comment thread src/App.tsx
Comment thread src/components/SmallScreenWarning/style.css Outdated
Comment thread src/App.tsx Outdated
Comment thread src/App.tsx Outdated
Comment thread src/App.css Outdated
Comment thread vite.config.ts
Comment thread src/App.tsx Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/App.tsx
Comment thread src/App.css Outdated

@mogres mogres left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for putting this together!! Commenting only on behavior since I am not familiar with frontend development.

Tested by opening the PR preview version on a mobile browser.

  1. I like the popup style warning that explicitly warns about screen size
  2. Upon dismissing the popup, the viewport gets stuck in a "Loading" loop until I click on the hamburger menu, after which everything gets populated.

@interim17

interim17 commented Mar 23, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for putting this together!! Commenting only on behavior since I am not familiar with frontend development.

Tested by opening the PR preview version on a mobile browser.

  1. I like the popup style warning that explicitly warns about screen size
  2. Upon dismissing the popup, the viewport gets stuck in a "Loading" loop until I click on the hamburger menu, after which everything gets populated.

Thanks for catching that, I think the last set of changes I pushed introduced that bug, but should be fixed now.

@rugeli rugeli left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really like the warning popup and side panel, they run smoothly on my phone. Landscape layout doesn't look as good, but since portrait is more important in our case, this is a nice workaround for now!

@mogres

mogres commented Mar 23, 2026

Copy link
Copy Markdown

should be fixed now.

Works as expected, thanks!

@meganrm meganrm left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good to me

Base automatically changed from small-screen to main March 24, 2026 17:21
@interim17
interim17 merged commit fad3e94 into main Mar 24, 2026
2 checks passed
@interim17
interim17 deleted the mobile branch March 24, 2026 17:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants