Skip to content

Comments

style(ui): improve padding for VerticalTabItem#27251

Merged
dhairyashiil merged 2 commits intocalcom:mainfrom
barathraj048:ui-padding-fix
Jan 26, 2026
Merged

style(ui): improve padding for VerticalTabItem#27251
dhairyashiil merged 2 commits intocalcom:mainfrom
barathraj048:ui-padding-fix

Conversation

@barathraj048
Copy link
Contributor

What does this PR do?

This PR improves the vertical padding behavior of VerticalTabItem in the Settings sidebar to ensure better visual consistency across single-line and multi-line tab labels.

Key improvements:

  • Single-line tabs maintain compact spacing
  • Double-line tabs receive appropriate vertical padding
  • Tab items stretch correctly using w-full
  • UI consistency is maintained across different screen sizes

Code changes: The primary intentional change is:

className={`px-3 py-auto max-py-5 h-auto w-full ${

Note on diff size: Additional lines in the diff are due to automatic code formatting performed by Biome/Prettier (import ordering, spacing normalization, fragment removal, etc.). These formatting changes do not modify any logic or behavior.

Visual Demo (For contributors especially)

Before Screenshot 2026-01-26 213657
cal.com.hover.ui.issue.mp4

| After
Screenshot 2026-01-26 214344

solved.mp4

-- | --
(Screenshot showing cramped multi-line items) | (Screenshot showing improved padding)

Changes Visible:

  • Multi-line items now have improved vertical padding
  • Hover/active states remain consistent
  • Layout no longer feels cramped for two-line labels

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works. N/A - UI styling change only.

How should this be tested?

Steps to test:

  1. Navigate to Settings → Security → Two-factor authentication (or any Settings section where sidebar labels wrap into two lines)
  2. Verify the following behaviors:
    • Single-line labels retain compact padding
    • Multi-line labels expand with correct vertical spacing (py-auto behavior)
    • The clickable area stretches to full width (w-full)
    • No shifting, clipping, or overflow occurs
    • Hover and active states remain consistent

Test configuration:

  • Environment variables: None required
  • Test data: None required
  • Expected behavior: Improved vertical spacing for multi-line tab items without affecting single-line items

Checklist

<!-- Remove bullet points below that don't apply to you -->
  • I haven't read the contributing guide
  • My code doesn't follow the style guidelines of this project
  • I haven't commented my code, particularly in hard-to-understand areas
  • I haven't checked if my changes generate no new warnings
  • My PR is too large (>500 lines or >10 files) and should be split into smaller PRs
What does this PR do?

@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Jan 26, 2026
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

No issues found across 1 file

Copy link
Member

@dhairyashiil dhairyashiil left a comment

Choose a reason for hiding this comment

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

Thanks for your contribution. I reverted this change and applied a correct fix. The previous update added more vertical spacing than needed.

For future changes, it would be great to apply updates only where they are needed.

@dhairyashiil dhairyashiil enabled auto-merge (squash) January 26, 2026 21:08
@keithwillcode keithwillcode added the run-ci Approve CI to run for external contributors label Jan 26, 2026
@dhairyashiil dhairyashiil merged commit 4f2f024 into calcom:main Jan 26, 2026
99 of 107 checks passed
@dhairyashiil dhairyashiil added this to the v6.2 milestone Jan 26, 2026
@barathraj048
Copy link
Contributor Author

Thanks for the review and improvements!
I appreciate the clarification and will make sure to keep future changes more focused.
Glad to contribute!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

community Created by Linear-GitHub Sync ready-for-e2e run-ci Approve CI to run for external contributors size/XS

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants