MOBILE-2314 fileuploader: Improve recorder styles

Author: NoelDeMartin

src/core/components/sheet-modal/sheet-modal.scss

@@ -7,6 +7,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: flex-end;
     isolation: isolate;
 
@@ -23,6 +24,8 @@
         z-index: 3; // ion-backdrop has z-index 2
         transform: translateY(100%);
         transition: transform 300ms ease-in;
+        width: 100%;
+        max-width: 500px;
     }
 
     &.active {

src/core/features/fileuploader/components/audio-histogram/audio-histogram.scss

@@ -2,7 +2,12 @@
     --background-color: var(--ion-background-color, #fff);
     --bars-color: var(--ion-text-color, #000);
 
+    position: relative;
+
     canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
     }

src/core/features/fileuploader/components/audio-histogram/audio-histogram.ts

@@ -48,17 +48,7 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O
         this.context = this.canvas?.getContext('2d');
         this.buffer = new Uint8Array(this.analyser.fftSize);
 
-        if (this.context && this.canvas) {
-            const styles = getComputedStyle(this.element);
-
-            this.canvas.width = this.canvas.clientWidth;
-            this.canvas.height = this.canvas.clientHeight;
-            this.context.fillStyle = styles.getPropertyValue('--background-color');
-            this.context.lineCap = 'round';
-            this.context.lineWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH;
-            this.context.strokeStyle = styles.getPropertyValue('--bars-color');
-        }
-
+        this.updateCanvas(this.element.clientWidth, this.element.clientHeight);
         this.draw();
     }
 
@@ -77,6 +67,10 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O
             return;
         }
 
+        if (this.canvas.width !== this.element.clientWidth || this.canvas.height !== this.element.clientHeight) {
+            this.updateCanvas(this.element.clientWidth, this.element.clientHeight);
+        }
+
         const width = this.canvas.width;
         const height = this.canvas.height;
         const barsWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH;
@@ -157,4 +151,25 @@ export class CoreFileUploaderAudioHistogramComponent implements AfterViewInit, O
         }
     }
 
+    /**
+     * Set canvas element dimensions and configure styles.
+     *
+     * @param width Canvas width.
+     * @param height Canvas height.
+     */
+    private updateCanvas(width: number, height: number): void {
+        if (!this.canvas || !this.context) {
+            return;
+        }
+
+        const styles = getComputedStyle(this.element);
+
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.context.fillStyle = styles.getPropertyValue('--background-color');
+        this.context.lineCap = 'round';
+        this.context.lineWidth = CoreFileUploaderAudioHistogramComponent.BARS_WIDTH;
+        this.context.strokeStyle = styles.getPropertyValue('--bars-color');
+    }
+
 }