Skip to content

fix: mobile feedback issues#2936

Merged
HarshMN2345 merged 4 commits intomainfrom
fix-mobile-feedback-and-support
Mar 27, 2026
Merged

fix: mobile feedback issues#2936
HarshMN2345 merged 4 commits intomainfrom
fix-mobile-feedback-and-support

Conversation

@HarshMN2345
Copy link
Copy Markdown
Member

@HarshMN2345 HarshMN2345 commented Mar 27, 2026

What does this PR do?

image image

Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

Summary by CodeRabbit

  • New Features

    • Added mobile feedback modal to the console.
  • Bug Fixes

    • Improved tooltip interaction handling based on visibility state.
    • Enhanced sidebar behavior for project-specific navigation.
  • Style

    • Redesigned support section layout with improved spacing and typography.
    • Enhanced mobile responsiveness for smaller screens (≤520px) with vertical layout adjustments.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 27, 2026

Warning

Rate limit exceeded

@HarshMN2345 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 41 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 1 minutes and 41 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 89af7d04-06d5-4261-9e02-6f05e76460a9

📥 Commits

Reviewing files that changed from the base of the PR and between 32df519 and d8f43d5.

📒 Files selected for processing (4)
  • src/lib/components/sidebar.svelte
  • src/lib/components/support.svelte
  • src/lib/layout/shell.svelte
  • src/routes/(console)/+layout.svelte

Walkthrough

This pull request modifies four component files across the application. The tooltip component now conditionally applies pointer-events based on visibility state. The support component restructures its HTML markup, replacing utility classes with semantic wrapper elements and adds component-scoped styling for layout and typography. The shell layout introduces a new derived variable activeProject that filters selectedProject based on the current route, and updates multiple props, conditions, and CSS class bindings to use this new variable. Additionally, a feedback modal component is conditionally rendered in the console layout when the feedback store signals visibility.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'fix: mobile feedback issues' is vague and generic, using non-descriptive terms that don't clearly convey the specific technical changes made in this changeset. Refine the title to be more specific about the actual changes, such as 'fix: conditionally apply pointer-events to tooltip and add mobile feedback modal' or similar to better reflect the scope of modifications.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix-mobile-feedback-and-support

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 and usage tips.

@HarshMN2345 HarshMN2345 requested a review from Meldiron March 27, 2026 08:43
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Mar 27, 2026

Greptile Summary

This PR addresses several mobile UX issues: it prevents invisible dropdowns from intercepting taps (drop.svelte), improves the responsive layout of the premium support row (support.svelte), guards the shell against a stale selectedProject lingering on non-project routes and blocks content interaction while the mobile sidebar is open (shell.svelte), and adds a MobileFeedbackModal to the console layout for viewports where the sidebar's feedback entry point is not available (+layout.svelte).

Key changes:

  • drop.svelte: pointer-events: none on the hidden tooltip div — clean fix for mobile tap-through.
  • support.svelte: Semantic support-premium-row / support-hours classes with flex-wrap and a 520 px breakpoint — straightforward mobile improvement.
  • shell.svelte: activeProject reactive variable narrows project context to actual project routes; is-sidebar-open + scoped CSS blocks content interaction while the mobile sidebar is open.
  • +layout.svelte: Renders MobileFeedbackModal whenever $feedback.show is true, without a viewport guard. Unlike MobileSupportModal (which uses a separate local variable in the navbar), the feedback system uses the global $feedback.show store in both the navbar's DropList and this new modal. On desktop (>1023 px) and tablet (768–1023 px) both the navbar dropdown and the modal will open simultaneously when feedback is triggered — a real rendering conflict that needs a $isSmallViewport guard.

Confidence Score: 4/5

Safe to merge after adding a viewport guard to the MobileFeedbackModal block in +layout.svelte; all other changes are correct.

Three of the four changed files are clean improvements with no issues. The P1 in +layout.svelte causes the feedback form to double-render on desktop and tablet viewports, which is a tangible broken UX that should be fixed before merging.

src/routes/(console)/+layout.svelte — the MobileFeedbackModal block needs a $isSmallViewport guard to avoid rendering alongside the navbar's own feedback dropdown on tablet and desktop.

Important Files Changed

Filename Overview
src/routes/(console)/+layout.svelte Adds MobileFeedbackModal to the layout without a viewport guard — on desktop and tablet the navbar's own Feedback dropdown is already visible, causing both to render simultaneously when $feedback.show is true.
src/lib/layout/shell.svelte Introduces activeProject reactive var to prevent stale project lingering on non-project routes, adds is-sidebar-open class for scoped CSS, and disables pointer-events on main content while mobile sidebar is open — all changes are correct.
src/lib/components/drop.svelte Adds pointer-events: none to the tooltip div when show is false, preventing invisible dropdowns from intercepting taps on mobile — safe and well-targeted fix.
src/lib/components/support.svelte Replaces generic utility classes with semantic support-premium-row and support-hours CSS classes, adds flex-wrap and a @media (max-width: 520px) responsive layout for the premium support row — clean, self-contained improvement.

Reviews (1): Last reviewed commit: "fix: mobile feedback issues" | Re-trigger Greptile

Comment thread src/routes/(console)/+layout.svelte Outdated
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/routes/`(console)/+layout.svelte:
- Line 37: The import of MobileFeedbackModal uses a relative path; update the
import statement for MobileFeedbackModal in +layout.svelte to use the $routes
alias (e.g., import MobileFeedbackModal from '$routes/...' replacing
'./wizard/feedback/mobileFeedbackModal.svelte') so it follows the project's
path-alias convention and matches other modal imports.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: acb6226f-8387-4cc3-8a61-1b3ee355e0f6

📥 Commits

Reviewing files that changed from the base of the PR and between d5c68dd and 32df519.

📒 Files selected for processing (4)
  • src/lib/components/drop.svelte
  • src/lib/components/support.svelte
  • src/lib/layout/shell.svelte
  • src/routes/(console)/+layout.svelte

import { feedback } from '$lib/stores/feedback';
import { hasStripePublicKey, isCloud, VARS } from '$lib/system';
import { stripe } from '$lib/stores/stripe';
import MobileFeedbackModal from './wizard/feedback/mobileFeedbackModal.svelte';
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.

⚠️ Potential issue | 🟡 Minor

Use $routes alias for the new modal import.

This new import uses a relative path; please switch it to a path alias to match project import standards.

♻️ Proposed change
-import MobileFeedbackModal from './wizard/feedback/mobileFeedbackModal.svelte';
+import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';

As per coding guidelines: **/*.{js,ts,svelte}: Use $lib, $routes, and $themes path aliases for imports.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import MobileFeedbackModal from './wizard/feedback/mobileFeedbackModal.svelte';
import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/routes/`(console)/+layout.svelte at line 37, The import of
MobileFeedbackModal uses a relative path; update the import statement for
MobileFeedbackModal in +layout.svelte to use the $routes alias (e.g., import
MobileFeedbackModal from '$routes/...' replacing
'./wizard/feedback/mobileFeedbackModal.svelte') so it follows the project's
path-alias convention and matches other modal imports.

HarshMN2345 and others added 2 commits March 27, 2026 14:29
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
@HarshMN2345 HarshMN2345 merged commit 7df9254 into main Mar 27, 2026
3 of 4 checks passed
@HarshMN2345 HarshMN2345 deleted the fix-mobile-feedback-and-support branch March 27, 2026 09:14
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.

2 participants