From eedc470f9af7aafd28c27fa6cf96e448dc7d45c4 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 4 Nov 2025 13:14:59 +0300
Subject: [PATCH] M: Improve focus cst label positioning

---
 .../dlg-show-term-graph/tg-readonly-flow.tsx  |  6 +--
 .../term-graph/toolbar-focused-cst.tsx        | 50 ++++++++++++-------
 .../editor-term-graph/toolbar-term-graph.tsx  |  2 +-
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/rsconcept/frontend/src/features/oss/dialogs/dlg-show-term-graph/tg-readonly-flow.tsx b/rsconcept/frontend/src/features/oss/dialogs/dlg-show-term-graph/tg-readonly-flow.tsx
index 1839c070..5ed7f704 100644
--- a/rsconcept/frontend/src/features/oss/dialogs/dlg-show-term-graph/tg-readonly-flow.tsx
+++ b/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} />
diff --git a/rsconcept/frontend/src/features/rsform/components/term-graph/toolbar-focused-cst.tsx b/rsconcept/frontend/src/features/rsform/components/term-graph/toolbar-focused-cst.tsx
index 2477a322..c9bcdb61 100644
--- a/rsconcept/frontend/src/features/rsform/components/term-graph/toolbar-focused-cst.tsx
+++ b/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,29 +22,39 @@ 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='w-31 mt-0.5 text-right select-none text-accent-purple-foreground'>
-        <span>
+    <div className={cn('grid', className)}>
+      <div className='flex items-center cc-icons'>
+        <MiniButton
+          title='Сбросить фокус'
+          icon={<IconReset size='1.25rem' className='icon-primary' />}
+          onClick={resetFocus}
+        />
+        <MiniButton
+          title={filter.focusShowInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
+          icon={<IconGraphInputs size='1.25rem' className={filter.focusShowInputs ? 'icon-green' : 'icon-primary'} />}
+          onClick={toggleFocusInputs}
+        />
+        <MiniButton
+          title={filter.focusShowOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
+          icon={<IconGraphOutputs size='1.25rem' className={filter.focusShowOutputs ? 'icon-green' : 'icon-primary'} />}
+          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>
-
-      <MiniButton
-        title='Сбросить фокус'
-        icon={<IconReset size='1.25rem' className='icon-primary' />}
-        onClick={resetFocus}
-      />
-      <MiniButton
-        title={filter.focusShowInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
-        icon={<IconGraphInputs size='1.25rem' className={filter.focusShowInputs ? 'icon-green' : 'icon-primary'} />}
-        onClick={toggleFocusInputs}
-      />
-      <MiniButton
-        title={filter.focusShowOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
-        icon={<IconGraphOutputs size='1.25rem' className={filter.focusShowOutputs ? 'icon-green' : 'icon-primary'} />}
-        onClick={toggleFocusOutputs}
-      />
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx
index 4a5f53a9..e47580df 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-term-graph.tsx
+++ b/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} //