Fix: public share card hidden on mobile#38
Conversation
Agent-Logs-Url: https://github.com/felixgollnhuber/tempoll/sessions/a998cc2a-bdac-4f9f-ba18-86a7e6502d26 Co-authored-by: felixgollnhuber <67237212+felixgollnhuber@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Fixes the public share card being unavailable on sub-xl viewports by rendering the existing sidebarTopContent in the main column for mobile/tablet layouts, while keeping the sidebar version for xl+.
Changes:
- Render
sidebarTopContentabove the heatmap with anxl:hiddenwrapper so it shows on smaller viewports. - Update existing
PublicEventClienttests to account for duplicated UI (mobile slot + desktop sidebar). - Add a test asserting the share URL and copy button exist in the DOM for a mobile-sized viewport.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/components/event-heatmap.tsx |
Adds a mobile placement for sidebarTopContent to make share card content visible below xl. |
src/components/public-event-client.test.tsx |
Adjusts queries to handle duplicated content and adds a new test for mobile presence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| it("renders the share card in the DOM on mobile viewports", () => { | ||
| setViewportWidth(390); | ||
|
|
||
| renderWithI18n( | ||
| <PublicEventClient | ||
| slug="test-event" | ||
| shareUrl="https://tempoll.app/e/test-event" | ||
| initialSnapshot={createSnapshot()} | ||
| initialSession={null} | ||
| />, | ||
| ); | ||
|
|
||
| // The share card appears in both the mobile slot and the xl+ sidebar slot, | ||
| // so the URL and copy button are present in the DOM at any viewport width. | ||
| expect(screen.getAllByText("https://tempoll.app/e/test-event")).toHaveLength(2); | ||
| expect(screen.getAllByRole("button", { name: "Copy public URL" })).toHaveLength(2); | ||
| }); |
There was a problem hiding this comment.
This new test doesn’t actually verify the mobile visibility/accessibility regression described in the PR: setViewportWidth(390) won’t affect Tailwind’s hidden/xl:* behavior in JSDOM (no CSS), so the assertions (counting DOM nodes) would also pass when the share card is only rendered in the hidden xl:block sidebar. Consider asserting the structural placement that enables mobile display (e.g., that one instance is inside the new xl:hidden wrapper / add a stable data-slot for the mobile slot) rather than only asserting DOM presence/counts.
The share card (public URL + copy button) was only rendered inside
<aside className="hidden xl:block">, making it inaccessible on viewports narrower than 1280px.Changes
event-heatmap.tsx— rendersidebarTopContentin the main content column with anxl:hiddenwrapper, so it appears above the heatmap on mobile/tablet and stays hidden atxl+(where the sidebar already shows it):public-event-client.test.tsx— two existing tests queried unique text that now appears twice in the DOM (mobile slot + desktop sidebar). Updated togetAllBy*with.toHaveLength(2)to reflect the new structure. Added a test asserting both the share URL and copy button are present in the DOM at a mobile viewport width.Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
checkpoint.prisma.io/opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node /home/REDACTED/work/tempoll/tempoll/node_modules/.pnpm/prisma@7.5.0_@types+react@19.2.14_react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/prisma/build/child {"product":"prisma","version":"7.5.0","cli_install_type":"local","information":"","local_timestamp":"2026-03-29T08:58:18Z","project_hash":"505a7a4c","cli_path":"/home/REDACTED/work/tempoll/tempoll/node_modules/prisma/build/index.js","cli_path_hash":"7ec90f6(dns block)fonts.googleapis.com/home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/tempoll/tempoll/node_modules/.bin/../next/dist/bin/next build(dns block)If you need me to access, download, or install something from one of these locations, you can either:
⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.