refactor: module

packages/sound-persea/src/controllers/audio/component.jsx

@@ -1,17 +1,17 @@
-import './component.scss';
-
 import {BinaryController} from '@avocado/resource-persea';
 import {
   PropTypes,
   React,
 } from '@flecks/react';
 
+import locals from './component.module.scss';
+
 export const AudioComponent = ({resource}) => {
   // eslint-disable-next-line no-use-before-define
   const buffer = BinaryController.toBuffer(resource);
   const objectUrl = URL.createObjectURL(new window.Blob([buffer]));
   return (
-    <div className="audio">
+    <div className={locals.audio}>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio
         controls

packages/sound-persea/src/controllers/audio/component.module.scss

@@ -0,0 +1,12 @@
+.audio {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1em;
+  width: 100%;
+
+  audio {
+    flex-grow: 1;
+    width: 100%;
+  }
+}

packages/sound-persea/src/controllers/audio/component.scss

@@ -1,5 +0,0 @@
-.audio {
-  height: 100%;
-  padding: 1em;
-  width: 100%;
-}