Skip to content

Conversation

@knowsuchagency
Copy link
Contributor

@knowsuchagency knowsuchagency commented Dec 14, 2025

Summary

  • Enable Preview/Diffs toggle buttons on screens smaller than 1280px
  • Update mobile layout to switch between Attempt and aux content (Preview/Diffs) based on selected mode
  • Keyboard shortcuts (Cmd/Ctrl+Enter) now cycle through views on mobile as well
image

Problem

On smaller screens, users couldn't access the Diffs or Preview panels because:

  1. The toggle buttons were hidden via an isXL media query check
  2. The mobile layout always rendered the aux panel with 0fr width

Solution

  1. AttemptHeaderActions.tsx: Removed the isXL condition that was hiding the toggle buttons on mobile
  2. TasksLayout.tsx: Simplified mobile layout to:
    • Show kanban when no panel is open
    • Show attempt panel when task is selected and mode === null
    • Show aux content (preview/diffs) when mode !== null

Closes #1523

On screens < 1280px, users can now access Preview and Diffs views
via toggle buttons in the header, creating a tab-like experience.

Changes:
- Remove isXL check from AttemptHeaderActions toggle buttons
- Simplify mobile layout to switch between attempt/aux content based on mode
- Keyboard shortcuts (Cmd/Ctrl+Enter) now cycle through views on mobile

Closes BloopAI#1523
@vibe-kanban-cloud
Copy link

Vibe Kanban Review Complete

Your code review is ready!

View Review

@stunningpixels stunningpixels merged commit 20352f2 into BloopAI:main Dec 17, 2025
1 check passed
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.

feat: Enable diff and preview panels on smaller screens

2 participants