Make timbre layout responsive

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}

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>

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}

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}

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

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

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}