Skip to content

Conversation

@Dhavanesh24cs412
Copy link

Description

Fixes the responsive height issue for TanStack devtools panel in fullscreen view.

Problem

The devtools panel was hardcoded to 400px height, making it fixed and non-responsive to different screen sizes or fullscreen view.

Solution

  • Changed hardcoded height to a calculated value based on viewport height
  • Panel now scales responsively: 50% of viewport height
  • Respects minimum (300px) and maximum (400px) constraints
  • Works across different screen sizes and fullscreen scenarios

Type of Change

  • Bug fix (non-breaking)
  • New feature
  • Breaking change

Testing

  • Tested in development environment
  • Panel resizes properly on different screen sizes
  • Fullscreen mode works as expected
  • Mobile view respects minimum height

Related Issue

Closes #320

- Replace hardcoded 400px height with viewport-relative calculation
- Height now scales as 50% of viewport height
- Respects minimum (300px) and maximum (400px) constraints
- Fixes issue where devtools panel was fixed to small height in fullscreen
- Panel now properly adapts to different screen sizes

Fixes TanStack#320
@changeset-bot
Copy link

changeset-bot bot commented Jan 15, 2026

⚠️ No Changeset found

Latest commit: 4f50997

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Dhavanesh24cs412
Copy link
Author

Dhavanesh24cs412 commented Jan 16, 2026

This responsive height solution addresses the issue well. By replacing the hardcoded 400px with a calculated value based on viewport height, the devtools panel now adapts beautifully to fullscreen views. The 50% viewport-based approach is clean and maintains usability across all screen sizes.

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.

The Parent Container is Fixed to 500px (bad for full screnn)

1 participant