From 901d2b4ba8e3bb1a069ba2329b61311f929e58da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 1 Mar 2022 16:49:06 +0100
Subject: [PATCH] fix(dashboard-v2): improve Tabs to fill available height

---
 .../src/components/Tabs/TabPanel.js           | 22 +++++++++----------
 .../dashboard-v2/src/components/Tabs/Tabs.js  |  6 ++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Tabs/TabPanel.js b/packages/dashboard-v2/src/components/Tabs/TabPanel.js
index a22becc6..46307431 100644
--- a/packages/dashboard-v2/src/components/Tabs/TabPanel.js
+++ b/packages/dashboard-v2/src/components/Tabs/TabPanel.js
@@ -3,17 +3,17 @@ import PropTypes from "prop-types";
 /**
  * Besides documented props, it accepts all HMTL attributes a `<div>` element does.
  */
-export const TabPanel = ({ children, active, tabId, ...props }) => {
-  if (!active) {
-    return null;
-  }
-
-  return (
-    <div role="tabpanel" id={`tabpanel-${tabId}`} aria-labelledby={`tab-${tabId}`} {...props}>
-      {children}
-    </div>
-  );
-};
+export const TabPanel = ({ children, active, tabId, ...props }) => (
+  <div
+    role="tabpanel"
+    id={`tabpanel-${tabId}`}
+    aria-labelledby={`tab-${tabId}`}
+    {...props}
+    style={{ display: active ? "block" : "none" }}
+  >
+    {children}
+  </div>
+);
 
 TabPanel.propTypes = {
   /**
diff --git a/packages/dashboard-v2/src/components/Tabs/Tabs.js b/packages/dashboard-v2/src/components/Tabs/Tabs.js
index 14356466..4bf20ccf 100644
--- a/packages/dashboard-v2/src/components/Tabs/Tabs.js
+++ b/packages/dashboard-v2/src/components/Tabs/Tabs.js
@@ -6,11 +6,11 @@ import { ActiveTabIndicator } from "./ActiveTabIndicator";
 import { usePrefixedTabIds, useTabsChildren } from "./hooks";
 
 const Container = styled.div.attrs({
-  className: "tabs-container",
+  className: "tabs-container flex flex-col h-full",
 })``;
 
 const Header = styled.div.attrs({
-  className: "relative flex justify-start overflow-hidden",
+  className: "relative flex justify-start overflow-hidden grow-0 shrink-0",
 })``;
 
 const TabList = styled.div.attrs(({ variant }) => ({
@@ -26,7 +26,7 @@ const Divider = styled.div.attrs({
   right: calc(-100vw - 2px);
 `;
 
-const Body = styled.div``;
+const Body = styled.div.attrs({ className: "grow min-h-0" })``;
 
 /**
  * Besides documented props, it accepts all HMTL attributes a `<div>` element does.