Skip to content

fix: prevent CSS variable bleeding in nested tabs #4348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tahmidbintaslim wants to merge 1 commit into from
+7 −6
Closed

fix: prevent CSS variable bleeding in nested tabs #4348

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions packages/daisyui/src/components/tab.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
.tabs {
@layer daisyui.l1.l2.l3 {
@apply flex flex-wrap;
/* Reset inheritable properties to prevent bleeding from parent .tabs */
--tabs-height: auto;
--tabs-direction: row;
--tab-height: calc(var(--size-field, 0.25rem) * 10);
--tab-p: 0.75rem;
--tab-radius-min: calc(0.75rem - var(--border));
Comment on lines +8 to +9
Copy link

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

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

These CSS variable declarations duplicate the same values already defined in the .tab class (lines 18 and 26). While resetting these variables in .tabs is necessary to prevent inheritance from parent .tabs elements, consider whether these specific variables need to be reset here given that:

  1. The size modifiers (.tabs-xs, .tabs-lg, etc.) set --tab-p and --tab-radius-min on the .tab element using the child selector & > .tab, not on .tabs itself
  2. Only --tab-height is actually set directly on .tabs by the size modifiers

If the goal is to prevent nested .tab elements from inheriting from parent .tab elements, these resets in .tabs may not achieve that since CSS variables inherit through the DOM tree regardless of selector specificity. The .tab class already defines these variables, so nested .tab elements would use those values, not values from a parent .tabs.

Suggested change
--tab-p: 0.75rem;
--tab-radius-min: calc(0.75rem - var(--border));

Copilot uses AI. Check for mistakes.
height: var(--tabs-height);
flex-direction: var(--tabs-direction);
}
Expand All @@ -23,10 +26,8 @@
--tab-radius-min: calc(0.75rem - var(--border));
--tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
--tab-radius-grad:
#0000 calc(69% - var(--border)),
var(--tab-border-color) calc(69% - var(--border) + 0.25px),
var(--tab-border-color) 69%,
var(--tab-bg) calc(69% + 0.25px);
#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + 0.25px),
var(--tab-border-color) 69%, var(--tab-bg) calc(69% + 0.25px);
Comment on lines +29 to +30
Copy link

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

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

This formatting change appears to be unrelated to the nested tabs fix. The multi-line gradient definition has been reformatted to use fewer lines. While this doesn't break functionality, it's generally better to keep formatting changes separate from bug fixes in different commits or PRs for easier code review and git history tracking.

Suggested change
#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + 0.25px),
var(--tab-border-color) 69%, var(--tab-bg) calc(69% + 0.25px);
#0000 calc(69% - var(--border)),
var(--tab-border-color) calc(69% - var(--border) + 0.25px),
var(--tab-border-color) 69%,
var(--tab-bg) calc(69% + 0.25px);

Copilot uses AI. Check for mistakes.
border-color: #0000;
order: var(--tab-order);
height: var(--tab-height);
Expand Down Expand Up @@ -491,8 +492,8 @@
/* Compensate for p-1 */
height: calc(100% - var(--tab-height) + var(--border) - 0.5rem);
border-radius: calc(
min(var(--tab-height) / 2, var(--radius-field)) +
min(0.25rem, var(--tabs-box-radius)) - var(--border)
min(var(--tab-height) / 2, var(--radius-field)) + min(0.25rem, var(--tabs-box-radius)) -
var(--border)
Comment on lines +495 to +496
Copy link

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

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

Similar to lines 29-30, this formatting change appears to be unrelated to the nested tabs fix. Consider keeping formatting changes separate from bug fixes for better code review and git history tracking.

Copilot uses AI. Check for mistakes.
);
}
}
Expand Down