fix(compressor): handle responsive

Author: Mitix-EPI

src/Components/CompressorLevel/CompressorLevel.css

@@ -0,0 +1,11 @@
+.item-container-compressor {
+    overflow:scroll;
+    overflow-y:scroll;
+    overflow-x:hidden;
+    max-height: 65vh;
+    min-height: 65vh;
+}
+
+.margin-title {
+    margin-top: 20px !important;
+}

src/Components/CompressorLevel/CompressorLevel.tsx

@@ -109,7 +109,7 @@ export const CompressorLevel = () => {
       ) : (
         <>
           <div className="container compressor-container">
-            <h2>List of mics:
+            <h2 className="margin-title">List of mics:
             <Tooltip title="Here, you can adjust the level of compressor applied on your mics. Example: higher is the compressor level, more your voice will be eased.">
               <IconButton>
                 <MdHelpOutline style={ { color: "white" } } />
@@ -122,7 +122,7 @@ export const CompressorLevel = () => {
               </>
             ) : (
               <div className="actions-reactions-list">
-                <div className="item-container">
+                <div className="item-container-compressor">
                   {exampleCompressorArray &&
                   exampleCompressorArray.length > 0 ? (
                     exampleCompressorArray.map((item, index) => {

src/Components/Sidebar/Sidebar.css

@@ -32,7 +32,8 @@
 }
 .nav-menu {
   background-color: #18191F;
-  width: 300px;
+  width: 25vw;
+  max-width: 300px;
   height: 100vh;
   justify-content: center;
   position: relative;

src/Components/Slider/Slider.tsx

@@ -104,13 +104,12 @@ const CustomizedSlider = (props: any) => {
       <Box
         sx={{
           display: "flex",
-          flexDirection: "column",
           alignItems: "center",
           p: 1,
           m: 1,
         }}
       >
-        <Box sx={{ width: "100%", maxWidth: 720 }}>
+        <Box sx={{ width: "65vw" }}>
           <MicroSlider
             key={`slider-compressor}`}
             onChangeCommitted={handleSliderChange}
@@ -121,7 +120,7 @@ const CustomizedSlider = (props: any) => {
           />
         </Box>
         <Box
-          sx={{ mt: 2 }}
+          sx={{ marginTop: "-22px", paddingLeft: "5vw" }}
           onClick={handleMicToggle}
           style={{ color: props.isActive ? "green" : "red" }}
         >