feat(ui): mobile layout for issue detail page (PinPoint-74w) by timothyfroehlich · Pull Request #1059 · timothyfroehlich/PinPoint

timothyfroehlich · 2026-02-23T02:21:35Z

Summary

Redesigns the issue detail page for mobile with a compact, above-the-fold-first layout
Adds MobileDetailsPanel — a collapsible component that replaces the full-width sidebar on small screens, exposing the same edit controls (status, severity, priority, frequency, assignee) behind an Edit Details toggle
Preserves the existing desktop two-column sidebar layout at md: breakpoint and above
Moves the owner requirements callout above the fold on mobile

Changes

New file: src/components/issues/MobileDetailsPanel.tsx - Client component with useState for open/close toggle, animated with max-height + opacity transition, shows assignee display, watcher count, and Edit Details button, expands to show the full SidebarActions grid plus reporter and created date

Modified: src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx - Mobile-first layout with back nav row + issue ID chip, machine context link, badge strip, owner callout, collapsible panel. Desktop layout unchanged at md: breakpoint. data-testid attributes: mobile-nav-row, mobile-badge-strip, mobile-details-panel, mobile-timeline, mobile-comment-form

Modified: src/components/issues/IssueTimeline.tsx - Owner requirements callout in the timeline is now hidden md:block to prevent duplication on mobile. Added data-testid=mobile-comment-form to the comment form wrapper.

Test plan

On mobile viewport: back nav shows back Issues + issue ID chip, machine name link appears, badge strip is horizontal, Edit Details expands the form grid
Owner requirements callout shows only once on mobile (above fold, not in timeline)
On desktop (md:+): sidebar is visible, mobile-only elements are hidden
pnpm run check passes (all 705 tests, typecheck, lint)
CI passing

Closes PinPoint-74w

Generated with Claude Code

Update: Global Padding Refactor

Removed global from to allow edge-to-edge mobile headers (e.g. on machine and issue detail pages).
Re-added // to all affected pages (Dashboard, Admin Users, Issues, About, Settings, Privacy, Terms, etc.) to maintain consistent vertical spacing.
Fixed alignment of "No comments yet" empty state in issue timeline.
Verified mobile viewport integrity (no horizontal overflow) on issue detail page.

Update: Global Padding Refactor

Removed global padding from MainLayout to allow edge-to-edge mobile headers (e.g. on machine and issue detail pages).
Re-added vertical padding to all affected pages (Dashboard, Admin Users, Issues, About, Settings, Privacy, Terms, etc.) to maintain consistent vertical spacing.
Fixed alignment of 'No comments yet' empty state in issue timeline.
Verified mobile viewport integrity (no horizontal overflow) on issue detail page.

Redesigns the issue detail page for mobile screens with: - Back navigation row with issue ID chip (mobile-only) - Machine context link prominently above the title - Inline badge strip showing status, severity, priority, frequency - Owner requirements callout above the fold on mobile - Collapsible details panel (MobileDetailsPanel) replacing the full sidebar on small screens - Desktop sidebar layout preserved at md: breakpoint and above - data-testid attributes: mobile-nav-row, mobile-badge-strip, mobile-details-panel, mobile-timeline, mobile-comment-form Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel · 2026-02-23T02:21:39Z

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

Project	Deployment	Actions	Updated (UTC)
pin-point	Ready	Preview, Comment	Feb 28, 2026 8:17pm

supabase · 2026-02-23T02:21:49Z

Updates to Preview Branch (design/mobile-issue-detail) ↗︎

Deployments	Status	Updated
Database	✅	Sat, 28 Feb 2026 20:16:18 UTC
Services	✅	Sat, 28 Feb 2026 20:16:18 UTC
APIs	✅	Sat, 28 Feb 2026 20:16:18 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Sat, 28 Feb 2026 20:16:19 UTC
Migrations	✅	Sat, 28 Feb 2026 20:16:20 UTC
Seeding	✅	Sat, 28 Feb 2026 20:16:20 UTC
Edge Functions	✅	Sat, 28 Feb 2026 20:16:20 UTC

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

Copilot

Pull request overview

This PR redesigns the issue detail page for mobile viewports with a compact, mobile-first layout. The desktop experience is preserved using responsive breakpoints.

Changes:

Introduces MobileDetailsPanel component: a collapsible panel that replaces the desktop sidebar on mobile, showing assignee/watch count collapsed and expanding to reveal edit forms
Restructures page layout: mobile shows back nav + issue ID chip, separate machine link, inline badges, and collapsible details; desktop maintains two-column sidebar layout
Repositions owner requirements callout: appears above the fold on mobile, inline in timeline on desktop (avoids duplication)

Reviewed changes

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

File	Description
src/components/issues/MobileDetailsPanel.tsx	New client component with collapsible toggle for mobile issue details (assignee, watch count, edit forms, reporter, created date)
src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx	Refactored to mobile-first layout with responsive breakpoints; adds mobile nav row, standalone machine link, and integrates MobileDetailsPanel
src/components/issues/IssueTimeline.tsx	Hides owner requirements callout on mobile (shown above fold instead); adds data-testid to comment form wrapper

src/components/issues/MobileDetailsPanel.tsx

src/components/issues/IssueTimeline.tsx

src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx

- Hide IssueSidebar on mobile with hidden md:block wrapper to prevent duplicate content alongside MobileDetailsPanel - Ensure machine name link is visible on all viewports (rename testid from mobile-machine-link to machine-link, update comment) - Switch PageShell to padded={false} with consolidated padding on inner div - Rename data-testid mobile-comment-form to issue-comment-form (not mobile-only) - Fix assignee initials in MobileDetailsPanel from 2-char to 1-char to match desktop pattern - Add WatchButton to MobileDetailsPanel collapsed row for authenticated users Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add top border to assignee-watch row (border-b → border-y) - Wrap expanded details content in card container (bg-card, rounded-xl, border) - Replace max-h-[600px] with max-h-[80vh] + overflow-auto for safer scaling - Reduce comment form padding on mobile (p-6 → p-4 sm:p-6) - Switch reporter/created meta from grid to flex row layout per mockup Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

src/components/issues/IssueTimeline.tsx

src/components/issues/MobileDetailsPanel.tsx

src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx

…d 2) - Add sr-only "watching" label for screen reader accessibility on watch count - Rename data-testid mobile-badge-strip → issue-badge-strip (viewport-agnostic) - Rename data-testid mobile-timeline → issue-timeline (viewport-agnostic) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Pages manage their own padding via PageShell or custom wrappers. The global p-6 caused double-padding, burning ~80px on mobile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

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

src/components/layout/MainLayout.tsx

…etail # Conflicts: # src/components/layout/MainLayout.tsx

- Restores vertical padding to all pages (Dashboard, Admin, Issues, etc.) after MainLayout change. - Fixes alignment of 'No comments yet' empty state in issue timeline. - Verified mobile viewport integrity with no horizontal overflow.

- Adds py-8 to Privacy and Terms pages to match MainLayout refactor. - Fixes alignment of 'No comments yet' box in issue timeline (ml-16 -> ml-20).

…etail

…collapsible panels

- Remove waitForLoadState("networkidle") from loginAs() and test files; replaced with toHaveURL() assertions and submitFormAndWaitForRedirect() - Use scrollIntoView({ block: "center" }) in selectOption() to avoid sticky header interception; drop force:true in favour of a normal click - Center submit buttons before clicking in change-password tests - Add .gemini/ to .gitignore (Gemini agent ephemeral control files) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…etail # Conflicts: # package.json # pnpm-lock.yaml

…machine status-overhaul created "unplayable" issues on TAF (The Addams Family), which escalated its computed status. When machines-crud ran in parallel and asserted TAF's status as "Needs Service", it found "Unplayable" instead. - Add Twilight Zone (TZ) to seed data as a dedicated machine for status-overhaul tests, isolating mutations from shared assertions - Point status-overhaul.spec.ts at TZ instead of TAF - Bump machines-crud minimum card count from 10 to 11 Closes PinPoint-da45 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings February 23, 2026 02:21

Copilot started reviewing on behalf of timothyfroehlich February 23, 2026 02:21 View session

vercel bot deployed to Preview February 23, 2026 02:22 View deployment

Copilot AI reviewed Feb 23, 2026

View reviewed changes

vercel bot deployed to Preview February 23, 2026 02:36 View deployment

Copilot AI review requested due to automatic review settings February 23, 2026 03:08

Copilot started reviewing on behalf of timothyfroehlich February 23, 2026 03:09 View session

vercel bot deployed to Preview February 23, 2026 03:10 View deployment

Copilot AI reviewed Feb 23, 2026

View reviewed changes

vercel bot deployed to Preview February 23, 2026 03:19 View deployment

fix(ui): remove global padding from MainLayout content wrapper

7bef0e9

Pages manage their own padding via PageShell or custom wrappers. The global p-6 caused double-padding, burning ~80px on mobile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings February 23, 2026 03:36

Copilot started reviewing on behalf of timothyfroehlich February 23, 2026 03:37 View session

vercel bot deployed to Preview February 23, 2026 03:38 View deployment

Copilot AI reviewed Feb 23, 2026

View reviewed changes

src/components/layout/MainLayout.tsx Outdated Show resolved Hide resolved

src/components/layout/MainLayout.tsx Outdated Show resolved Hide resolved

timothyfroehlich added the claude-review Triggers Claude Code Review GitHub Action label Feb 26, 2026

Merge remote-tracking branch 'origin/main' into design/mobile-issue-d…

7ddbdb5

…etail # Conflicts: # src/components/layout/MainLayout.tsx

timothyfroehlich removed the claude-review Triggers Claude Code Review GitHub Action label Feb 26, 2026

vercel bot deployed to Preview February 26, 2026 14:57 View deployment

fix(ui): add missing vertical padding and fix timeline alignment

1bcf2e4

- Adds py-8 to Privacy and Terms pages to match MainLayout refactor. - Fixes alignment of 'No comments yet' box in issue timeline (ml-16 -> ml-20).

vercel bot deployed to Preview February 26, 2026 15:08 View deployment

timothyfroehlich added 2 commits February 28, 2026 07:45

Merge remote-tracking branch 'origin/main' into design/mobile-issue-d…

4771cf4

…etail

test(e2e): fix mobile chrome test flakiness due to sticky header and …

6f75f8f

…collapsible panels

vercel bot deployed to Preview February 28, 2026 14:04 View deployment

timothyfroehlich and others added 3 commits February 28, 2026 10:31

chore(deps): bump security overrides (minimatch, serialize-javascript)

c8ddb88

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/main' into design/mobile-issue-d…

0b43bbd

…etail # Conflicts: # package.json # pnpm-lock.yaml

vercel bot deployed to Preview February 28, 2026 16:52 View deployment

vercel bot deployed to Preview February 28, 2026 20:17 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): mobile layout for issue detail page (PinPoint-74w)#1059

feat(ui): mobile layout for issue detail page (PinPoint-74w)#1059
timothyfroehlich wants to merge 14 commits intomainfrom
design/mobile-issue-detail

timothyfroehlich commented Feb 23, 2026 •

edited

Loading

Uh oh!

vercel bot commented Feb 23, 2026 •

edited

Loading

Uh oh!

supabase bot commented Feb 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

timothyfroehlich commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Update: Global Padding Refactor

Update: Global Padding Refactor

Uh oh!

vercel bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

supabase bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

timothyfroehlich commented Feb 23, 2026 •

edited

Loading

vercel bot commented Feb 23, 2026 •

edited

Loading

supabase bot commented Feb 23, 2026 •

edited

Loading