From 35c60694ae964e52154cee0f7b48561e5c948414 Mon Sep 17 00:00:00 2001
From: Aoife <aoifeebradley@gmail.com>
Date: Tue, 20 Apr 2021 13:17:15 +0200
Subject: [PATCH] Make timbre layout responsive

---
 public/manifest.json                      | 10 -----
 src/App.js                                |  2 +-
 src/features/editor/Timbre.js             | 50 +++++++++++------------
 src/features/editor/card.js               | 13 +++---
 src/features/editor/index.js              |  2 +-
 src/features/editor/parameters/Amp.js     | 24 +++++------
 src/features/editor/parameters/Filter.js  |  4 +-
 src/features/editor/parameters/LFO.js     | 20 ++++-----
 src/features/editor/parameters/Mixer.js   | 16 ++++----
 src/features/editor/parameters/Patches.js |  2 +-
 src/features/editor/parameters/Pitch.js   | 46 ++++++++++-----------
 src/features/editor/parameters/VCO.js     | 12 +++---
 src/features/io/convert/loadStore.js      |  1 -
 src/features/io/convert/parse.js          |  1 -
 src/features/io/convert/serialise.js      | 26 ++++++------
 src/features/menu/index.js                |  3 +-
 16 files changed, 111 insertions(+), 121 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..1f2f141 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
diff --git a/src/App.js b/src/App.js
index 5abc415..8666f22 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ function App() {
     return false;
   };
   return (
-    <div className='bg-gray-200 grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
+    <div className="bg-gray-200 grid grid-cols-6 grid-rows-1 gap-4">
       <Menu />
       <Editor />
     </div>
diff --git a/src/features/editor/Timbre.js b/src/features/editor/Timbre.js
index f33829e..37b2974 100644
--- a/src/features/editor/Timbre.js
+++ b/src/features/editor/Timbre.js
@@ -13,10 +13,10 @@ import { selectById } from './timbreSlice.js';
 export default function Timbre(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 pr-10'>
+    <div className="flex flex-wrap justify-between py-6 px-4">
       <VCO
-        className='col-span-2'
-        name='VCO 1'
+        name="VCO 1"
+        className="flex-grow w-80"
         id={ids.vco1}
         waveforms={[
           { value: 'Saw' },
@@ -28,7 +28,7 @@ export default function Timbre(props) {
           { value: 'Noise' },
           { value: 'Audio In' },
         ]}
-        dwgsOrModTypeName='DWGS'
+        dwgsOrModTypeName="DWGS"
         dwgsOrModType={[
           { value: 'SynSine1' },
           { value: 'SynSine2' },
@@ -97,15 +97,15 @@ export default function Timbre(props) {
         ]}
       />
       <VCO
-        className='col-span-2'
-        name='VCO 2'
+        name="VCO 2"
+        className="flex-grow w-80"
         id={ids.vco2}
         waveforms={[
           { value: 'Saw' },
           { value: 'Square' },
           { value: 'Triangle' },
         ]}
-        dwgsOrModTypeName='Mod Type'
+        dwgsOrModTypeName="Mod Type"
         dwgsOrModType={[
           { value: 'Off' },
           { value: 'Ring' },
@@ -113,23 +113,21 @@ export default function Timbre(props) {
           { value: 'Ring Sync' },
         ]}
       />
-      <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 />
-        <Amp className='col-span-2' name='Amp' id={ids.amp} />
-        <Filter className='col-span-2' name='Filter' id={ids.filter} />
-        <EG
-          className='col-span-3'
-          name='EG 1 / 2'
-          id1={ids.eg1}
-          id2={ids.eg2}
-        />
-        <div />
-      </div>
+      <Mixer name="Mixer" id={ids.mixer} />
+      <Pitch className="flex-grow w-3/6" name="Pitch" id={ids.pitch} />
+
+      <Amp className="flex-grow w-80" name="Amp" id={ids.amp} />
+      <Filter className="flex-grow w-96" name="Filter" id={ids.filter} />
+      <EG
+        className="flex-grow w-1/2"
+        name="EG 1 / 2"
+        id1={ids.eg1}
+        id2={ids.eg2}
+      />
+
       <LFO
-        className='col-span-2'
-        name='LFO 1'
+        className="flex-grow"
+        name="LFO 1"
         id={ids.lfo1}
         waveforms={[
           { value: 'Saw' },
@@ -139,8 +137,8 @@ export default function Timbre(props) {
         ]}
       />
       <LFO
-        className='col-span-2'
-        name='LFO 2'
+        className="flex-grow"
+        name="LFO 2"
         id={ids.lfo2}
         waveforms={[
           { value: 'Saw' },
@@ -149,7 +147,7 @@ export default function Timbre(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Patches className='col-span-4' name='Patches' id={ids.patches} />
+      <Patches className="flex-grow" name="Patches" id={ids.patches} />
     </div>
   );
 }
diff --git a/src/features/editor/card.js b/src/features/editor/card.js
index feac6de..eb7e4e7 100644
--- a/src/features/editor/card.js
+++ b/src/features/editor/card.js
@@ -1,16 +1,17 @@
-export default function Card(props = { className: 'col-span-2' }) {
+export default function Card(props) {
   return (
     <div
       className={
         props.className +
-        ' flex flex-col justify-start border border-gray-300 rounded-md shadow-md bg-white'
-      }>
-      <header className='flex items-start justify-between py-2 px-4 border-b border-solid border-gray-200'>
-        <h3 className='pointer-events-none text-xl font-semibold text-gray-900'>
+        ' mb-4 mr-4 flex flex-col justify-start border border-gray-300 rounded-md shadow-md bg-white'
+      }
+    >
+      <header className="flex items-start justify-between py-2 px-4 border-b border-solid border-gray-200">
+        <h3 className="pointer-events-none text-xl font-semibold text-gray-900">
           {props.header}
         </h3>
       </header>
-      <section className='flex-grow flex flex-col justify-evenly px-6'>
+      <section className="flex-grow flex flex-col justify-evenly my-3 px-6">
         {props.children}
       </section>
     </div>
diff --git a/src/features/editor/index.js b/src/features/editor/index.js
index d6a2b71..53554be 100644
--- a/src/features/editor/index.js
+++ b/src/features/editor/index.js
@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 export default function Editor() {
   const activeTab = useSelector((state) => state.parameters.activeTab);
   return (
-    <div className="col-span-5 overflow-y-auto overscroll-contain">
+    <div className="h-screen col-span-5 overflow-y-auto overscroll-contain">
       {activeTab === 'Timbre1' ? <Timbre id="timbre1" /> : null}
       {activeTab === 'Timbre2' ? <Timbre id="timbre2" /> : null}
       {activeTab === 'Vocoder' ? <Vocoder id="vocoder" /> : null}
diff --git a/src/features/editor/parameters/Amp.js b/src/features/editor/parameters/Amp.js
index 7e68086..759258f 100644
--- a/src/features/editor/parameters/Amp.js
+++ b/src/features/editor/parameters/Amp.js
@@ -10,8 +10,8 @@ export default function Amp(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='flex flex-row '>
-        <div className='flex flex-col items-center justify-evenly w-1/2'>
+      <div className="flex flex-row ">
+        <div className="flex flex-col items-center justify-evenly w-1/2">
           <h3>Amp Level</h3>
           <Knob
             value={parameters.ampLevel}
@@ -26,7 +26,7 @@ export default function Amp(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center justify-evenly w-1/2'>
+        <div className="flex flex-col items-center justify-evenly w-1/2">
           <h3>Pan Pot</h3>
           <Knob
             value={parameters.panpot}
@@ -43,8 +43,8 @@ export default function Amp(props) {
           />
         </div>
       </div>
-      <div className='flex flex-row'>
-        <div className='flex flex-col items-center justify-evenly w-1/2'>
+      <div className="flex flex-row">
+        <div className="flex flex-col items-center justify-evenly w-1/2">
           <h3>Keyboard Track</h3>
           <Knob
             value={parameters.ampTrack}
@@ -60,7 +60,7 @@ export default function Amp(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center justify-start w-1/2'>
+        <div className="flex flex-col items-center justify-start w-1/2">
           <h3>Distortion</h3>
           <Checkbox
             value={parameters.distortion}
@@ -85,8 +85,8 @@ export const VocoderAmp = (props) => {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='flex flex-row'>
-        <div className='flex flex-col items-center w-1/2'>
+      <div className="flex flex-row">
+        <div className="flex flex-col items-center w-1/2">
           <h3>Amp Level</h3>
           <Knob
             value={parameters.ampLevel}
@@ -101,7 +101,7 @@ export const VocoderAmp = (props) => {
             }
           />
         </div>
-        <div className='flex flex-col items-center w-1/2'>
+        <div className="flex flex-col items-center w-1/2">
           <h3>Direct Level</h3>
           <Knob
             value={parameters.directLevel}
@@ -117,8 +117,8 @@ export const VocoderAmp = (props) => {
           />
         </div>
       </div>
-      <div className='flex flex-row'>
-        <div className='flex flex-col items-center w-1/2'>
+      <div className="flex flex-row">
+        <div className="flex flex-col items-center w-1/2">
           <h3>Keyboard Track</h3>
           <Knob
             value={parameters.ampTrack}
@@ -134,7 +134,7 @@ export const VocoderAmp = (props) => {
             }
           />
         </div>
-        <div className='flex flex-col items-center w-1/2'>
+        <div className="flex flex-col items-center w-1/2">
           <h3>Distortion</h3>
           <Checkbox
             value={parameters.distortion}
diff --git a/src/features/editor/parameters/Filter.js b/src/features/editor/parameters/Filter.js
index ceb4542..f9f4e72 100644
--- a/src/features/editor/parameters/Filter.js
+++ b/src/features/editor/parameters/Filter.js
@@ -10,7 +10,7 @@ export default function Filter(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className="-mt-2 flex items-center justify-between">
+      <div className="flex items-center justify-between">
         <h3>Filter Type</h3>
         <Select
           className="select w-4/6"
@@ -31,7 +31,7 @@ export default function Filter(props) {
           }
         />
       </div>
-      <div className="-mt-3 flex flex-row justify-evenly">
+      <div className="my-2 flex flex-row justify-evenly">
         <div className="flex flex-col w-1/2">
           <div className="flex flex-col items-center">
             <h3 className="text-lg font-semibold text-gray-900">Cutoff</h3>
diff --git a/src/features/editor/parameters/LFO.js b/src/features/editor/parameters/LFO.js
index 639ebed..7718bc4 100644
--- a/src/features/editor/parameters/LFO.js
+++ b/src/features/editor/parameters/LFO.js
@@ -10,10 +10,10 @@ export default function LFO(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='flex items-center justify-between'>
+      <div className="flex items-center justify-between">
         <h3>LFO Waveform</h3>
         <Select
-          className='select w-3/5'
+          className="select w-3/5"
           value={parameters.waveform}
           list={props.waveforms}
           onChange={(value) =>
@@ -26,10 +26,10 @@ export default function LFO(props) {
           }
         />
       </div>
-      <div className='flex items-center justify-between'>
+      <div className="mt-2 flex items-center justify-between">
         <h3>Key Sync</h3>
         <Select
-          className='select w-3/5'
+          className="select w-3/5"
           value={parameters.keySync}
           list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
           onChange={(value) =>
@@ -42,10 +42,10 @@ export default function LFO(props) {
           }
         />
       </div>
-      <div className='flex flex-row mb-4'>
-        <div className='flex flex-col w-1/2'>
-          <h3 className='self-center'>Tempo Sync</h3>
-          <div className='flex flex-row items-center justify-evenly'>
+      <div className="mt-2 flex flex-row mb-4">
+        <div className="flex flex-col w-1/2">
+          <h3 className="self-center">Tempo Sync</h3>
+          <div className="flex flex-row items-center justify-evenly">
             <Checkbox
               value={parameters.tempoSync}
               onChange={(value) =>
@@ -58,7 +58,7 @@ export default function LFO(props) {
               }
             />
             <Select
-              className='select mt-2 w-2/3'
+              className="select mt-2 w-2/3"
               value={parameters.syncNote}
               list={[
                 { value: '1/1' },
@@ -88,7 +88,7 @@ export default function LFO(props) {
             />
           </div>
         </div>
-        <div className='flex flex-col items-center w-1/2 space-y-1'>
+        <div className="flex flex-col items-center w-1/2 space-y-2">
           <h3>Frequency</h3>
           <Knob
             value={parameters.frequency}
diff --git a/src/features/editor/parameters/Mixer.js b/src/features/editor/parameters/Mixer.js
index a39ec49..1468e85 100644
--- a/src/features/editor/parameters/Mixer.js
+++ b/src/features/editor/parameters/Mixer.js
@@ -9,10 +9,10 @@ export default function Mixer(props) {
   const dispatch = useDispatch();
 
   return (
-    <Card header={props.name}>
-      <div className='-mt-3'>
-        <div className='flex flex-col items-center'>
-          <h3 className='text-lg font-semibold'>Volume 1</h3>
+    <Card className={props.className} header={props.name}>
+      <div className="-mt-3">
+        <div className="flex flex-col items-center">
+          <h3 className="text-lg font-semibold">Volume 1</h3>
           <Knob
             max={127}
             value={parameters.vol1}
@@ -26,8 +26,8 @@ export default function Mixer(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
-          <h3 className='text-lg font-semibold'>Volume 2</h3>
+        <div className="flex flex-col items-center">
+          <h3 className="text-lg font-semibold">Volume 2</h3>
           <Knob
             max={127}
             value={parameters.vol2}
@@ -41,8 +41,8 @@ export default function Mixer(props) {
             }
           />
         </div>
-        <div className='flex flex-col items-center'>
-          <h3 className='text-lg font-semibold'>Volume 3</h3>
+        <div className="flex flex-col items-center">
+          <h3 className="text-lg font-semibold">Volume 3</h3>
           <Knob
             max={127}
             value={parameters.vol3}
diff --git a/src/features/editor/parameters/Patches.js b/src/features/editor/parameters/Patches.js
index e29040f..9fd0f36 100644
--- a/src/features/editor/parameters/Patches.js
+++ b/src/features/editor/parameters/Patches.js
@@ -6,7 +6,7 @@ import { Select, Knob } from '../../utils/components';
 
 const Patch = (props) => {
   return (
-    <div className="-mt-3 w-1/4">
+    <div className="mb-2 w-1/4">
       <div className="flex flex-col items-center justify-between">
         <h3>Source</h3>
         <Select
diff --git a/src/features/editor/parameters/Pitch.js b/src/features/editor/parameters/Pitch.js
index a718d2e..69e47f2 100644
--- a/src/features/editor/parameters/Pitch.js
+++ b/src/features/editor/parameters/Pitch.js
@@ -10,11 +10,11 @@ export default function Pitch(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='flex flex-row justify-evenly'>
-        <div className='px-4 flex items-center justify-between w-1/2'>
-          <h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
+      <div className="mt-2 flex flex-row">
+        <div className="mx-4 flex items-center justify-between w-1/2">
+          <h3 className="text-lg font-semibold text-gray-900">Voice Assign</h3>
           <Select
-            className='select w-2/4'
+            className="select w-2/4"
             value={parameters.voiceAssign}
             list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
             onChange={(value) =>
@@ -27,10 +27,10 @@ export default function Pitch(props) {
             }
           />
         </div>
-        <div className='px-4 flex items-center justify-between w-1/2'>
-          <h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
+        <div className="mx-4 flex items-center justify-between w-1/2">
+          <h3 className="text-lg font-semibold text-gray-900">Trigger Mode</h3>
           <Select
-            className='select w-2/4'
+            className="select w-2/4"
             value={parameters.triggerMode}
             list={[{ value: 'Single' }, { value: 'Multiple' }]}
             onChange={(value) =>
@@ -44,10 +44,10 @@ export default function Pitch(props) {
           />
         </div>
       </div>
-      <div className='flex flex-row'>
-        <section className='w-1/3'>
-          <div className='flex flex-col items-center'>
-            <h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
+      <div className="mt-2 mb-4 flex flex-row">
+        <section className="w-1/3">
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-semibold text-gray-900">Transpose</h3>
             <Knob
               value={parameters.transpose}
               dual={true}
@@ -62,8 +62,8 @@ export default function Pitch(props) {
               }
             />
           </div>
-          <div className='flex flex-col items-center'>
-            <h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-semibold text-gray-900">Tune</h3>
             <Knob
               value={parameters.tune}
               dual={true}
@@ -79,9 +79,9 @@ export default function Pitch(props) {
             />
           </div>
         </section>
-        <section className='w-1/3'>
-          <div className='flex flex-col items-center'>
-            <h3 className='text-lg font-semibold text-gray-900'>
+        <section className="w-1/3">
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-semibold text-gray-900">
               Unison Detune
             </h3>
             <Knob
@@ -97,8 +97,8 @@ export default function Pitch(props) {
               }
             />
           </div>
-          <div className='flex flex-col items-center'>
-            <h3 className='text-lg font-semibold text-gray-900'>Portamento</h3>
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-semibold text-gray-900">Portamento</h3>
             <Knob
               value={parameters.portamento}
               max={127}
@@ -113,9 +113,9 @@ export default function Pitch(props) {
             />
           </div>
         </section>
-        <section className='w-1/3'>
-          <div className='flex flex-col items-center'>
-            <h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3>
+        <section className="w-1/3">
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-semibold text-gray-900">Bend Range</h3>
             <Knob
               value={parameters.bendRange}
               dual={true}
@@ -130,8 +130,8 @@ export default function Pitch(props) {
               }
             />
           </div>
-          <div className='flex flex-col items-center'>
-            <h3 className='text-lg font-semibold text-gray-900'>
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-semibold text-gray-900">
               Vibrato Intensity
             </h3>
             <Knob
diff --git a/src/features/editor/parameters/VCO.js b/src/features/editor/parameters/VCO.js
index 6a1b7db..5470198 100644
--- a/src/features/editor/parameters/VCO.js
+++ b/src/features/editor/parameters/VCO.js
@@ -9,8 +9,8 @@ export default function VCO(props) {
   const dispatch = useDispatch();
 
   return (
-    <Card className="col-span-2" header={props.name}>
-      <div className="-mt-2 flex items-center justify-between">
+    <Card className={props.className} header={props.name}>
+      <div className="flex items-center justify-between">
         <h3 className="text-lg font-semibold text-gray-900">Waveform</h3>
         <Select
           className="select w-4/6"
@@ -26,7 +26,7 @@ export default function VCO(props) {
           }
         />
       </div>
-      <div className="-mt-4 flex items-center justify-between">
+      <div className="flex items-center justify-between">
         <h3 className="text-lg font-semibold text-gray-900">{`${props.dwgsOrModTypeName}`}</h3>
         <Select
           className="select w-4/6"
@@ -42,9 +42,11 @@ export default function VCO(props) {
           }
         />
       </div>
-      <div className="mb-2 flex flex-row">
+      <div className="my-2 flex flex-row">
         <div className="flex flex-col items-center w-1/2">
-          <h3 className="text-lg font-semibold text-gray-900">Waveform Mod</h3>
+          <h3 className="ml-1 text-lg font-semibold text-gray-900">
+            Waveform Mod
+          </h3>
           <Knob
             maxValue={127}
             value={parameters.waveMod}
diff --git a/src/features/io/convert/loadStore.js b/src/features/io/convert/loadStore.js
index 8548a0b..50a97a3 100644
--- a/src/features/io/convert/loadStore.js
+++ b/src/features/io/convert/loadStore.js
@@ -10,7 +10,6 @@ export default function build_store(patch, timbre1, timbre2, vocoder) {
 }
 
 function prepare_patch(object) {
-  console.log(object.voice_mode);
   return {
     unusedPatch: {
       id: 'unusedPatch',
diff --git a/src/features/io/convert/parse.js b/src/features/io/convert/parse.js
index e4178c2..74b3736 100644
--- a/src/features/io/convert/parse.js
+++ b/src/features/io/convert/parse.js
@@ -67,7 +67,6 @@ function build_patch(patch) {
 }
 
 function build_timbre(num, timbre) {
-  console.log(timbre[0]);
   return {
     [`t${num}_midi_channel`]: timbre[0],
     [`t${num}_assign_mode`]: getBits(timbre[1], 6, 7),
diff --git a/src/features/io/convert/serialise.js b/src/features/io/convert/serialise.js
index c623426..593b3ed 100644
--- a/src/features/io/convert/serialise.js
+++ b/src/features/io/convert/serialise.js
@@ -1,20 +1,24 @@
 import { fromBitArray, buildByte } from '../utils/functions';
 
 export default function serialise(patch) {
-  const data = Array.from(serialise_patch(patch[0]));
+  let data = serialise_patch(patch[0]);
   switch (patch[0].voice_mode) {
     default:
-    case 'Single':
-      data.concat(serialise_timbre(1, patch[1]));
+    case 0:
+      data = data.concat(serialise_timbre(1, patch[1]));
       break;
-    case 'Multiple':
-      data.concat(serialise_timbre(1, patch[1]), serialise_timbre(2, patch[2]));
+    case 2:
+      data = data.concat(
+        serialise_timbre(1, patch[1]),
+        serialise_timbre(2, patch[2])
+      );
       break;
-    case 'Vocoder':
-      data.concat(serialise_vocoder(patch[1]));
+    case 3:
+      data = data.concat(serialise_vocoder(patch[1]));
       break;
   }
   return data;
+  //console.log(data);
 }
 
 function serialise_patch(patch) {
@@ -72,7 +76,7 @@ function serialise_timbre(num, timbre) {
       { value: timbre[`t${num}_eg_2_reset`], start: 5 },
       { value: timbre[`t${num}_eg_1_reset`], start: 4 },
       { value: timbre[`t${num}_trigger_mode`], start: 3 },
-      { value: timbre[`t${num}_key_priority`], start: 0 }
+      { value: timbre[`t${num}_key_priority`], start: 1 }
     ),
     timbre[`t${num}_unison_detune`],
     timbre[`t${num}_tune`],
@@ -155,8 +159,7 @@ function serialise_timbre(num, timbre) {
     ),
     timbre[`t${num}_patch_4_intensity`],
   ];
-  array.concat(Array(55).fill(0));
-  return array;
+  return array.concat(Array(55).fill(0));
 }
 
 function serialise_vocoder(vocoder) {
@@ -242,6 +245,5 @@ function serialise_vocoder(vocoder) {
     vocoder.v_pan_7,
     vocoder.v_pan_8,
   ];
-  array.concat(Array(174).fill(0));
-  return array;
+  return array.concat(Array(174).fill(0));
 }
diff --git a/src/features/menu/index.js b/src/features/menu/index.js
index 3284c04..aea7876 100644
--- a/src/features/menu/index.js
+++ b/src/features/menu/index.js
@@ -15,7 +15,6 @@ export default function Menu() {
   const fileRef = useRef(null);
   const state = useSelector((state) => selectEntities(state));
   const activeTab = useSelector((state) => state.parameters.activeTab);
-  console.log(activeTab);
   const dispatch = useDispatch();
   const reader = new FileReader();
   const loadFile = (f) => {
@@ -41,7 +40,7 @@ export default function Menu() {
   }, [state.patch.mode, dispatch]);
 
   return (
-    <div className="col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4">
+    <div className="h-screen col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4">
       <div className="menu-patch-container">
         <div className="patch-name">
           <input