From 208b4c1463a2f63007ff6537a4ba75e98e068888 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 12 Jul 2024 14:54:34 +0200 Subject: [PATCH] fix(material/tabs): prevent tab header from collapsing when empty inside a drop list Adds a `min-height` to the tab header when it is placed inside a drop list. This is useful when dragging between connected lists since the header may collapse when it has no tabs. --- src/material/tabs/_tabs-common.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index 8b2bdc981911..8d3e4063b437 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -393,6 +393,20 @@ $mat-tab-animation-duration: 500ms !default; [mat-align-tabs='end'] > #{$parent} & { justify-content: flex-end; } + + // Prevent the header from collapsing when it is a drop list. This is useful, + // because its height may become zero once all the tabs are dragged out. + // Note that ideally we would do this by default, rather than only in a drop + // list, but it ended up being hugely breaking internally. + .cdk-drop-list &, + &.cdk-drop-list { + @include token-utils.use-tokens( + tokens-mdc-secondary-navigation-tab.$prefix, + tokens-mdc-secondary-navigation-tab.get-token-slots() + ) { + @include token-utils.create-token-slot(min-height, container-height); + } + } } // Structural styles for the element that wraps the paginated container's content.