Skip to content

Conversation

@DevJoaoLopes
Copy link

Summary

resolves #1147

Fix render of Tab documentation overflow in Custom Panels

List of notable changes:

  • updated docs for Tabs components

What should reviewers focus on?

  • Implementantion of new section in documentation next for Tab component.

Steps to test:

  1. run npm run start:docs
  2. go to http://localhost:3000/components/Tabs/#custom-panels

Supporting resources (related issues, external links, etc):

Contributor checklist:

  • All new and existing CI checks pass
  • Tests prove that the feature works and covers both happy and unhappy paths
  • Any drop in coverage, breaking changes or regressions have been documented above
  • UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
  • All developer debugging and non-functional logging has been removed
  • Related issues have been referenced in the PR description

Reviewer checklist:

  • Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
  • Check that tests prove the feature works and covers both happy and unhappy paths
  • Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before After
image
Gravacao.de.Tela.2025-12-22.as.05.47.17.mov

Copilot AI review requested due to automatic review settings December 22, 2025 08:58
@DevJoaoLopes DevJoaoLopes requested a review from a team as a code owner December 22, 2025 08:58
@changeset-bot
Copy link

changeset-bot bot commented Dec 22, 2025

⚠️ No Changeset found

Latest commit: 4c9f08e

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

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes overflow issues in the Tabs component documentation by updating the "Custom Panels" example with responsive layout styling. The changes add width constraints and responsive alignment to prevent content from overflowing on narrow viewports.

  • Updated the Custom Panels example in Tabs documentation with responsive layout fixes
  • Modified Stack component to use responsive alignItems prop
  • Wrapped Tabs and panel content in Box components with full-width styling

Reviewed changes

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

File Description
apps/next-docs/content/components/Tabs/index.mdx Updated Custom Panels example to fix overflow with responsive alignment and width constraints
package-lock.json Automatic peer dependency reorganization from npm
apps/next-docs/package-lock.json Automatic peer dependency reorganization from npm
Files not reviewed (1)
  • apps/next-docs/package-lock.json: Language not supported

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.

Custom Panels example in Tabs component documentation overflows on narrow viewports

1 participant