fix scrolling sections

src/App.css

@@ -1,5 +1,6 @@
 .App {
     text-align: center;
+    
 }
 
 .App-logo {

src/features/timbre/Timbre.module.css

@@ -1,12 +1,15 @@
 .timbreStyle {
-    display: flex;
+    display: inline-flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: center;
+
 }
 
-.lineBreak {
+@media screen and (min-width: 1824) {
-    width: 100%;
+    .lineBreak {
+        width: 100%;
+    }
 }
 
 .buttonContainer {
@@ -26,19 +29,30 @@
     border: 2px solid slateblue;
 }
 
+.tabs {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
 .tabList {
-    position: fixed;
+    border-bottom: 1px solid black;
     display: inline-flex;
     flex-direction: row;
     list-style-type: none;
+    justify-content: center;
     top: 0;
-    left: 30%;
+    padding: 0;
-}
+    margin: 0;
+    width: 100vw;
 
+    background: white;
+}
 .tab {
+    width: 78px;
     background: white;
     color: slategrey;
-    font-size: 1em;
+    font-size: 0.75em;
     margin: 0.75em 1em;
     padding: 0.25em 1em;
     border: 2px solid slategrey;
@@ -73,6 +87,26 @@
     }
 }
 .tabPanel {
+
+    padding: 1em 0;
+    height: 100%;
     animation: slideeffect 0.6s ease-in-out;
     opacity: 1;
+    overflow-y: scroll;
 }
+.tabPanel::-webkit-scrollbar {
+    width: 0.25em;
+}
+   
+.tabPanel::-webkit-scrollbar-track, .tabPanel::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    
+}
+.tabPanel:hover::-webkit-scrollbar-track {
+    background-color: lightgray;
+}
+   
+.tabPanel:hover::-webkit-scrollbar-thumb {
+    background-color: slateblue;
+    border-radius: 6px;
+}

src/features/timbre/parameters/Parameters.module.css

@@ -6,7 +6,7 @@
     padding: 16pt;
     margin: 10pt;
     border: solid 1pt black;
-    width: 160px;
+    width: 15%;
     height: 214px;
     line-height: 1.5em;
 }

src/features/timbre/timbreSwitcher.js

@@ -6,8 +6,9 @@ import styles from './Timbre.module.css';
 
 export default function TimbreSwitcher(props) {
     return (
-        <div>
+        <div className={styles.tabs}>
             <Tabs
+                className={styles.tabs}
                 defaultIndex="0"
                 selectedTabClassName={styles.selected}
                 selectedTabPanelClassName={styles.tabPanel}>
@@ -15,6 +16,8 @@ export default function TimbreSwitcher(props) {
                     <Tab className={styles.tab}>Timbre 1</Tab>
                     <Tab className={styles.tab}>Timbre 2</Tab>
                     <Tab className={styles.tab}>Vocoder</Tab>
+                    <Tab className={styles.tab}>Effects</Tab>
+                    <Tab className={styles.tab}>Arpeggio</Tab>
                 </TabList>
 
                 <TabPanel>

src/index.css

@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+  height: 100vh;
 }
 
 code {