Composer: Fix AI button position (#6882)

src/components/common/Composer.scss

@@ -418,28 +418,6 @@
   background: var(--color-background);
   box-shadow: 0 1px 2px var(--color-default-shadow);
 
-  .ai-composer-button {
-    position: absolute;
-    z-index: 1;
-    top: 0.4375rem;
-    right: 0.625rem;
-
-    width: 1.75rem;
-    height: 1.75rem;
-
-    color: var(--color-composer-button);
-
-    opacity: 1;
-
-    transition: opacity 150ms ease-out;
-  }
-
-  .ai-composer-button-hidden {
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 150ms ease-out;
-  }
-
   &.with-story-tweaks {
     border-radius: var(--border-radius-default-small);
     border-bottom-right-radius: 0;
@@ -475,8 +453,31 @@
   --action-button-size: var(--base-height, 3rem);
   --action-button-compact-fix: -0.75rem;
 
+  position: relative;
   display: flex;
 
+  .ai-composer-button {
+    position: absolute;
+    z-index: 1;
+    top: 0.4375rem;
+    right: 0.625rem;
+
+    width: 1.75rem;
+    height: 1.75rem;
+
+    color: var(--color-composer-button);
+
+    opacity: 1;
+
+    transition: opacity 150ms ease-out;
+  }
+
+  .ai-composer-button-hidden {
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease-out;
+  }
+
   .input-scroller {
     --_scroller-right-gap: calc((var(--action-button-size) + var(--action-button-compact-fix) - 0.125rem));
 

src/components/common/Composer.tsx

@@ -2256,17 +2256,6 @@ const Composer = ({
             </g>
           </svg>
         )}
-        <Button
-          round
-          faded
-          className={buildClassName('ai-composer-button', (!shouldShowAiButton
-            || hasAttachments) && 'ai-composer-button-hidden')}
-          color="translucent"
-          ariaLabel={lang('AiMessageEditor')}
-          iconName="ai"
-          tabIndex={shouldShowAiButton && !hasAttachments ? 0 : -1}
-          onClick={handleOpenAiEditor}
-        />
         {isInMessageList && (
           <>
             <InlineBotTooltip
@@ -2370,6 +2359,17 @@ const Composer = ({
               forceDarkTheme={isInStoryViewer}
             />
           )}
+          <Button
+            round
+            faded
+            className={buildClassName('ai-composer-button', (!shouldShowAiButton
+              || hasAttachments) && 'ai-composer-button-hidden')}
+            color="translucent"
+            ariaLabel={lang('AiMessageEditor')}
+            iconName="ai"
+            tabIndex={shouldShowAiButton && !hasAttachments ? 0 : -1}
+            onClick={handleOpenAiEditor}
+          />
           <MessageInput
             ref={inputRef}
             id={inputId}
@@ -2523,34 +2523,34 @@ const Composer = ({
               onClose={closeBotCommandMenu}
             />
           )}
-          <CustomEmojiTooltip
-            key={`custom-emoji-tooltip-${editableInputId}`}
-            chatId={chatId}
-            isOpen={isCustomEmojiTooltipOpen}
-            onCustomEmojiSelect={insertCustomEmoji}
-            addRecentCustomEmoji={addRecentCustomEmoji}
-            onClose={closeCustomEmojiTooltip}
-          />
-          <StickerTooltip
-            key={`sticker-tooltip-${editableInputId}`}
-            chatId={chatId}
-            threadId={threadId}
-            isOpen={isStickerTooltipOpen}
-            onStickerSelect={handleStickerSelect}
-            onClose={closeStickerTooltip}
-          />
-          <EmojiTooltip
-            key={`emoji-tooltip-${editableInputId}`}
-            isOpen={isEmojiTooltipOpen}
-            emojis={filteredEmojis}
-            customEmojis={filteredCustomEmojis}
-            addRecentEmoji={addRecentEmoji}
-            addRecentCustomEmoji={addRecentCustomEmoji}
-            onEmojiSelect={insertEmoji}
-            onCustomEmojiSelect={insertEmoji}
-            onClose={closeEmojiTooltip}
-          />
         </div>
+        <CustomEmojiTooltip
+          key={`custom-emoji-tooltip-${editableInputId}`}
+          chatId={chatId}
+          isOpen={isCustomEmojiTooltipOpen}
+          onCustomEmojiSelect={insertCustomEmoji}
+          addRecentCustomEmoji={addRecentCustomEmoji}
+          onClose={closeCustomEmojiTooltip}
+        />
+        <StickerTooltip
+          key={`sticker-tooltip-${editableInputId}`}
+          chatId={chatId}
+          threadId={threadId}
+          isOpen={isStickerTooltipOpen}
+          onStickerSelect={handleStickerSelect}
+          onClose={closeStickerTooltip}
+        />
+        <EmojiTooltip
+          key={`emoji-tooltip-${editableInputId}`}
+          isOpen={isEmojiTooltipOpen}
+          emojis={filteredEmojis}
+          customEmojis={filteredCustomEmojis}
+          addRecentEmoji={addRecentEmoji}
+          addRecentCustomEmoji={addRecentCustomEmoji}
+          onEmojiSelect={insertEmoji}
+          onCustomEmojiSelect={insertEmoji}
+          onClose={closeEmojiTooltip}
+        />
       </div>
       {canSendOneTimeMedia && activeVoiceRecording && (
         <Button

src/components/middle/composer/ComposerEmbeddedMessage.scss

@@ -49,7 +49,7 @@
 
     width: auto;
     height: 1.5rem;
-    margin: 0.5625rem 1rem 0.5625rem 0.75rem;
+    margin: 0.5625rem 0.6875rem 0.5625rem 0.75rem;
     padding: 0;
 
     color: var(--accent-color, var(--color-primary));

src/components/middle/composer/WebPagePreview.module.scss

@@ -47,7 +47,7 @@
 
   width: auto !important;
   height: 1.5rem;
-  margin: 0.5625rem 1rem 0.5625rem 0.75rem;
+  margin: 0.5625rem 0.6875rem 0.5625rem 0.75rem;
   padding: 0;
 
   color: var(--accent-color);