LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): improve Tabs to fill available height

This commit is contained in:
Michał Leszczyk 2022-03-01 16:49:06 +01:00
parent 97240d128b
commit 901d2b4ba8
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/dashboard-v2/src/components/Tabs/TabPanel.js
View File

@ -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 = {
/**

6
packages/dashboard-v2/src/components/Tabs/Tabs.js
View File

@ -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.