Make BZDB Settings scrollable vertically

allejo · May 2, 2022 · 116dde8 · 116dde8
1 parent adeadb0
commit 116dde8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/src/Components/Modals/BZDBSettingsModal.module.scss b/src/Components/Modals/BZDBSettingsModal.module.scss
@@ -0,0 +1,9 @@
+.modalBody {
+  display: flex;
+}
+
+.tabList {
+  [data-role='tab-list'] {
+    width: 300px;
+  }
+}
diff --git a/src/Components/Modals/BZDBSettingsModal.tsx b/src/Components/Modals/BZDBSettingsModal.tsx
@@ -22,6 +22,7 @@ import { Tab, TabList } from '../TabList';
 
 import BZDBDocs from '../../data/bzdb-documention.json';
 import generalStyles from '../../sass/general.module.scss';
+import styles from './BZDBSettingsModal.module.scss';
 
 type BZDBVariableType = typeof BZDBDocs.variables[number];
 
@@ -168,13 +169,19 @@ const BZDBSettingsModal = () => {
   return (
     <ListenerModal
       event={BZDBSettingsModalOpenEventName}
+      className={styles.modalBody}
       dialog={dialog}
+      footer={
+        <Button type="success" onClick={handleOnSave}>
+          Save
+        </Button>
+      }
       title="BZDB Settings"
       onOpen={syncStateToWorld}
       hideOnEsc={false}
       hideOnClickOutside={false}
     >
-      <TabList aria-label="BZDB Settings" vertical>
+      <TabList aria-label="BZDB Settings" className={styles.tabList} vertical>
         {bzdbCategories.map((category) => (
           <Tab title={category} key={category}>
             {bzdbDefinitionsByCategory[category].map((variable) => (
@@ -187,11 +194,6 @@ const BZDBSettingsModal = () => {
           </Tab>
         ))}
       </TabList>
-      <div>
-        <Button type="success" onClick={handleOnSave}>
-          Save
-        </Button>
-      </div>
     </ListenerModal>
   );
 };

diff --git a/src/Components/TabList.module.scss b/src/Components/TabList.module.scss
@@ -7,6 +7,8 @@
 }
 
 .container {
+  width: 100%;
+
   &[data-vertical='true'] {
     display: flex;
   }
@@ -20,10 +22,12 @@
 
   @include is-vertical(true) {
     border-right: 1px solid white;
+    overflow-y: auto;
   }
 
   @include is-vertical(false) {
     border-bottom: 1px solid white;
+    overflow-x: auto;
   }
 }
 
@@ -72,6 +76,7 @@
 }
 
 .panelContainer {
+  overflow-y: auto;
   width: 100%;
 }
 

diff --git a/src/Components/TabList.tsx b/src/Components/TabList.tsx
@@ -6,6 +6,8 @@ import {
   useTabState,
 } from 'reakit';
 
+import { classList } from '../Utilities/cssClasses';
+
 import styles from './TabList.module.scss';
 
 interface TabProps {
@@ -16,23 +18,37 @@ interface TabProps {
 const Tab = ({ children }: TabProps) => <>{children}</>;
 
 interface TabListProps {
+  className?: string;
   vertical?: boolean;
   children: ReactElement<TabProps> | ReactElement<TabProps>[];
 }
 
-const TabList = ({ vertical = false, children, ...props }: TabListProps) => {
+const TabList = ({
+  className,
+  vertical = false,
+  children,
+  ...props
+}: TabListProps) => {
   const tab = useTabState();
 
   return (
-    <div className={styles.container} data-vertical={vertical}>
-      <BaseTabList {...tab} {...props} className={styles.tabList}>
+    <div
+      className={classList([styles.container, className])}
+      data-vertical={vertical}
+    >
+      <BaseTabList
+        {...tab}
+        {...props}
+        className={styles.tabList}
+        data-role="tab-list"
+      >
         {React.Children.map(children, (child) => (
           <BaseTab {...tab} className={styles.tab}>
             {child.props.title}
           </BaseTab>
         ))}
       </BaseTabList>
-      <div className={styles.panelContainer}>
+      <div className={styles.panelContainer} data-role="tab-panel">
         {React.Children.map(children, (child) => (
           <BaseTabPanel {...tab} className={styles.panel}>
             {child.props.children}