From 48e210c9b2cb8d316217a652ad5e4f41148a8987 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Thu, 27 Jul 2023 22:36:14 -0400
Subject: [PATCH] Aligns edit buttons with emoji picker

---
 stylesheets/components/CompositionArea.scss | 4 ++++
 ts/components/CompositionArea.tsx           | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss
index 533cb0159751..9db638ea13ca 100644
--- a/stylesheets/components/CompositionArea.scss
+++ b/stylesheets/components/CompositionArea.scss
@@ -51,6 +51,10 @@
     }
   }
 
+  &__button-edit {
+    margin-bottom: 4px;
+  }
+
   &__edit-button {
     @include button-reset;
     @include rounded-corners;
diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
index 6335138b8915..f721b8b37bb3 100644
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@@ -569,7 +569,7 @@ export function CompositionArea({
   const editMessageFragment = draftEditMessage ? (
     <>
       {large && <div className="CompositionArea__placeholder" />}
-      <div className="CompositionArea__button-cell">
+      <div className="CompositionArea__button-cell CompositionArea__button-edit">
         <button
           aria-label={i18n('icu:CompositionArea__edit-action--discard')}
           className="CompositionArea__edit-button CompositionArea__edit-button--discard"