Always show the tab list. #593

Author: oldj

src/renderer/components/Pref/index.tsx

@@ -32,6 +32,7 @@ import { BiSliderAlt } from 'react-icons/bi'
 import Advanced from './Advanced'
 import Commands from './Commands'
 import General from './General'
+import styles from './styles.less'
 
 interface Props {}
 
@@ -91,15 +92,15 @@ const PreferencePanel = (props: Props) => {
         </DrawerHeader>
 
         <DrawerBody>
-          <Tabs>
+          <Tabs className={styles.tabs}>
             <TabList>
               <Tab>{lang.general}</Tab>
               <Tab>{lang.commands}</Tab>
               <Tab>{lang.proxy}</Tab>
               <Tab>{lang.advanced}</Tab>
             </TabList>
 
-            <TabPanels>
+            <TabPanels className={styles.tab_panels}>
               <TabPanel>
                 <General data={data} onChange={onUpdate} />
               </TabPanel>

src/renderer/components/Pref/styles.less

@@ -5,6 +5,15 @@
   color: inherit;
 }
 
+.tabs {
+  height: 100%;
+}
+
+.tab_panels {
+  height: calc(100% - 37px);
+  overflow: auto;
+}
+
 :global {
   label {
     span.chakra-radio__control {