M: Improve focus cst label positioning

rsconcept/frontend/src/features/oss/dialogs/dlg-show-term-graph/tg-readonly-flow.tsx

@@ -100,11 +100,9 @@ export function TGReadonlyFlow({ schema }: TGReadonlyFlowProps) {
 
   return (
     <div className='relative w-full h-full flex flex-col'>
-      <div className='cc-tab-tools flex flex-col mt-2 items-center rounded-b-2xl backdrop-blur-xs'>
+      <div className='cc-tab-tools flex mt-2 items-start rounded-b-2xl backdrop-blur-xs'>
+        {focusCst ? <ToolbarFocusedCst focus={focusCst} resetFocus={() => setFocusCst(null)} /> : null}
         <ToolbarGraphFilter />
-        {focusCst ? (
-          <ToolbarFocusedCst className='-translate-x-9' focus={focusCst} resetFocus={() => setFocusCst(null)} />
-        ) : null}
       </div>
       <div className='absolute z-pop top-24 sm:top-16 left-2 sm:left-3 w-54 flex flex-col pointer-events-none'>
         <SelectColoring className='rounded-b-none' schema={schema} />

rsconcept/frontend/src/features/rsform/components/term-graph/toolbar-focused-cst.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import clsx from 'clsx';
+
 import { type IConstituenta } from '@/features/rsform/models/rsform';
 
 import { MiniButton } from '@/components/control';
@@ -20,14 +22,8 @@ export function ToolbarFocusedCst({ focus, resetFocus, className }: ToolbarFocus
   const toggleFocusOutputs = useTermGraphStore(state => state.toggleFocusOutputs);
 
   return (
-    <div className={cn('flex items-center cc-icons', className)}>
+    <div className={cn('grid', className)}>
-      <div className='w-31 mt-0.5 text-right select-none text-accent-purple-foreground'>
+      <div className='flex items-center cc-icons'>
-        <span>
-          Фокус
-          <b> {focus.alias} </b>
-        </span>
-      </div>
-
         <MiniButton
           title='Сбросить фокус'
           icon={<IconReset size='1.25rem' className='icon-primary' />}
@@ -44,5 +40,21 @@ export function ToolbarFocusedCst({ focus, resetFocus, className }: ToolbarFocus
           onClick={toggleFocusOutputs}
         />
       </div>
+      <div
+        className={clsx(
+          'translate-x-1/2',
+          'w-full text-right',
+          'px-1',
+          'select-none',
+          'hover:bg-background',
+          'text-accent-purple-foreground rounded-md'
+        )}
+      >
+        <span aria-label='Фокус-конституента' className='whitespace-nowrap'>
+          Фокус
+          <b> {focus.alias} </b>
+        </span>
+      </div>
+    </div>
   );
 }

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx

@@ -160,7 +160,7 @@ export function ToolbarTermGraph({ className }: ToolbarTermGraphProps) {
 
         <BadgeHelp topic={HelpTopic.UI_GRAPH_TERM} contentClass='sm:max-w-160' offset={4} />
       </div>
-      <div className='cc-icons items-center'>
+      <div className='cc-icons items-start'>
         {focusCst ? (
           <ToolbarFocusedCst
             focus={focusCst} //