2 files changed, 17 insertions, 8 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 83cdf3574..fb16b8365 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -5,6 +5,11 @@
     display:flex;
     pointer-events: all;
     cursor:default;
+    .audiobox-buttons {
+        display: flex;
+        width: 100%;
+        align-items: center;
+    }
     .audiobox-handle {
         width:20px;
         height:100%;
@@ -24,13 +29,14 @@
         pointer-events: all;
         width:100%;
         height:100%;
-        position: absolute;
+        position: relative;
         pointer-events: none;
     }
     .audiobox-record-interactive {
         pointer-events: all;
         width:100%;
         height:100%;
+        position: relative;
     }
     .audiobox-controls {
         width:100%;
@@ -46,13 +52,18 @@
             position: relative;
             padding-right: 5px;
             display: flex;
-            .audiobox-playhead {
+            .audiobox-playhead, .audiobox-dictation {
                 position: relative;
                 margin-top: auto;
                 margin-bottom: auto;
                 width: 25px;
                 padding: 2px;
             }
+            .audiobox-dictation {
+                align-items: center;
+                display: inherit;
+                background: dimgray;
+            }
             .audiobox-timeline {
                 position:relative;
                 height:100%;
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 05b9fd14a..3c8b1c3b8 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -234,17 +234,15 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
         </audio>;
     }
 
-    // line 226 is stop button but it doesn't do anything 
     render() {
         const interactive = this.active() ? "-interactive" : "";
-        return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu}
-            onClick={!this.path ? this.recordClick : undefined}>
+        return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}>
             {!this.path ?
-                <div style={{ display: "flex", width: "100%", alignItems: "center" }}>
-                    <div className="audiobox-playhead" style={{ alignItems: "center", display: "inherit", background: "dimgray" }} onClick={this.onFile}>
+                <div className="audiobox-buttons">
+                    <div className="audiobox-dictation" onClick={this.onFile}>
                         <FontAwesomeIcon style={{ width: "30px", background: this.Document.playOnSelect ? "yellow" : "dimGray" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
                     </div>
-                    <button className={`audiobox-record${interactive}`} style={{ position: "relative", backgroundColor: this.audioState === "recording" ? "red" : "black" }}>
+                    <button className={`audiobox-record${interactive}`} style={{ backgroundColor: this.audioState === "recording" ? "red" : "black" }}>
                         {this.audioState === "recording" ? "STOP" : "RECORD"}
                     </button>
                 </div> :