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

18
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. * Besides documented props, it accepts all HMTL attributes a `<div>` element does.
*/ */
export const TabPanel = ({ children, active, tabId, ...props }) => { export const TabPanel = ({ children, active, tabId, ...props }) => (
if (!active) { <div
return null; role="tabpanel"
} id={`tabpanel-${tabId}`}
aria-labelledby={`tab-${tabId}`}
return ( {...props}
<div role="tabpanel" id={`tabpanel-${tabId}`} aria-labelledby={`tab-${tabId}`} {...props}> style={{ display: active ? "block" : "none" }}
>
{children} {children}
</div> </div>
); );
};
TabPanel.propTypes = { 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"; import { usePrefixedTabIds, useTabsChildren } from "./hooks";
const Container = styled.div.attrs({ const Container = styled.div.attrs({
className: "tabs-container", className: "tabs-container flex flex-col h-full",
})``; })``;
const Header = styled.div.attrs({ 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 }) => ({ const TabList = styled.div.attrs(({ variant }) => ({
@ -26,7 +26,7 @@ const Divider = styled.div.attrs({
right: calc(-100vw - 2px); 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. * Besides documented props, it accepts all HMTL attributes a `<div>` element does.