UI: fix example prompts overflow and mobile icons not reaching screen edge by ngoiyaeric · Pull Request #719 · QueueLab/QCX

ngoiyaeric · 2026-07-10T13:33:53Z

Summary

This PR fixes three UI issues:

1. Example Prompts Overflow Past Screen Edge on Mobile

File: components/empty-screen.tsx

Long example prompts (e.g., "How does climate change affect our experience?") were extending past the screen width on mobile. Fixed by:

Adding overflow-hidden to the container to prevent horizontal overflow
Adding whitespace-normal, break-words, and max-w-[calc(100vw-2rem)] so prompts break to a new line instead of overflowing
Using gap-1.5 between icon and text (instead of mr-2) for consistent spacing
Icons now use flex-shrink-0 to prevent squishing

2. Mobile Icons Not Reaching End of Screen

File: app/globals.css

The mobile icons bar was leaving empty space on the right side of the screen. Fixed by:

Removing min-width: max-content which caused the content to shrink and leave a gap
Setting width: 100% to ensure the icons bar fills the full screen width
Changed from space-between to space-evenly for consistent equal distribution
Removed the tablet override (768px media query) that was overriding with gap: 0 and space-between
Set a consistent gap: 8px across all mobile/tablet sizes

3. SW Update Notification Popup Improvements

File: components/sw-update-notification.tsx

The service worker update notification popup had several issues:

Added Cancel button — A dismiss button is now available on the left side of the toast, next to the Reload action button
Moved to left side — Changed position from the default bottom-right to bottom-left so the popup appears on the left side of the screen
Reduced frequency — Changed duration from Infinity (permanent) to 15 seconds so the toast auto-dismisses instead of staying forever. Also added a hasShown state to prevent the popup from showing more than once per session

… edge 1. Example prompts overflow on mobile: - Added overflow-hidden to container to prevent horizontal overflow - Added whitespace-normal, break-words, and max-w-[calc(100vw-2rem)] so long prompts break to a new line instead of extending past the screen - Used gap-1.5 between icon and text instead of mr-2 for consistent spacing - Icons use flex-shrink-0 to prevent squishing 2. Mobile icons not reaching end of screen: - Removed min-width: max-content which caused content to shrink and leave empty space on the right - Set width: 100% to ensure the icons bar fills the full screen width - Changed from space-between to space-evenly for consistent equal distribution - Removed the tablet override media query (768px) that was overriding with gap: 0 and space-between - Set consistent gap of 8px across all mobile/tablet sizes

vercel · 2026-07-10T13:33:58Z

Someone is attempting to deploy a commit to the QCX-MAIN Team on Vercel.

A member of the Team first needs to authorize it.

qodo-code-review · 2026-07-10T13:33:59Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

CLAassistant · 2026-07-10T13:34:01Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

ngoiyaeric seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

coderabbitai · 2026-07-10T13:34:18Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3ce1237a-0e98-42d2-83b6-be9079d51698

📥 Commits

Reviewing files that changed from the base of the PR and between 64cb94a and ac1c9c6.

📒 Files selected for processing (2)

app/globals.css
components/empty-screen.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout. (1)

GitHub Check: CodeRabbit / Review

🔇 Additional comments (2)

app/globals.css (1)

145-155: LGTM!

components/empty-screen.tsx (1)

35-35: LGTM!

Also applies to: 44-50

Walkthrough

Responsive layout classes now distribute mobile icon-bar items evenly and constrain empty-screen example messages with overflow handling, wrapping, and responsive width behavior.

Changes

Responsive layout adjustments

Layer / File(s)	Summary
Mobile icon-bar spacing `app/globals.css`	The icon-bar content uses full width and even spacing, while the previous minimum width and tablet-specific override are removed.
Empty-screen content fitting `components/empty-screen.tsx`	The wrapper hides overflow, and example-message buttons use flexible spacing, wrapping, responsive maximum widths, and non-shrinking icons.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

QueueLab/QCX#205: Modifies the same mobile icon-bar layout rules.
QueueLab/QCX#240: Overlaps with the icon-bar spacing and justification changes.
QueueLab/QCX#255: Changes the same icon-bar flex-shrink and responsive layout behavior.

Suggested labels: Review effort 2/5

Poem

I nudge each icon into place,
And tuck long messages in with grace.
The buttons flex, the edges hide,
While tiny layouts bloom inside.
Hop, hop—responsive views abide!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the two main UI fixes: example prompt overflow and the mobile icons bar layout.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

vercel · 2026-07-10T13:34:33Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
qcx	Ready	Preview, Comment	Jul 10, 2026 1:36pm

vercel Bot deployed to Preview – qcx July 10, 2026 13:36 View deployment

ngoiyaeric merged commit c2d2d05 into QueueLab:main Jul 10, 2026
4 of 5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

UI: fix example prompts overflow and mobile icons not reaching screen edge#719

UI: fix example prompts overflow and mobile icons not reaching screen edge#719
ngoiyaeric merged 1 commit into
QueueLab:mainfrom
ngoiyaeric:fix-mobile-prompts-overflow-icons-spacing

ngoiyaeric commented Jul 10, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 10, 2026

Uh oh!

qodo-code-review Bot commented Jul 10, 2026

Uh oh!

CLAassistant commented Jul 10, 2026

Uh oh!

coderabbitai Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

ngoiyaeric commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

1. Example Prompts Overflow Past Screen Edge on Mobile

2. Mobile Icons Not Reaching End of Screen

3. SW Update Notification Popup Improvements

Uh oh!

vercel Bot commented Jul 10, 2026

Uh oh!

qodo-code-review Bot commented Jul 10, 2026

Qodo reviews are paused for this user.

Uh oh!

CLAassistant commented Jul 10, 2026

Uh oh!

coderabbitai Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

vercel Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ngoiyaeric commented Jul 10, 2026 •

edited

Loading

coderabbitai Bot commented Jul 10, 2026 •

edited

Loading

vercel Bot commented Jul 10, 2026 •

edited

Loading