fix(striker-ui): adjust Tab* style

striker-ui/components/Tab.tsx

@@ -27,6 +27,7 @@ const Tab: FC<MUITabProps> = ({ label: originalLabel, ...restTabProps }) => {
       sx={{
         borderRadius: BORDER_RADIUS,
         color: GREY,
+        padding: '.4em .8em',
         textTransform: 'none',
 
         [`&.${muiTabClasses.selected}`]: {

striker-ui/components/TabContent.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { ReactElement, useMemo } from 'react';
 
 const TabContent = <T,>({
@@ -9,8 +10,12 @@ const TabContent = <T,>({
     () => changingTabId === tabId,
     [changingTabId, tabId],
   );
+  const displayValue = useMemo(
+    () => (isTabIdMatch ? 'initial' : 'none'),
+    [isTabIdMatch],
+  );
 
-  return <>{isTabIdMatch && children}</>;
+  return <Box sx={{ display: displayValue }}>{children}</Box>;
 };
 
 export default TabContent;

striker-ui/components/Tabs.tsx

@@ -1,26 +1,98 @@
 import {
+  Breakpoint,
+  tabClasses as muiTabClasses,
   Tabs as MUITabs,
   tabsClasses as muiTabsClasses,
-  TabsProps as MUITabsProps,
+  useMediaQuery,
+  useTheme,
 } from '@mui/material';
-import { FC } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 
 import { BLUE, BORDER_RADIUS } from '../lib/consts/DEFAULT_THEME';
 
-const Tabs: FC<MUITabsProps> = ({
+const TABS_MIN_HEIGHT = '1em';
+const TABS_VERTICAL_MIN_HEIGHT = '1.8em';
+
+const Tabs: FC<TabsProps> = ({
+  orientation: rawOrientation,
   variant = 'fullWidth',
   ...restTabsProps
-}) => (
+}) => {
-  <MUITabs
+  const theme = useTheme();
-    {...restTabsProps}
+
-    variant={variant}
+  const bp = useCallback(
-    sx={{
+    (breakpoint: Breakpoint) => theme.breakpoints.up(breakpoint),
-      [`& .${muiTabsClasses.indicator}`]: {
+    [theme],
-        backgroundColor: BLUE,
+  );
-        borderRadius: BORDER_RADIUS,
+
-      },
+  const bpxs = useMediaQuery(bp('xs'));
-    }}
+  const bpsm = useMediaQuery(bp('sm'));
-  />
+  const bpmd = useMediaQuery(bp('md'));
-);
+  const bplg = useMediaQuery(bp('lg'));
+  const bpxl = useMediaQuery(bp('xl'));
+
+  const mapToBreakpointUp: [Breakpoint, boolean][] = useMemo(
+    () => [
+      ['xs', bpxs],
+      ['sm', bpsm],
+      ['md', bpmd],
+      ['lg', bplg],
+      ['xl', bpxl],
+    ],
+    [bplg, bpmd, bpsm, bpxl, bpxs],
+  );
+
+  const orientation = useMemo(() => {
+    let result: TabsOrientation | undefined;
+
+    if (typeof rawOrientation === 'object') {
+      mapToBreakpointUp.some(([breakpoint, isUp]) => {
+        if (isUp && rawOrientation[breakpoint]) {
+          result = rawOrientation[breakpoint];
+        }
+
+        return !isUp;
+      });
+    } else {
+      result = rawOrientation;
+    }
+
+    return result;
+  }, [mapToBreakpointUp, rawOrientation]);
+
+  return (
+    <MUITabs
+      {...restTabsProps}
+      orientation={orientation}
+      variant={variant}
+      sx={{
+        minHeight: TABS_MIN_HEIGHT,
+
+        [`&.${muiTabsClasses.vertical}`]: {
+          minHeight: TABS_VERTICAL_MIN_HEIGHT,
+
+          [`& .${muiTabClasses.root}`]: {
+            alignItems: 'flex-start',
+            minHeight: TABS_VERTICAL_MIN_HEIGHT,
+            paddingLeft: '2em',
+          },
+
+          [`& .${muiTabsClasses.indicator}`]: {
+            right: 'initial',
+          },
+        },
+
+        [`& .${muiTabClasses.root}`]: {
+          minHeight: TABS_MIN_HEIGHT,
+        },
+
+        [`& .${muiTabsClasses.indicator}`]: {
+          backgroundColor: BLUE,
+          borderRadius: BORDER_RADIUS,
+        },
+      }}
+    />
+  );
+};
 
 export default Tabs;

striker-ui/types/Tabs.d.ts

@@ -0,0 +1,10 @@
+type TabsOrientation = Exclude<
+  import('@mui/material').TabsProps['orientation'],
+  undefined
+>;
+
+type TabsProps = Omit<import('@mui/material').TabsProps, 'orientation'> & {
+  orientation?:
+    | TabsOrientation
+    | Partial<Record<import('@mui/material').Breakpoint, TabsOrientation>>;
+};