Composer: the send price shows whole above the send button, and a lone button fills its plate

- The price of a paid message was cut off at the top and on the right: the
  composer's row has clipped everything since the rich-text composer, and the
  badge, which stands above the button, was centred over it and ran past the
  composer's end. The row now clips only across, and the badge stays centred
  while no wider than the button and ends flush with it past that, growing out
  of the button's middle either way, mirrored right to left.
- A control plate with nothing on either side (a lone Mute, Join or Unpin) kept
  the room of both side icons, so its button was narrower than the plate. Such a
  plate now drops its side slots and the button spans it; with one icon shown
  the slots stay symmetric as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: morethanwords

src/components/chat/controlPlate.tsx

@@ -8,6 +8,12 @@ import classNames from '@helpers/string/classNames';
  */
 export const CHAT_INPUT_PLATE_CLASS = 'chat-input-plate';
 
+/**
+ * A plate with nothing on either side for now: the side slots go and the centre
+ * spans the whole plate — they are kept only to balance an icon on one side.
+ */
+export const CHAT_INPUT_PLATE_SINGLE_CLASS = 'is-single';
+
 /**
  * Unified chat-input control plate.
  *
@@ -19,9 +25,10 @@ export const CHAT_INPUT_PLATE_CLASS = 'chat-input-plate';
  * The layout mirrors the topbar translation plate (`translation.tsx`): an
  * optional icon button on each side and a centered main button —
  * `Button.Icon + Button + Button.Icon`. The side slots reserve symmetric
- * space even when empty so the centre button always stays centred, which
+ * space even when one is empty so the centre button always stays centred, which
  * makes every plate exactly the same width as the message-input row. Plates
  * therefore cross-fade in place (opacity only) instead of morphing width.
+ * With both sides empty the plate takes `CHAT_INPUT_PLATE_SINGLE_CLASS`.
  */
 export default function ChatInputPlate(props: {
   class?: string,

src/components/chat/input.ts

@@ -35,7 +35,7 @@ import {
   InputMedia
 } from '@layer';
 import StickersHelper from '@components/chat/stickersHelper';
-import ChatInputPlate from '@components/chat/controlPlate';
+import ChatInputPlate, {CHAT_INPUT_PLATE_SINGLE_CLASS} from '@components/chat/controlPlate';
 import showSendGiftPopup from '@components/popups/sendGift';
 import ButtonIcon from '@components/buttonIcon';
 import ButtonMenuToggle from '@components/buttonMenuToggle';
@@ -556,6 +556,7 @@ export default class ChatInput {
   private channelMuteBtn: HTMLButtonElement;
   private directControlBtn: HTMLButtonElement;
   private giftControlBtn: HTMLButtonElement;
+  private controlPlate: HTMLElement;
   private rowsWrapperWrapper: HTMLDivElement;
   private controlContainer: HTMLElement;
   private fakeSelectionWrapper: HTMLDivElement;
@@ -1857,7 +1858,9 @@ export default class ChatInput {
     // The control container is now a single uniform-width plate:
     // Button.Icon + Button + Button.Icon (see controlPlate.tsx). All the
     // single-button states share the centre slot — only one is ever visible.
-    const controlPlate = ChatInputPlate({
+    // Both side buttons start hidden, so the centre one spans the plate.
+    const controlPlate = this.controlPlate = ChatInputPlate({
+      class: CHAT_INPUT_PLATE_SINGLE_CLASS,
       left: this.directControlBtn,
       right: this.giftControlBtn,
       center: [
@@ -3089,8 +3092,11 @@ export default class ChatInput {
         // has a linked direct-messages chat) on the left, gift on the right.
         // Both are channel-only — a gigagroup or megagroup join just shows the
         // centre button.
-        this.directControlBtn.classList.toggle('hide', !(good && channel?.linked_monoforum_id));
-        this.giftControlBtn.classList.toggle('hide', !(good && isBroadcast));
+        const hasDirect = !!(good && channel?.linked_monoforum_id);
+        const hasGift = good && isBroadcast;
+        this.directControlBtn.classList.toggle('hide', !hasDirect);
+        this.giftControlBtn.classList.toggle('hide', !hasGift);
+        this.controlPlate.classList.toggle(CHAT_INPUT_PLATE_SINGLE_CLASS, !hasDirect && !hasGift);
       }
 
       if(this.chat && this.welcomeLimitPlate) {

src/scss/partials/_chat.scss

@@ -746,6 +746,11 @@
     justify-content: center;
   }
 
+  // * nothing on either side (CHAT_INPUT_PLATE_SINGLE_CLASS): the centre spans the plate
+  &.is-single &-side {
+    display: none;
+  }
+
   &-button {
     width: 100%;
     max-width: 100%;
@@ -1014,7 +1019,8 @@
     --offset-translateX: 0px;
 		align-items: flex-end;
 		min-height: var(--chat-input-height);
-		overflow: hidden;
+		// * only across: the send price stands above the composer's top edge
+		overflow-x: clip;
 
     .new-message-bot-commands,
     .new-message-send-as-container {

src/scss/partials/_starsBadge.scss

@@ -25,13 +25,17 @@
 }
 
 .btn-send-stars-badge {
+  // * over the middle of the send button while no wider than it, flush with its end past that:
+  // * the composer ends right after the button (1.25rem is half the button)
+  --shift: min(50%, 1.25rem);
   top: 0;
-  left: 50%;
+  inset-inline-end: 50%;
 
   --scale: 0;
 
-  transform: translate(-50%, -11px) scale(var(--scale));
-  transform-origin: center 50px;
+  transform: translate(calc(var(--shift) * var(--reflect)), -11px) scale(var(--scale));
+  // * grows out of the button's middle
+  transform-origin: calc(50% + (50% - var(--shift)) * var(--reflect)) 50px;
   transition: transform 0.2s, opacity 0.2s;
 
   z-index: 4;