From a7e41fc72ba5c34a081797ae0077dd4be8842f5b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 12 Jul 2024 14:52:23 +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 | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss
index 8b2bdc981911..e57c5bb7f04b 100644
--- a/src/material/tabs/_tabs-common.scss
+++ b/src/material/tabs/_tabs-common.scss
@@ -393,6 +393,18 @@ $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.
+  .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.