ECHO-503 Scroll to QR code section mobile

[ussaama]

Summary by CodeRabbit

• New Features

  • On mobile, tapping “Project overview” now smoothly scrolls the QR code into view instead of navigating away.
  • Improved responsiveness for project pages, making the QR code quicker to access on small screens.

• Refactor

  • Updated project and conversation components to support a shared reference to the QR code container, enabling coordinated scrolling behavior without changing existing desktop behavior.

[linear]

ECHO-503 Redirect to project settings after pressing "Project Overview" with empty tag text

[coderabbitai]

Walkthrough

Adds an optional qrCodeRef prop through ProjectSidebar → ProjectAccordion → ConversationAccordion. On mobile, ConversationAccordion intercepts “project overview” anchor clicks to smoothly scroll the QR code container into view instead of navigating. Imports updated to include RefObject and useMediaQuery.

Changes

Cohort / File(s)	Summary
Mobile scroll handling in ConversationAccordion echo/frontend/src/components/conversation/ConversationAccordion.tsx	Adds optional prop qrCodeRef; imports RefObject and useMediaQuery; detects mobile viewport; on “project overview” anchor clicks, prevents default on mobile and smooth-scrolls qrCodeRef into view; updates component signature accordingly.
Prop threading via ProjectAccordion echo/frontend/src/components/project/ProjectAccordion.tsx	Updates ProjectAccordion signature to accept optional qrCodeRef and passes it to ConversationAccordion.
Ref creation and attachment in ProjectSidebar echo/frontend/src/components/project/ProjectSidebar.tsx	Creates qrCodeRef via useRef; assigns it to the Box wrapping ProjectQRCode (hiddenFrom="lg"); passes qrCodeRef to ProjectAccordion.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• ECHO-381 Conversation loading skeleton addition #258 — Also modifies ConversationAccordion, wrapping with Suspense/skeleton; related due to overlapping component and potential merge interactions with the new qrCodeRef prop.

Suggested labels

improvement

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title “ECHO-503 Scroll to QR code section mobile” correctly references the ticket and concisely conveys the primary change of enabling scroll-to-QR-code behavior on mobile without extraneous detail.
Linked Issues Check	✅ Passed	The implementation wires up a qrCodeRef, employs mobile media detection, and smoothly scrolls the QR code container into view when “Project Overview” is clicked on mobile, thereby fulfilling the ECHO-503 objective to navigate users to the project settings section.
Out of Scope Changes Check	✅ Passed	All code changes, including prop and hook additions, are targeted exclusively at the scroll-to-QR-code feature on mobile and introduce no unrelated functionality or refactors.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch scroll-to-qr-code

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 387119c and 7d5ffb8.

📒 Files selected for processing (3)

• echo/frontend/src/components/conversation/ConversationAccordion.tsx (4 hunks)
• echo/frontend/src/components/project/ProjectAccordion.tsx (1 hunks)
• echo/frontend/src/components/project/ProjectSidebar.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

echo/frontend/src/components/project/ProjectSidebar.tsx (2)

echo/frontend/src/components/project/ProjectQRCode.tsx (1)

• ProjectQRCode (61-134)

echo/frontend/src/components/project/ProjectAccordion.tsx (1)

• ProjectAccordion (6-20)

echo/frontend/src/components/project/ProjectAccordion.tsx (1)

echo/frontend/src/components/conversation/ConversationAccordion.tsx (1)

• ConversationAccordion (564-1209)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: ci-check-server

🔇 Additional comments (13)

echo/frontend/src/components/project/ProjectSidebar.tsx (4)

23-23: LGTM, ship it! Import looks solid.

---

27-27: Clean ref creation, 100x style. Type is dialed in.

---

124-124: Props forwarding looks tight. LGTM.

---

120-122: Verify QR code visibility vs scroll breakpoints
The <Box hiddenFrom="lg"> hides at the “lg” breakpoint (≥ Mantine’s lg, e.g. 1024px), but isMobile = useMediaQuery("(max-width: 768px)"), so from 769px–lg the QR code is visible yet the scroll-into-view won’t fire. Confirm that gap is intentional.

echo/frontend/src/components/project/ProjectAccordion.tsx (3)

4-4: LGTM! Import is dialed in for the ref type.

---

6-12: Solid signature update, 100x tier. Optional ref prop is typed correctly.

---

17-17: Props forwarding is clean. Ship it.

echo/frontend/src/components/conversation/ConversationAccordion.tsx (6)

49-49: LGTM, RefObject import is solid.

---

53-53: useMediaQuery import looks tight. Based on learnings.

---

564-570: Function signature update is clean. Optional ref prop typed correctly for the scroll behavior.

---

1142-1151: LGTM on the scroll interception logic!

The onClick handler correctly prevents default navigation on mobile when the ref exists, then smoothly scrolls the QR code into view. The conditions are tight:

• Only intercepts on mobile (isMobile)
• Only when ref is populated (qrCodeRef?.current)
• Uses smooth scroll with center alignment for optimal UX

The PR objective is nailed—pressing "Project Overview" from the empty prompt now scrolls to the QR code section on mobile instead of navigating away.

---

582-582: Verify mobile breakpoint consistency
Ensure (max-width: 768px) in ConversationAccordion.tsx matches your design system’s mobile breakpoint (Mantine’s sm @768px) and aligns with the hiddenFrom="lg" breakpoint in ProjectSidebar.

---

1142-1151: Scroll fix only needed for in-page “project overview” anchor. Other “Project Overview” links (in ProjectSidebar and ProjectOverviewLayout) navigate to distinct pages and don’t require mobile scroll behavior. LGTM.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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