Make all tabs responsive

src/features/editor/Arpeggio.js

@@ -77,7 +77,7 @@ export default function Arpeggiator(props) {
             />
           </div>
         </section>
-        <section className=" -mt-4 flex flex-col justify-around w-1/5">
+        <section className="mb-2 flex flex-col justify-around w-1/5">
           <div className="flex flex-col">
             <div className="flex flex-col items-center">
               <h3>Tempo</h3>
@@ -175,7 +175,7 @@ export default function Arpeggiator(props) {
               }
             />
           </div>
-          <div className="flex flex-row justify-around">
+          <div className="pt-2 flex flex-row justify-around">
             <div className="flex flex-col items-center w-1/2">
               <h3>Key Sync</h3>
               <Checkbox

src/features/editor/Effects.js

@@ -7,21 +7,12 @@ import Arpeggiator from './Arpeggio';
 export default function Effects(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className="h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6">
-      <ModFX
-        className="row-start-2 col-start-3 col-span-2 row-span-2"
-        id={ids.modfx}
-      />
-      <Delay
-        className="row-start-2 col-start-5 col-span-2 row-span-2"
-        id={ids.delay}
-      />
-      <EQ
-        className="row-start-2 col-start-7 col-span-2 row-span-2"
-        id={ids.eq}
-      />
+    <div className="flex flex-wrap justify-between py-6 px-4">
+      <ModFX className="flex-grow w-80" id={ids.modfx} />
+      <Delay className="flex-grow w-80" id={ids.delay} />
+      <EQ className="flex-grow w-80" id={ids.eq} />
       <Arpeggiator
-        className="row-start-4 row-span-2 col-start-4 col-span-4"
+        className="flex-grow w-96"
         id1={ids.arpeggA}
         id2={ids.arpeggB}
       />

src/features/editor/Vocoder.js

@@ -14,10 +14,10 @@ import Pans from './parameters/Pans';
 export default function Vocoder(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 p-6'>
+    <div className="flex flex-wrap justify-between py-6 px-4">
       <VCO
-        className='col-span-2'
-        name='VCO'
+        className="flex-grow w-80"
+        name="VCO"
         id={ids.vco}
         waveforms={[
           { value: 'Saw' },
@@ -29,7 +29,7 @@ export default function Vocoder(props) {
           { value: 'Noise' },
           { value: 'Audio In' },
         ]}
-        dwgsOrModTypeName='DWGS'
+        dwgsOrModTypeName="DWGS"
         dwgsOrModType={[
           { value: 'SynSine1' },
           { value: 'SynSine2' },
@@ -97,19 +97,17 @@ export default function Vocoder(props) {
           { value: 'Voice4' },
         ]}
       />
-      <AudioIn className='col-span-2' name='Audio In' id={ids.audioIn} />
-      <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
-      <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
-      <div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
-        <div />
-        <VocoderFilter name='Filter' id={ids.filter} />
-        <FCMod name='FC Mod' id={ids.fcMod} />
-        <VocoderAmp className='col-span-2' name='Amp' id={ids.amp} />
-        <VocoderEG className='col-span-3' name='EG' id1={ids.eg} />
-      </div>
+      <AudioIn className="flex-grow w-80" name="Audio In" id={ids.audioIn} />
+      <Mixer name="Mixer" id={ids.mixer} />
+      <Pitch className="flex-grow w-1/2 " name="Pitch" id={ids.pitch} />
+      <VocoderFilter name="Filter" id={ids.filter} />
+      <FCMod name="FC Mod" id={ids.fcMod} />
+      <VocoderAmp className="flex-grow w-80" name="Amp" id={ids.amp} />
+      <VocoderEG className="flex-grow w-80" name="EG" id1={ids.eg} />
+      <div style={{ flexBasis: '100%' }} />
       <LFO
-        className='col-span-2'
-        name='LFO 1'
+        className="flex-grow w-80"
+        name="LFO 1"
         id={ids.lfo1}
         waveforms={[
           { value: 'Saw' },
@@ -119,8 +117,8 @@ export default function Vocoder(props) {
         ]}
       />
       <LFO
-        className='col-span-2'
-        name='LFO 2'
+        className="flex-grow w-80"
+        name="LFO 2"
         id={ids.lfo2}
         waveforms={[
           { value: 'Saw' },
@@ -129,8 +127,9 @@ export default function Vocoder(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Levels className='col-span-2' name='Levels' id={ids.levels} />
-      <Pans className='col-span-2' name='Pans' id={ids.pans} />
+      <div style={{ flexBasis: '100%' }} />
+      <Levels className="flex-grow w-96" name="Levels" id={ids.levels} />
+      <Pans className="flex-grow w-96" name="Pans" id={ids.pans} />
     </div>
   );
 }

src/features/editor/parameters/Amp.js

@@ -117,7 +117,7 @@ export const VocoderAmp = (props) => {
           />
         </div>
       </div>
-      <div className="flex flex-row">
+      <div className="my-3 flex flex-row">
         <div className="flex flex-col items-center w-1/2">
           <h3>Keyboard Track</h3>
           <Knob

src/features/editor/parameters/EG.js

@@ -11,8 +11,8 @@ export default function EG(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='flex flex-row justify-evenly'>
-        <div className='flex flex-col items-center'>
+      <div className="flex flex-row justify-evenly">
+        <div className="flex flex-col items-center">
           <h3>Attack</h3>
           <Knob
             value={parameters_eg_1.attack}
@@ -27,7 +27,7 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Decay</h3>
           <Knob
             value={parameters_eg_1.decay}
@@ -42,7 +42,7 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Sustain</h3>
           <Knob
             value={parameters_eg_1.sustain}
@@ -57,7 +57,7 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Release</h3>
           <Knob
             value={parameters_eg_1.release}
@@ -72,10 +72,10 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>EG 1 Reset</h3>
           <Checkbox
-            className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+            className="rounded-md border-2 text-blue-500 mt-2 w-6 h-6"
             value={parameters_eg_1.egReset}
             onChange={(value) =>
               dispatch(
@@ -88,8 +88,8 @@ export default function EG(props) {
           />
         </div>
       </div>
-      <div className='flex flex-row justify-evenly'>
-        <div className='flex flex-col items-center'>
+      <div className="flex flex-row justify-evenly">
+        <div className="flex flex-col items-center">
           <h3>Attack</h3>
           <Knob
             value={parameters_eg_2.attack}
@@ -104,7 +104,7 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Decay</h3>
           <Knob
             value={parameters_eg_2.decay}
@@ -119,7 +119,7 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Sustain</h3>
           <Knob
             value={parameters_eg_2.sustain}
@@ -134,7 +134,7 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Release</h3>
           <Knob
             value={parameters_eg_2.release}
@@ -149,10 +149,10 @@ export default function EG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>EG 2 Reset</h3>
           <Checkbox
-            className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+            className="rounded-md border-2 text-blue-500 mt-2 w-6 h-6"
             value={parameters_eg_2.egReset}
             onChange={(value) =>
               dispatch(
@@ -175,8 +175,8 @@ export function VocoderEG(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='-mt-1 flex flex-row justify-evenly'>
-        <div className='flex flex-col items-center'>
+      <div className="-mt-1 flex flex-row justify-evenly">
+        <div className="flex flex-col items-center">
           <h3>Attack</h3>
           <Knob
             value={parameters_eg_1.attack}
@@ -191,7 +191,7 @@ export function VocoderEG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Decay</h3>
           <Knob
             value={parameters_eg_1.decay}
@@ -206,7 +206,7 @@ export function VocoderEG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Sustain</h3>
           <Knob
             value={parameters_eg_1.sustain}
@@ -221,7 +221,7 @@ export function VocoderEG(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
+        <div className="flex flex-col items-center">
           <h3>Release</h3>
           <Knob
             value={parameters_eg_1.release}
@@ -237,10 +237,10 @@ export function VocoderEG(props) {
           />
         </div>
       </div>
-      <div className='-mt-8 flex flex-col items-center'>
+      <div className="flex flex-col items-center">
         <h3>EG Reset</h3>
         <Checkbox
-          className='checkbox'
+          className="checkbox"
           value={parameters_eg_1.egReset}
           onChange={(value) =>
             dispatch(