From f58549a574c265cea81f8476a16f4546e7ed43db Mon Sep 17 00:00:00 2001
From: Meghea Iulian <iulian.meghea@gmail.com>
Date: Tue, 9 Apr 2024 15:39:14 +0300
Subject: [PATCH] feat(cosmoz-tab-card): flex the collapse

---
 src/cosmoz-tab-card.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/cosmoz-tab-card.js b/src/cosmoz-tab-card.js
index 57a6163..96d62ee 100644
--- a/src/cosmoz-tab-card.js
+++ b/src/cosmoz-tab-card.js
@@ -45,7 +45,7 @@ const CosmozTabCard = (host) => {
 		host.toggleAttribute('collapsed', collapsed);
 	}, [collapsed]);
 
-	return html`<div id="header" part="header">
+	return html`<div class="header" part="header">
 			${when(
 				collapsable,
 				() => html`
@@ -64,8 +64,8 @@ const CosmozTabCard = (host) => {
 			<slot name="card-actions"></slot>
 		</div>
 
-		<cosmoz-collapse ?opened=${!collapsed}>
-			<div id="content" part="content">
+		<cosmoz-collapse class="collapse" ?opened=${!collapsed}>
+			<div class="content" part="content">
 				<slot></slot>
 			</div>
 		</cosmoz-collapse> `;
@@ -88,12 +88,17 @@ const style = css`
 		);
 	}
 
-	#content {
+	.collapse {
+		display: flex:;
+		flex: auto;
+	}
+
+	.content {
 		line-height: var(--cosmoz-tab-card-content-line-height, initial);
 		padding: var(--cosmoz-tab-card-content-padding, initial);
 	}
 
-	#header {
+	.header {
 		display: flex;
 		align-items: center;
 		gap: 8px;