From cab4f2e402460b48b4973828476a8fbe65d2f44c Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 6 Aug 2021 09:00:18 -0600
Subject: [PATCH 1/2] Move stop button to the left of the waveform

Fixes https://github.com/vector-im/element-web/issues/18416
---
 res/css/views/rooms/_VoiceRecordComposerTile.scss     |  2 +-
 .../views/rooms/VoiceRecordComposerTile.tsx           | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index 5d7e733213..a3e18a5a58 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -20,7 +20,7 @@ limitations under the License.
     height: 28px;
     border: 2px solid $voice-record-stop-border-color;
     border-radius: 32px;
-    margin-right: 16px; // between us and the send button
+    margin-right: 8px; // between us and the waveform component
     position: relative;
 
     &::after {
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 1b583444a3..e8befb90fa 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -215,7 +215,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
     }
 
     public render(): ReactNode {
-        let recordingInfo;
+        let stopOrRecordBtn;
         let deleteButton;
         if (!this.state.recordingPhase || this.state.recordingPhase === RecordingState.Started) {
             const classes = classNames({
@@ -229,7 +229,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
                 tooltip = _t("Stop recording");
             }
 
-            let stopOrRecordBtn = <AccessibleTooltipButton
+            stopOrRecordBtn = <AccessibleTooltipButton
                 className={classes}
                 onClick={this.onRecordStartEndClick}
                 title={tooltip}
@@ -237,8 +237,6 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             if (this.state.recorder && !this.state.recorder?.isRecording) {
                 stopOrRecordBtn = null;
             }
-
-            recordingInfo = stopOrRecordBtn;
         }
 
         if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
@@ -266,11 +264,14 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             </span>;
         }
 
+        // The record button (mic icon) is meant to be on the right edge, but we also want the
+        // stop button to be left of the waveform area. Luckily, none of the surrounding UI is
+        // rendered when we're not recording, so the record button ends up in the correct spot.
         return (<>
             { uploadIndicator }
             { deleteButton }
+            { stopOrRecordBtn }
             { this.renderWaveformArea() }
-            { recordingInfo }
         </>);
     }
 }

From fbe8f0494206dfe56053a8e2a1aee696f60b7fd2 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Fri, 6 Aug 2021 09:04:36 -0600
Subject: [PATCH 2/2] Fix height jump of recording states

Fixes https://github.com/vector-im/element-web/issues/18431
---
 res/css/views/rooms/_VoiceRecordComposerTile.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index a3e18a5a58..8196d5c67a 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -64,6 +64,10 @@ limitations under the License.
 .mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
     // Note: remaining class properties are in the PlayerContainer CSS.
 
+    // fixed height to reduce layout jumps with the play button appearing
+    // https://github.com/vector-im/element-web/issues/18431
+    height: 32px;
+
     margin: 6px; // force the composer area to put a gutter around us
     margin-right: 12px; // isolate from stop/send button
 
@@ -83,7 +87,7 @@ limitations under the License.
             height: 10px;
             position: absolute;
             left: 12px; // 12px from the left edge for container padding
-            top: 16px; // vertically center (middle align with clock)
+            top: 17px; // vertically center (middle align with clock)
             border-radius: 10px;
         }
     }