@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/chat/sender/@components/permission-mode-control/PermissionModeControl.tsx

@@ -0,0 +1,172 @@
+import './PermissionModeControl.scss'
+
+import { Popover } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
+
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../../@types/sender-toolbar-types'
+import { permissionModeIconMap } from '../../@utils/sender-constants'
+
+export function PermissionModeControl({
+  state,
+  data,
+  refs,
+  handlers
+}: {
+  state: Pick<
+    SenderToolbarState,
+    'showPermissionActions' | 'permissionMode' | 'canOpenReferenceActions' | 'isMac'
+  >
+  data: Pick<SenderToolbarData, 'permissionModeOptions' | 'composerControlShortcuts'>
+  refs: Pick<SenderToolbarRefs, 'permissionMenuNavigation'>
+  handlers: Pick<
+    SenderToolbarHandlers,
+    | 'onPermissionOpenChange'
+    | 'onPermissionMenuKeyDown'
+    | 'onSelectPermissionMode'
+  >
+}) {
+  const { t } = useTranslation()
+  const { showPermissionActions, permissionMode, canOpenReferenceActions, isMac } = state
+  const { permissionModeOptions, composerControlShortcuts } = data
+  const { permissionMenuNavigation } = refs
+  const { onPermissionOpenChange, onPermissionMenuKeyDown, onSelectPermissionMode } = handlers
+  const selectedPermissionOption = permissionModeOptions.find(option => option.value === permissionMode)
+
+  const focusSelectedPermission = () => {
+    permissionMenuNavigation.setActiveKey(permissionMode)
+    window.requestAnimationFrame(() => {
+      permissionMenuNavigation.focusKey(permissionMenuNavigation.activeKey ?? permissionMode)
+    })
+  }
+
+  return (
+    <Popover
+      content={
+        <div className='sender-permission-menu' role='menu' aria-label={t('chat.referencePermission')}>
+          {permissionModeOptions.map(option => (
+            <button
+              key={option.value}
+              ref={permissionMenuNavigation.registerItem(option.value)}
+              type='button'
+              role='menuitemradio'
+              aria-checked={permissionMode === option.value}
+              className={[
+                'sender-permission-menu__item',
+                `sender-permission-menu__item--${option.value}`,
+                permissionMode === option.value ? 'is-selected' : ''
+              ].filter(Boolean).join(' ')}
+              onMouseEnter={() => permissionMenuNavigation.setActiveKey(option.value)}
+              onFocus={() => permissionMenuNavigation.setActiveKey(option.value)}
+              onKeyDown={(event) => onPermissionMenuKeyDown(event, option.value)}
+              onClick={() => {
+                onSelectPermissionMode(option.value)
+              }}
+            >
+              <span className='sender-permission-menu__option'>
+                <span
+                  className={[
+                    'material-symbols-rounded',
+                    'sender-permission-menu__icon',
+                    `sender-permission-menu__icon--${option.value}`
+                  ].join(' ')}
+                >
+                  {permissionModeIconMap[option.value]}
+                </span>
+                <span className='sender-permission-menu__text'>{option.label}</span>
+                {permissionMode === option.value && (
+                  <span className='material-symbols-rounded sender-permission-menu__check'>check</span>
+                )}
+              </span>
+            </button>
+          ))}
+        </div>
+      }
+      open={showPermissionActions}
+      onOpenChange={(nextOpen) => {
+        onPermissionOpenChange(nextOpen)
+        if (nextOpen) {
+          focusSelectedPermission()
+        }
+      }}
+      placement='bottomRight'
+      trigger='click'
+      classNames={{ root: 'sender-permission-popover' }}
+      destroyOnHidden
+      arrow={false}
+    >
+      <ShortcutTooltip
+        shortcut={composerControlShortcuts.switchPermissionMode}
+        isMac={isMac}
+        title={t('chat.referencePermission')}
+        enabled={!showPermissionActions}
+      >
+        <button
+          type='button'
+          className={[
+            'sender-permission-trigger',
+            `sender-permission-trigger--${permissionMode}`,
+            showPermissionActions ? 'is-open' : ''
+          ].filter(Boolean).join(' ')}
+          aria-label={t('chat.referencePermission')}
+          aria-haspopup='menu'
+          aria-expanded={showPermissionActions}
+          onClick={canOpenReferenceActions
+            ? undefined
+            : (event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              onPermissionOpenChange(true)
+            }}
+          onKeyDown={(event) => {
+            const isActivationKey = event.key === 'Enter' || event.key === ' '
+            const isOpenKey = event.key === 'ArrowDown' || event.key === 'ArrowUp'
+
+            if (isActivationKey || isOpenKey) {
+              event.preventDefault()
+              event.stopPropagation()
+              if (!showPermissionActions) {
+                onPermissionOpenChange(true)
+              }
+              focusSelectedPermission()
+              return
+            }
+
+            if (event.key === 'Escape' && showPermissionActions) {
+              event.preventDefault()
+              event.stopPropagation()
+              onPermissionOpenChange(false)
+            }
+          }}
+        >
+          <span
+            className={[
+              'material-symbols-rounded',
+              'sender-permission-trigger__icon',
+              `sender-permission-trigger__icon--${permissionMode}`
+            ].join(' ')}
+          >
+            {permissionModeIconMap[permissionMode]}
+          </span>
+          <span className='sender-permission-trigger__copy'>
+            <span
+              className={[
+                'sender-permission-trigger__value',
+                `sender-permission-trigger__value--${permissionMode}`
+              ].join(' ')}
+            >
+              {selectedPermissionOption?.label ?? t('chat.referencePermission')}
+            </span>
+          </span>
+          <span className='material-symbols-rounded sender-permission-trigger__chevron'>expand_more</span>
+        </button>
+      </ShortcutTooltip>
+    </Popover>
+  )
+}

package/src/components/chat/sender/@components/reference-actions/ReferenceActionsControl.scss

@@ -38,8 +38,7 @@
   }
 }
 
-.reference-actions-popover,
-.reference-actions-submenu-popover {
+.reference-actions-popover {
   .ant-popover-inner {
     padding: 6px !important;
     background: var(--bg-color);
@@ -60,14 +59,6 @@
   line-height: 1.3333;
 }
 
-.reference-actions-menu--submenu {
-  min-width: 168px;
-
-  .reference-action-option {
-    gap: 8px;
-  }
-}
-
 .reference-actions-menu-item {
   width: 100%;
   min-height: 32px;

package/src/components/chat/sender/@components/reference-actions/ReferenceActionsControl.tsx

@@ -4,19 +4,10 @@ import './ReferenceActionsOption.scss'
 import { Popover } from 'antd'
 import { useTranslation } from 'react-i18next'
 
-import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
-
-import type {
-  SenderToolbarData,
-  SenderToolbarHandlers,
-  SenderToolbarRefs,
-  SenderToolbarState
-} from '../../@types/sender-toolbar-types'
-import { ReferencePermissionActionsPopover } from './ReferencePermissionActionsPopover'
+import type { SenderToolbarHandlers, SenderToolbarRefs, SenderToolbarState } from '../../@types/sender-toolbar-types'
 
 export function ReferenceActionsControl({
   state,
-  data,
   refs,
   handlers
 }: {
@@ -25,43 +16,25 @@ export function ReferenceActionsControl({
     | 'isInlineEdit'
     | 'canOpenReferenceActions'
     | 'showReferenceActions'
-    | 'showPermissionActions'
-    | 'permissionMode'
-    | 'isMac'
   >
-  data: Pick<SenderToolbarData, 'permissionModeOptions' | 'composerControlShortcuts'>
-  refs: Pick<SenderToolbarRefs, 'referenceMenuNavigation' | 'permissionMenuNavigation'>
+  refs: Pick<SenderToolbarRefs, 'referenceMenuNavigation'>
   handlers: Pick<
     SenderToolbarHandlers,
     | 'onReferenceOpenChange'
-    | 'onShowPermissionActionsChange'
     | 'onOpenContextPicker'
     | 'onReferenceImageSelect'
     | 'onReferenceMenuKeyDown'
-    | 'onPermissionMenuKeyDown'
-    | 'onSelectPermissionMode'
     | 'onCloseReferenceActions'
   >
 }) {
   const { t } = useTranslation()
-  const {
-    isInlineEdit,
-    canOpenReferenceActions,
-    showReferenceActions,
-    showPermissionActions,
-    permissionMode,
-    isMac
-  } = state
-  const { permissionModeOptions, composerControlShortcuts } = data
-  const { referenceMenuNavigation, permissionMenuNavigation } = refs
+  const { isInlineEdit, canOpenReferenceActions, showReferenceActions } = state
+  const { referenceMenuNavigation } = refs
   const {
     onReferenceOpenChange,
-    onShowPermissionActionsChange,
     onOpenContextPicker,
     onReferenceImageSelect,
     onReferenceMenuKeyDown,
-    onPermissionMenuKeyDown,
-    onSelectPermissionMode,
     onCloseReferenceActions
   } = handlers
 
@@ -75,7 +48,6 @@ export function ReferenceActionsControl({
             className='reference-actions-menu-item'
             onMouseEnter={() => {
               referenceMenuNavigation.setActiveKey('image')
-              onShowPermissionActionsChange(false)
             }}
             onFocus={() => referenceMenuNavigation.setActiveKey('image')}
             onKeyDown={(event) => onReferenceMenuKeyDown(event, 'image')}
@@ -93,7 +65,6 @@ export function ReferenceActionsControl({
               className='reference-actions-menu-item'
               onMouseEnter={() => {
                 referenceMenuNavigation.setActiveKey('file')
-                onShowPermissionActionsChange(false)
               }}
               onFocus={() => referenceMenuNavigation.setActiveKey('file')}
               onKeyDown={(event) => onReferenceMenuKeyDown(event, 'file')}
@@ -108,19 +79,6 @@ export function ReferenceActionsControl({
               </span>
             </button>
           )}
-          {!isInlineEdit && permissionModeOptions.length > 0 && (
-            <ReferencePermissionActionsPopover
-              state={{ showReferenceActions, showPermissionActions, permissionMode }}
-              data={{ permissionModeOptions }}
-              refs={{ referenceMenuNavigation, permissionMenuNavigation }}
-              handlers={{
-                onShowPermissionActionsChange,
-                onReferenceMenuKeyDown,
-                onPermissionMenuKeyDown,
-                onSelectPermissionMode
-              }}
-            />
-          )}
         </div>
       }
       open={showReferenceActions}
@@ -131,26 +89,19 @@ export function ReferenceActionsControl({
       destroyOnHidden
       arrow={false}
     >
-      <ShortcutTooltip
-        shortcut={composerControlShortcuts.switchPermissionMode}
-        isMac={isMac}
-        title={t('chat.referenceActionsShortcutTooltip')}
-        enabled={!showReferenceActions}
+      <div
+        className={`toolbar-btn toolbar-btn--reference ${showReferenceActions ? 'active' : ''}`.trim()}
+        tabIndex={-1}
+        onClick={canOpenReferenceActions ? undefined : (event) => {
+          event.preventDefault()
+          void onReferenceOpenChange(true)
+        }}
       >
-        <div
-          className={`toolbar-btn toolbar-btn--reference ${showReferenceActions ? 'active' : ''}`.trim()}
-          tabIndex={-1}
-          onClick={canOpenReferenceActions ? undefined : (event) => {
-            event.preventDefault()
-            void onReferenceOpenChange(true)
-          }}
-        >
-          <span className='toolbar-btn__icon-shell'>
-            <span className='material-symbols-rounded'>add</span>
-          </span>
-          <span className='toolbar-btn__text'>{t('chat.referenceActionsShort')}</span>
-        </div>
-      </ShortcutTooltip>
+        <span className='toolbar-btn__icon-shell'>
+          <span className='material-symbols-rounded'>add</span>
+        </span>
+        <span className='toolbar-btn__text'>{t('chat.referenceActionsShort')}</span>
+      </div>
     </Popover>
   )
 }

package/src/components/chat/sender/@components/sender-body/SenderBody.tsx

@@ -14,8 +14,10 @@ import type {
 
 import type { PendingContextFile } from '../../@types/sender-composer'
 import type { SenderEditorHandle } from '../../@types/sender-editor'
+import type { SenderProps } from '../../@types/sender-props'
 import type { SenderCompletionMatch, SenderTokenDecoration } from '../../@utils/sender-completion'
 import { SenderAttachments } from '../sender-attachments/SenderAttachments'
+import { SenderHeaderControls } from '../sender-header-controls/SenderHeaderControls'
 import { SenderMonacoEditor } from '../sender-monaco-editor/SenderMonacoEditor'
 import { SenderToolbar } from '../sender-toolbar/SenderToolbar'
 
@@ -44,6 +46,7 @@ export function SenderBody({
   toolbarData,
   toolbarRefs,
   toolbarHandlers,
+  sessionTarget,
   showContextPicker,
   onCancelContextPicker,
   onConfirmContextPicker
@@ -76,6 +79,7 @@ export function SenderBody({
   toolbarData: SenderToolbarData
   toolbarRefs: SenderToolbarRefs
   toolbarHandlers: SenderToolbarHandlers
+  sessionTarget?: SenderProps['sessionTarget']
   showContextPicker: boolean
   onCancelContextPicker: () => void
   onConfirmContextPicker: (files: PendingContextFile[]) => void
@@ -84,6 +88,14 @@ export function SenderBody({
 
   return (
     <div className={`chat-input-container ${isInlineEdit ? 'chat-input-container--inline-edit' : ''}`.trim()}>
+      <SenderHeaderControls
+        isInlineEdit={isInlineEdit}
+        sessionTarget={sessionTarget}
+        toolbarState={toolbarState}
+        toolbarData={toolbarData}
+        toolbarRefs={toolbarRefs}
+        toolbarHandlers={toolbarHandlers}
+      />
       <SenderAttachments
         pendingImages={pendingImages}
         pendingFiles={pendingFiles}
@@ -97,7 +109,7 @@ export function SenderBody({
         placeholder={placeholder || t('chat.inputPlaceholder')}
         disabled={(!isInlineEdit && modelUnavailable) || (isInlineEdit && isBusy)}
         sendShortcut={toolbarState.resolvedSendShortcut}
-        sendShortcutDisabled={toolbarState.sendBlocked}
+        sendShortcutDisabled={toolbarState.sendBlocked || toolbarState.hideSubmitAction}
         onSendShortcut={toolbarHandlers.onSend}
         secondarySendShortcut={secondarySendShortcut}
         onSecondarySendShortcut={onSecondarySendShortcut}

package/src/components/chat/sender/@components/sender-header-controls/SenderHeaderControls.tsx

@@ -0,0 +1,157 @@
+import { Tooltip } from 'antd'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useSenderHeaderQueryState } from '#~/hooks/use-sender-header-query-state.js'
+
+import type { SenderProps } from '../../@types/sender-props'
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../../@types/sender-toolbar-types'
+import { permissionModeIconMap } from '../../@utils/sender-constants'
+import { PermissionModeControl } from '../permission-mode-control/PermissionModeControl'
+import { SenderSessionTargetBar } from '../session-target/SenderSessionTargetBar'
+
+export function SenderHeaderControls({
+  isInlineEdit,
+  sessionTarget,
+  toolbarState,
+  toolbarData,
+  toolbarRefs,
+  toolbarHandlers
+}: {
+  isInlineEdit: boolean
+  sessionTarget?: SenderProps['sessionTarget']
+  toolbarState: SenderToolbarState
+  toolbarData: SenderToolbarData
+  toolbarRefs: SenderToolbarRefs
+  toolbarHandlers: SenderToolbarHandlers
+}) {
+  const { t } = useTranslation()
+  const { isHeaderCollapsed, setHeaderCollapsed } = useSenderHeaderQueryState()
+  const showPermissionControl = !isInlineEdit && toolbarData.permissionModeOptions.length > 0
+  const hasHeaderControls = !isInlineEdit && (sessionTarget != null || showPermissionControl)
+  const headerStateClass = isHeaderCollapsed ? 'is-collapsed' : 'is-expanded'
+  const selectedPermissionOption = toolbarData.permissionModeOptions.find(
+    option => option.value === toolbarState.permissionMode
+  )
+
+  useEffect(() => {
+    if (isHeaderCollapsed && toolbarState.showPermissionActions) {
+      setHeaderCollapsed(false)
+    }
+  }, [isHeaderCollapsed, setHeaderCollapsed, toolbarState.showPermissionActions])
+
+  if (!hasHeaderControls) {
+    return null
+  }
+
+  const permissionControl = showPermissionControl
+    ? (
+      <PermissionModeControl
+        state={{
+          showPermissionActions: toolbarState.showPermissionActions,
+          permissionMode: toolbarState.permissionMode,
+          canOpenReferenceActions: toolbarState.canOpenReferenceActions,
+          isMac: toolbarState.isMac
+        }}
+        data={{
+          permissionModeOptions: toolbarData.permissionModeOptions,
+          composerControlShortcuts: toolbarData.composerControlShortcuts
+        }}
+        refs={{ permissionMenuNavigation: toolbarRefs.permissionMenuNavigation }}
+        handlers={{
+          onPermissionOpenChange: toolbarHandlers.onPermissionOpenChange,
+          onPermissionMenuKeyDown: toolbarHandlers.onPermissionMenuKeyDown,
+          onSelectPermissionMode: toolbarHandlers.onSelectPermissionMode
+        }}
+      />
+    )
+    : null
+
+  const headerActions = (
+    <div className='chat-input-header-actions'>
+      {permissionControl}
+    </div>
+  )
+
+  const toggleHeader = () => {
+    if (!isHeaderCollapsed) {
+      toolbarHandlers.onPermissionOpenChange(false)
+    }
+    setHeaderCollapsed(!isHeaderCollapsed)
+  }
+
+  const headerToggle = (
+    <div className={`chat-input-header-toggle-shell ${headerStateClass}`.trim()}>
+      {showPermissionControl && isHeaderCollapsed && (
+        <Tooltip
+          title={selectedPermissionOption?.label ?? t('chat.referencePermission')}
+          placement='top'
+          destroyOnHidden
+        >
+          <div
+            className={[
+              'chat-input-header-toggle-mode-indicator',
+              `chat-input-header-toggle-mode-indicator--${toolbarState.permissionMode}`
+            ].join(' ')}
+            aria-label={selectedPermissionOption?.label?.toString() ?? t('chat.referencePermission')}
+          >
+            <span
+              className={[
+                'material-symbols-rounded',
+                'chat-input-header-toggle-mode-icon',
+                `sender-permission-trigger__icon--${toolbarState.permissionMode}`
+              ].join(' ')}
+            >
+              {permissionModeIconMap[toolbarState.permissionMode]}
+            </span>
+          </div>
+        </Tooltip>
+      )}
+      <button
+        type='button'
+        className='chat-input-header-toggle-tab'
+        aria-label={isHeaderCollapsed ? t('chat.expandHeaderControls') : t('chat.collapseHeaderControls')}
+        aria-expanded={!isHeaderCollapsed}
+        onClick={toggleHeader}
+      >
+        <span className='material-symbols-rounded'>
+          {isHeaderCollapsed ? 'unfold_more' : 'unfold_less'}
+        </span>
+      </button>
+    </div>
+  )
+
+  if (sessionTarget != null) {
+    return (
+      <>
+        <SenderSessionTargetBar
+          draft={sessionTarget.draft}
+          locked={sessionTarget.locked}
+          disabled={sessionTarget.disabled}
+          onChange={sessionTarget.onChange}
+          actions={headerActions}
+          className={`chat-input-header-block ${headerStateClass}`.trim()}
+          ariaHidden={isHeaderCollapsed}
+        />
+        {headerToggle}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className={`chat-input-top-actions chat-input-header-block ${headerStateClass}`.trim()}
+        aria-hidden={isHeaderCollapsed}
+      >
+        {headerActions}
+      </div>
+      {headerToggle}
+    </>
+  )
+}

package/src/components/chat/sender/@components/sender-monaco-editor/monaco-runtime.ts

@@ -1,32 +1,16 @@
-import { loader } from '@monaco-editor/react'
 import type { IRange, editor as MonacoEditorNamespace, languages } from 'monaco-editor'
-import * as monacoApi from 'monaco-editor'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 
 import type { SessionInfo } from '@vibe-forge/types'
 
 import type { SenderEditorSelection } from '#~/components/chat/sender/@types/sender-editor'
 import type { SenderCompletionMatch } from '#~/components/chat/sender/@utils/sender-completion'
+import { monacoApi } from '#~/components/monaco/monaco-runtime'
 
 export const FONT_SIZE = 13
 export const LINE_HEIGHT = 20
 export const MIN_EDITOR_HEIGHT = LINE_HEIGHT
 export const MAX_EDITOR_HEIGHT = LINE_HEIGHT * 10
 
-const monacoRuntime = globalThis as typeof globalThis & {
-  MonacoEnvironment?: {
-    getWorker: () => Worker
-  }
-}
-
-if (monacoRuntime.MonacoEnvironment == null) {
-  monacoRuntime.MonacoEnvironment = {
-    getWorker: () => new EditorWorker()
-  }
-}
-
-loader.config({ monaco: monacoApi })
-
 export const clampEditorHeight = (height: number) =>
   Math.min(MAX_EDITOR_HEIGHT, Math.max(MIN_EDITOR_HEIGHT, Math.ceil(height)))
 

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectBase.scss

@@ -1,5 +1,8 @@
 .model-select,
-.effort-select {
+.effort-select,
+.account-select {
+  min-width: 0;
+
   .ant-select-selection-search-input {
     height: 100% !important;
   }
@@ -31,12 +34,24 @@
   }
 
   &.ant-select-single .ant-select-selector {
+    flex: 1 1 auto;
+    min-width: 0;
     padding-left: 8px !important;
     padding-right: 0 !important;
     padding-inline-start: 8px !important;
     padding-inline-end: 0 !important;
   }
 
+  .ant-select-selector {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ant-select-selection-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   &.ant-select-single .ant-select-selector .ant-select-selection-item,
   &.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
     display: inline-flex !important;
@@ -72,7 +87,8 @@
 
 @media (max-width: 960px) {
   .model-select,
-  .effort-select {
+  .effort-select,
+  .account-select {
     .ant-select-arrow {
       width: 20px;
       min-width: 20px;

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectShared.scss

@@ -11,7 +11,8 @@
 
   &:hover {
     .model-select,
-    .effort-select {
+    .effort-select,
+    .account-select {
       background: var(--sender-control-hover-bg);
       color: var(--sender-control-hover-color);
     }
@@ -19,6 +20,9 @@
     .model-select .ant-select-selection-item,
     .model-select .ant-select-selection-placeholder,
     .model-select .sender-select-arrow,
+    .account-select .ant-select-selection-item,
+    .account-select .ant-select-selection-placeholder,
+    .account-select .sender-select-arrow,
     .effort-select .ant-select-selection-item,
     .effort-select .ant-select-selection-placeholder,
     .effort-select .effort-option__text,
@@ -41,6 +45,17 @@
   }
 }
 
+.sender-select-shell--compact {
+  .sender-select-body-trigger {
+    inset: 0;
+  }
+
+  .ant-select-arrow,
+  .sender-select-arrow {
+    display: none !important;
+  }
+}
+
 .sender-select-body-trigger {
   position: absolute;
   inset: 0 28px 0 0;
@@ -69,6 +84,7 @@
 
 .model-select,
 .effort-select,
+.account-select,
 .adapter-select {
   height: var(--sender-control-height);
   display: inline-flex;
@@ -124,6 +140,7 @@
 
   .model-select,
   .effort-select,
+  .account-select,
   .adapter-select {
     font-size: 11px;
 

package/src/components/chat/sender/@components/sender-toolbar/SenderToolbar.scss

@@ -31,6 +31,7 @@
     gap: 4px;
     flex-shrink: 0;
     min-width: 0;
+    justify-content: flex-end;
   }
 
   .toolbar-right--inline-edit {
@@ -113,6 +114,7 @@
       gap: 6px;
       margin-left: auto;
       max-width: 100%;
+      justify-content: flex-end;
     }
 
     .toolbar-btn__text {