Move expand composition area button into a notch

stylesheets/_modules.scss

@@ -5023,6 +5023,10 @@
 
 // Module: CompositionArea
 .module-composition-area {
+  position: relative;
+  min-height: 48px;
+  padding-top: 12px;
+
   &__row {
     display: flex;
     flex-direction: row;
@@ -5038,18 +5042,6 @@
     &--column {
       flex-direction: column;
     }
-    &--show-on-focus {
-      opacity: 0;
-      transition: opacity 250ms ease-out;
-    }
-  }
-
-  $this: &;
-  &:focus-within,
-  &:hover {
-    #{$this}__row--show-on-focus {
-      opacity: 1;
-    }
   }
 
   &__button-cell {
@@ -5087,7 +5079,31 @@
   &__input {
     flex-grow: 1;
   }
+  $comp-area: &;
   &__toggle-large {
+    width: 48px;
+    height: 24px;
+    position: absolute;
+    left: calc(50% - 24px);
+    top: -24px;
+    border-radius: 12px 12px 0 0;
+
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+
+    #{$comp-area}:hover & {
+      opacity: 1;
+    }
+
+    @include light-theme() {
+      background-color: $color-white;
+    }
+
+    @include dark-theme() {
+      background-color: $color-gray-95;
+    }
+
+    &__button {
       width: 48px;
       height: 24px;
       border: none;
@@ -5118,6 +5134,7 @@
         }
       }
     }
+  }
   &__attachment-list {
     width: 100%;
   }

ts/components/CompositionArea.tsx

@@ -300,17 +300,13 @@ export const CompositionArea = ({
 
   return (
     <div className="module-composition-area">
-      <div
-        className={classNames(
-          'module-composition-area__row',
-          'module-composition-area__row--center',
-          'module-composition-area__row--show-on-focus'
-        )}
-      >
+      <div className="module-composition-area__toggle-large">
         <button
           className={classNames(
-            'module-composition-area__toggle-large',
-            large ? 'module-composition-area__toggle-large--large-active' : null
+            'module-composition-area__toggle-large__button',
+            large
+              ? 'module-composition-area__toggle-large__button--large-active'
+              : null
           )}
           onClick={handleToggleLarge}
         />