From 81fa0c57966d6b9324b10fcb85e0a265af774f2b Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 7 Mar 2025 20:38:40 +0300
Subject: [PATCH] F: Refactor z-index and stacking

---
 .../src/components/Container/Overlay.tsx      |  7 +-
 .../src/components/Container/Tooltip.tsx      |  1 +
 .../src/components/Dropdown/Dropdown.tsx      |  1 +
 .../src/components/Input/SearchBar.tsx        | 11 +--
 .../src/components/Input/SelectTree.tsx       | 17 ++--
 .../src/components/Modal/ModalBackdrop.tsx    |  4 +-
 .../src/components/Modal/ModalForm.tsx        | 23 +++--
 .../src/components/Modal/ModalLoader.tsx      |  6 +-
 .../src/components/Modal/ModalView.tsx        | 21 ++---
 .../features/help/components/BadgeHelp.tsx    |  8 +-
 .../help/pages/ManualsPage/TopicsDropdown.tsx |  2 +-
 .../library/components/EditorLibraryItem.tsx  | 34 ++++----
 .../library/components/PickSchema.tsx         |  2 +-
 .../components/SelectLocationContext.tsx      |  2 +-
 .../library/components/SelectLocationHead.tsx |  2 +-
 .../library/components/ToolbarItemAccess.tsx  |  2 +-
 .../library/dialogs/DlgCloneLibraryItem.tsx   |  2 +-
 .../pages/CreateItemPage/FormCreateItem.tsx   |  8 +-
 .../library/pages/LibraryPage/LibraryPage.tsx | 15 +---
 .../pages/LibraryPage/ToolbarSearch.tsx       |  2 +-
 .../pages/OssPage/EditorOssCard/FormOSS.tsx   |  2 +-
 .../pages/OssPage/EditorOssGraph/OssFlow.tsx  |  2 +-
 .../OssPage/EditorOssGraph/graph/NodeCore.tsx | 40 ++++-----
 .../features/oss/pages/OssPage/OssTabs.tsx    | 23 +++--
 .../rsform/dialogs/DlgShowAST/DlgShowAST.tsx  | 10 +--
 .../EditorConstituenta/EditorConstituenta.tsx | 74 ++++++-----------
 .../EditorConstituenta/EditorControls.tsx     |  2 +-
 .../EditorConstituenta/FormConstituenta.tsx   | 27 ++++--
 .../EditorRSExpression/EditorRSExpression.tsx | 27 ++----
 .../EditorRSExpression/StatusBar.tsx          | 66 ++++++++-------
 .../EditorRSFormCard/EditorRSFormCard.tsx     | 32 +++----
 .../EditorRSFormCard/FormRSForm.tsx           |  2 +-
 .../RSFormPage/EditorRSList/EditorRSList.tsx  | 65 +++++++--------
 .../EditorTermGraph/GraphSelectors.tsx        |  2 +-
 .../EditorTermGraph/SchemasGuide.tsx          |  1 -
 .../RSFormPage/EditorTermGraph/ViewHidden.tsx | 21 +++--
 .../rsform/pages/RSFormPage/RSTabs.tsx        | 83 ++++++++++---------
 .../users/pages/RegisterPage/FormSignup.tsx   | 18 ++--
 rsconcept/frontend/src/index.css              |  2 -
 39 files changed, 317 insertions(+), 352 deletions(-)

diff --git a/rsconcept/frontend/src/components/Container/Overlay.tsx b/rsconcept/frontend/src/components/Container/Overlay.tsx
index 2e0083c4..f816675d 100644
--- a/rsconcept/frontend/src/components/Container/Overlay.tsx
+++ b/rsconcept/frontend/src/components/Container/Overlay.tsx
@@ -15,6 +15,7 @@ interface OverlayProps extends Styling {
 
 /**
  * Displays a transparent overlay over the main content.
+ * Note: Overlay should be inside a relative container.
  */
 export function Overlay({
   children,
@@ -24,10 +25,8 @@ export function Overlay({
   ...restProps
 }: React.PropsWithChildren<OverlayProps>) {
   return (
-    <div className='relative'>
-      <div className={clsx('absolute', className, position, layer)} {...restProps}>
-        {children}
-      </div>
+    <div className={clsx('absolute', className, position, layer)} {...restProps}>
+      {children}
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/components/Container/Tooltip.tsx b/rsconcept/frontend/src/components/Container/Tooltip.tsx
index c45988e4..d76fd948 100644
--- a/rsconcept/frontend/src/components/Container/Tooltip.tsx
+++ b/rsconcept/frontend/src/components/Container/Tooltip.tsx
@@ -39,6 +39,7 @@ export function Tooltip({
       delayHide={100}
       opacity={1}
       className={clsx(
+        'relative',
         'max-h-[calc(100svh-6rem)]',
         'overflow-y-auto overflow-x-hidden sm:overflow-hidden overscroll-contain',
         'border shadow-md',
diff --git a/rsconcept/frontend/src/components/Dropdown/Dropdown.tsx b/rsconcept/frontend/src/components/Dropdown/Dropdown.tsx
index 8250e1d6..63c5f004 100644
--- a/rsconcept/frontend/src/components/Dropdown/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/Dropdown/Dropdown.tsx
@@ -23,6 +23,7 @@ interface DropdownProps extends Styling {
 
 /**
  *  Animated list of children with optional positioning and visibility control.
+ *  Note: Dropdown should be inside a relative container.
  */
 export function Dropdown({
   isOpen,
diff --git a/rsconcept/frontend/src/components/Input/SearchBar.tsx b/rsconcept/frontend/src/components/Input/SearchBar.tsx
index 6c364244..aeada2ed 100644
--- a/rsconcept/frontend/src/components/Input/SearchBar.tsx
+++ b/rsconcept/frontend/src/components/Input/SearchBar.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 
-import { Overlay } from '@/components/Container';
 import { IconSearch } from '@/components/Icons';
 import { type Styling } from '@/components/props';
 
@@ -35,15 +34,17 @@ export function SearchBar({
   noIcon,
   onChangeQuery,
   noBorder,
+  className,
   placeholder = 'Поиск',
   ...restProps
 }: SearchBarProps) {
   return (
-    <div {...restProps}>
+    <div className={clsx('relative', className)} {...restProps}>
       {!noIcon ? (
-        <Overlay position='top-[-0.125rem] left-3 translate-y-1/2' className='pointer-events-none clr-text-controls'>
-          <IconSearch size='1.25rem' />
-        </Overlay>
+        <IconSearch
+          className='absolute top-[-0.125rem] left-3 translate-y-1/2 pointer-events-none clr-text-controls'
+          size='1.25rem'
+        />
       ) : null}
       <TextInput
         id={id}
diff --git a/rsconcept/frontend/src/components/Input/SelectTree.tsx b/rsconcept/frontend/src/components/Input/SelectTree.tsx
index 3d675ee6..8a17cdc8 100644
--- a/rsconcept/frontend/src/components/Input/SelectTree.tsx
+++ b/rsconcept/frontend/src/components/Input/SelectTree.tsx
@@ -3,7 +3,6 @@ import clsx from 'clsx';
 
 import { globalIDs, PARAMETER } from '@/utils/constants';
 
-import { Overlay } from '../Container';
 import { MiniButton } from '../Control';
 import { IconDropArrow, IconPageRight } from '../Icons';
 import { type Styling } from '../props';
@@ -86,6 +85,7 @@ export function SelectTree<ItemType>({
           <div
             key={`${prefix}${index}`}
             className={clsx(
+              'relative',
               'pr-3 pl-6 border-b',
               'cc-scroll-row',
               'bg-prim-200 clr-hover cc-animate-color',
@@ -108,14 +108,13 @@ export function SelectTree<ItemType>({
             }}
           >
             {foldable.has(item) ? (
-              <Overlay position='left-[-1.3rem]' className={clsx(!folded.includes(item) && 'top-[0.1rem]')}>
-                <MiniButton
-                  noPadding
-                  noHover
-                  icon={!folded.includes(item) ? <IconDropArrow size='1rem' /> : <IconPageRight size='1.25rem' />}
-                  onClick={event => handleClickFold(event, item, folded.includes(item))}
-                />
-              </Overlay>
+              <MiniButton
+                className={clsx('absolute left-[0.3rem]', !folded.includes(item) ? 'top-[0.4rem]' : 'top-1')}
+                noPadding
+                noHover
+                icon={!folded.includes(item) ? <IconDropArrow size='1rem' /> : <IconPageRight size='1.25rem' />}
+                onClick={event => handleClickFold(event, item, folded.includes(item))}
+              />
             ) : null}
             {getParent(item) === item ? getLabel(item) : `- ${getLabel(item).toLowerCase()}`}
           </div>
diff --git a/rsconcept/frontend/src/components/Modal/ModalBackdrop.tsx b/rsconcept/frontend/src/components/Modal/ModalBackdrop.tsx
index 1fa5f8e6..4d9a74c1 100644
--- a/rsconcept/frontend/src/components/Modal/ModalBackdrop.tsx
+++ b/rsconcept/frontend/src/components/Modal/ModalBackdrop.tsx
@@ -9,9 +9,9 @@ interface ModalBackdropProps {
 export function ModalBackdrop({ onHide }: ModalBackdropProps) {
   return (
     <>
-      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'backdrop-blur-[3px] opacity-50')} />
+      <div className={clsx('z-bottom', 'fixed top-0 left-0', 'w-full h-full', 'backdrop-blur-[3px] opacity-50')} />
       <div
-        className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')}
+        className={clsx('z-bottom', 'fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')}
         onClick={onHide}
       />
     </>
diff --git a/rsconcept/frontend/src/components/Modal/ModalForm.tsx b/rsconcept/frontend/src/components/Modal/ModalForm.tsx
index bb521091..1958881e 100644
--- a/rsconcept/frontend/src/components/Modal/ModalForm.tsx
+++ b/rsconcept/frontend/src/components/Modal/ModalForm.tsx
@@ -10,7 +10,6 @@ import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/utils';
 
-import { Overlay } from '../Container';
 import { Button, MiniButton, SubmitButton } from '../Control';
 import { IconClose } from '../Icons';
 import { type Styling } from '../props';
@@ -89,12 +88,12 @@ export function ModalForm({
   }
 
   return (
-    <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
+    <div className='fixed top-0 left-0 w-full h-full z-modal isolate cursor-default'>
       <ModalBackdrop onHide={handleCancel} />
       <form
         className={clsx(
           'cc-animate-modal',
-          'z-modal absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
+          'absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
           'border rounded-xl bg-prim-100'
         )}
         onSubmit={handleSubmit}
@@ -105,15 +104,13 @@ export function ModalForm({
           </div>
         ) : null}
 
-        <Overlay className='z-modalOverlay'>
-          <MiniButton
-            noPadding
-            titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
-            icon={<IconClose size='1.25rem' />}
-            className='float-right mt-2 mr-2'
-            onClick={handleCancel}
-          />
-        </Overlay>
+        <MiniButton
+          noPadding
+          titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
+          icon={<IconClose size='1.25rem' />}
+          className='float-right mt-2 mr-2'
+          onClick={handleCancel}
+        />
 
         {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
@@ -133,7 +130,7 @@ export function ModalForm({
           {children}
         </div>
 
-        <div className='z-modal-controls my-2 flex gap-12 justify-center text-sm'>
+        <div className='z-pop my-2 flex gap-12 justify-center text-sm'>
           <SubmitButton
             autoFocus
             text={submitText}
diff --git a/rsconcept/frontend/src/components/Modal/ModalLoader.tsx b/rsconcept/frontend/src/components/Modal/ModalLoader.tsx
index e915c402..b4335adf 100644
--- a/rsconcept/frontend/src/components/Modal/ModalLoader.tsx
+++ b/rsconcept/frontend/src/components/Modal/ModalLoader.tsx
@@ -4,9 +4,9 @@ import { Loader } from '@/components/Loader';
 
 export function ModalLoader() {
   return (
-    <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
-      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'backdrop-blur-[3px] opacity-50')} />
-      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')} />
+    <div className='fixed top-0 left-0 w-full h-full z-modal isolate cursor-default'>
+      <div className={clsx('z-bottom fixed top-0 left-0', 'w-full h-full', 'backdrop-blur-[3px] opacity-50')} />
+      <div className={clsx('z-bottom fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')} />
       <div
         className={clsx(
           'cc-animate-modal p-20',
diff --git a/rsconcept/frontend/src/components/Modal/ModalView.tsx b/rsconcept/frontend/src/components/Modal/ModalView.tsx
index 4c036e3d..c6731f8b 100644
--- a/rsconcept/frontend/src/components/Modal/ModalView.tsx
+++ b/rsconcept/frontend/src/components/Modal/ModalView.tsx
@@ -9,7 +9,6 @@ import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/utils';
 
-import { Overlay } from '../Container';
 import { Button, MiniButton } from '../Control';
 import { IconClose } from '../Icons';
 
@@ -34,7 +33,7 @@ export function ModalView({
   useEscapeKey(hideDialog);
 
   return (
-    <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
+    <div className='fixed top-0 left-0 w-full h-full z-modal isolate cursor-default'>
       <ModalBackdrop onHide={hideDialog} />
       <div
         className={clsx(
@@ -49,15 +48,13 @@ export function ModalView({
           </div>
         ) : null}
 
-        <Overlay className='z-modalOverlay'>
-          <MiniButton
-            noPadding
-            titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
-            icon={<IconClose size='1.25rem' />}
-            className='float-right mt-2 mr-2'
-            onClick={hideDialog}
-          />
-        </Overlay>
+        <MiniButton
+          noPadding
+          titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
+          icon={<IconClose size='1.25rem' />}
+          className='float-right mt-2 mr-2'
+          onClick={hideDialog}
+        />
 
         {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
@@ -77,7 +74,7 @@ export function ModalView({
           {children}
         </div>
 
-        <div className='z-modal-controls my-2 flex gap-12 justify-center text-sm'>
+        <div className='z-pop my-2 flex gap-12 justify-center text-sm'>
           <Button text='Закрыть' className='min-w-[7rem]' onClick={hideDialog} />
         </div>
       </div>
diff --git a/rsconcept/frontend/src/features/help/components/BadgeHelp.tsx b/rsconcept/frontend/src/features/help/components/BadgeHelp.tsx
index eedae3a8..6861f01b 100644
--- a/rsconcept/frontend/src/features/help/components/BadgeHelp.tsx
+++ b/rsconcept/frontend/src/features/help/components/BadgeHelp.tsx
@@ -39,12 +39,10 @@ export function BadgeHelp({ topic, padding = 'p-1', ...restProps }: BadgeHelpPro
   return (
     <div tabIndex={-1} id={`help-${topic}`} className={padding}>
       <IconHelp size='1.25rem' className='icon-primary' />
-      <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modal-tooltip' {...restProps}>
+      <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-topmost' {...restProps}>
         <Suspense fallback={<Loader />}>
-          <div className='relative' onClick={event => event.stopPropagation()}>
-            <div className='absolute right-0 text-sm top-[0.4rem] clr-input'>
-              <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
-            </div>
+          <div className='absolute right-1 text-sm top-[0.4rem] clr-input' onClick={event => event.stopPropagation()}>
+            <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
           </div>
           <TopicPage topic={topic} />
         </Suspense>
diff --git a/rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx b/rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx
index b5688f6e..f0b22c59 100644
--- a/rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx
+++ b/rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx
@@ -33,7 +33,7 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro
       className={clsx(
         'absolute left-0 w-[13.5rem]', // prettier: split-lines
         'flex flex-col',
-        'z-modal-tooltip',
+        'z-topmost',
         'text-xs sm:text-sm',
         'select-none',
         {
diff --git a/rsconcept/frontend/src/features/library/components/EditorLibraryItem.tsx b/rsconcept/frontend/src/features/library/components/EditorLibraryItem.tsx
index f8dc01eb..55a50516 100644
--- a/rsconcept/frontend/src/features/library/components/EditorLibraryItem.tsx
+++ b/rsconcept/frontend/src/features/library/components/EditorLibraryItem.tsx
@@ -5,7 +5,7 @@ import { urls, useConceptNavigation } from '@/app';
 import { useLabelUser, useRoleStore, UserRole } from '@/features/users';
 import { InfoUsers, SelectUser } from '@/features/users/components';
 
-import { Overlay, Tooltip } from '@/components/Container';
+import { Tooltip } from '@/components/Container';
 import { MiniButton } from '@/components/Control';
 import { useDropdown } from '@/components/Dropdown';
 import {
@@ -83,7 +83,7 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
 
   return (
     <div className='flex flex-col'>
-      <div className='flex justify-stretch sm:mb-1 max-w-[30rem] gap-3'>
+      <div className='relative flex justify-stretch sm:mb-1 max-w-[30rem] gap-3'>
         <MiniButton
           noHover
           noPadding
@@ -101,21 +101,21 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
         />
       </div>
 
-      {ownerSelector.isOpen ? (
-        <Overlay position='top-[-0.5rem] left-[4rem] cc-icons'>
-          {ownerSelector.isOpen ? (
+      <div className='relative'>
+        {ownerSelector.isOpen ? (
+          <div className='absolute top-[-0.5rem] left-[4rem]'>
             <SelectUser className='w-[25rem] sm:w-[26rem] text-sm' value={schema.owner} onChange={onSelectUser} />
-          ) : null}
-        </Overlay>
-      ) : null}
-      <ValueIcon
-        className='sm:mb-1'
-        icon={<IconOwner size='1.25rem' className='icon-primary' />}
-        value={getUserLabel(schema.owner)}
-        title={isAttachedToOSS ? 'Владелец наследуется от ОСС' : 'Владелец'}
-        onClick={ownerSelector.toggle}
-        disabled={isModified || isProcessing || isAttachedToOSS || role < UserRole.OWNER}
-      />
+          </div>
+        ) : null}
+        <ValueIcon
+          className='sm:mb-1'
+          icon={<IconOwner size='1.25rem' className='icon-primary' />}
+          value={getUserLabel(schema.owner)}
+          title={isAttachedToOSS ? 'Владелец наследуется от ОСС' : 'Владелец'}
+          onClick={ownerSelector.toggle}
+          disabled={isModified || isProcessing || isAttachedToOSS || role < UserRole.OWNER}
+        />
+      </div>
 
       <div className='sm:mb-1 flex justify-between items-center'>
         <ValueIcon
@@ -126,7 +126,7 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
           onClick={handleEditEditors}
           disabled={isModified || isProcessing || role < UserRole.OWNER}
         />
-        <Tooltip anchorSelect='#editor_stats' layer='z-modal-tooltip'>
+        <Tooltip anchorSelect='#editor_stats'>
           <Suspense fallback={<Loader scale={2} />}>
             <InfoUsers items={schema.editors} prefix={prefixes.user_editors} header='Редакторы' />
           </Suspense>
diff --git a/rsconcept/frontend/src/features/library/components/PickSchema.tsx b/rsconcept/frontend/src/features/library/components/PickSchema.tsx
index 9276aad0..c95e90ad 100644
--- a/rsconcept/frontend/src/features/library/components/PickSchema.tsx
+++ b/rsconcept/frontend/src/features/library/components/PickSchema.tsx
@@ -120,7 +120,7 @@ export function PickSchema({
             className='mt-1'
             onClick={() => locationMenu.toggle()}
           />
-          <Dropdown isOpen={locationMenu.isOpen} stretchLeft className='w-[20rem] h-[12.5rem] z-modal-tooltip'>
+          <Dropdown isOpen={locationMenu.isOpen} stretchLeft className='w-[20rem] h-[12.5rem]'>
             <SelectLocation
               value={filterLocation}
               prefix={prefixes.folders_list}
diff --git a/rsconcept/frontend/src/features/library/components/SelectLocationContext.tsx b/rsconcept/frontend/src/features/library/components/SelectLocationContext.tsx
index 0c858d63..ba0eb50f 100644
--- a/rsconcept/frontend/src/features/library/components/SelectLocationContext.tsx
+++ b/rsconcept/frontend/src/features/library/components/SelectLocationContext.tsx
@@ -48,7 +48,7 @@ export function SelectLocationContext({
       />
       <Dropdown
         isOpen={menu.isOpen}
-        className={clsx('w-[20rem] h-[12.5rem] z-modal-tooltip', dropdownHeight)}
+        className={clsx('w-[20rem] h-[12.5rem] z-tooltip', dropdownHeight)}
         margin='mt-[-0.25rem]'
       >
         <SelectLocation
diff --git a/rsconcept/frontend/src/features/library/components/SelectLocationHead.tsx b/rsconcept/frontend/src/features/library/components/SelectLocationHead.tsx
index 4870fd7c..eec2d209 100644
--- a/rsconcept/frontend/src/features/library/components/SelectLocationHead.tsx
+++ b/rsconcept/frontend/src/features/library/components/SelectLocationHead.tsx
@@ -45,7 +45,7 @@ export function SelectLocationHead({
         onClick={menu.toggle}
       />
 
-      <Dropdown isOpen={menu.isOpen} className='z-modal-tooltip' margin='mt-2'>
+      <Dropdown isOpen={menu.isOpen} margin='mt-2'>
         {Object.values(LocationHead)
           .filter(head => !excluded.includes(head))
           .map((head, index) => {
diff --git a/rsconcept/frontend/src/features/library/components/ToolbarItemAccess.tsx b/rsconcept/frontend/src/features/library/components/ToolbarItemAccess.tsx
index d138a0e4..33fb84c4 100644
--- a/rsconcept/frontend/src/features/library/components/ToolbarItemAccess.tsx
+++ b/rsconcept/frontend/src/features/library/components/ToolbarItemAccess.tsx
@@ -42,7 +42,7 @@ export function ToolbarItemAccess({
   }
 
   return (
-    <Overlay position='top-[4.5rem] right-0 w-[12rem] pr-2' className='flex' layer='z-bottom'>
+    <Overlay position='top-[4.5rem] right-0' className='w-[12rem] flex pr-2' layer='z-bottom'>
       <Label text='Доступ' className='self-center select-none' />
       <div className='ml-auto cc-icons'>
         <SelectAccessPolicy
diff --git a/rsconcept/frontend/src/features/library/dialogs/DlgCloneLibraryItem.tsx b/rsconcept/frontend/src/features/library/dialogs/DlgCloneLibraryItem.tsx
index fc29ebbe..874ea588 100644
--- a/rsconcept/frontend/src/features/library/dialogs/DlgCloneLibraryItem.tsx
+++ b/rsconcept/frontend/src/features/library/dialogs/DlgCloneLibraryItem.tsx
@@ -155,7 +155,7 @@ export function DlgCloneLibraryItem() {
         />
       </div>
 
-      <TextArea id='dlg_comment' {...register('comment')} label='Описание' error={errors.comment} />
+      <TextArea id='dlg_comment' {...register('comment')} label='Описание' rows={4} error={errors.comment} />
 
       {selected.length > 0 ? (
         <Controller
diff --git a/rsconcept/frontend/src/features/library/pages/CreateItemPage/FormCreateItem.tsx b/rsconcept/frontend/src/features/library/pages/CreateItemPage/FormCreateItem.tsx
index 959614cf..af0b946d 100644
--- a/rsconcept/frontend/src/features/library/pages/CreateItemPage/FormCreateItem.tsx
+++ b/rsconcept/frontend/src/features/library/pages/CreateItemPage/FormCreateItem.tsx
@@ -8,7 +8,6 @@ import clsx from 'clsx';
 import { urls, useConceptNavigation } from '@/app';
 import { useAuthSuspense } from '@/features/auth';
 
-import { Overlay } from '@/components/Container';
 import { Button, MiniButton, SubmitButton } from '@/components/Control';
 import { IconDownload } from '@/components/Icons';
 import { InfoError } from '@/components/InfoError';
@@ -108,9 +107,9 @@ export function FormCreateItem() {
       onSubmit={event => void handleSubmit(onSubmit)(event)}
       onChange={resetErrors}
     >
-      <h1 className='select-none'>
+      <h1 className='select-none relative'>
         {itemType == LibraryItemType.RSFORM ? (
-          <Overlay position='top-0 right-[0.5rem]'>
+          <>
             <Controller
               control={control}
               name='file'
@@ -127,10 +126,11 @@ export function FormCreateItem() {
             />
             <MiniButton
               title='Загрузить из Экстеор'
+              className='absolute top-0 right-0'
               icon={<IconDownload size='1.25rem' className='icon-primary' />}
               onClick={() => inputRef.current?.click()}
             />
-          </Overlay>
+          </>
         ) : null}
         Создание схемы
       </h1>
diff --git a/rsconcept/frontend/src/features/library/pages/LibraryPage/LibraryPage.tsx b/rsconcept/frontend/src/features/library/pages/LibraryPage/LibraryPage.tsx
index 55f1ac3e..de8e46d9 100644
--- a/rsconcept/frontend/src/features/library/pages/LibraryPage/LibraryPage.tsx
+++ b/rsconcept/frontend/src/features/library/pages/LibraryPage/LibraryPage.tsx
@@ -3,10 +3,8 @@
 import { toast } from 'react-toastify';
 import fileDownload from 'js-file-download';
 
-import { Overlay } from '@/components/Container';
 import { MiniButton } from '@/components/Control';
 import { IconCSV } from '@/components/Icons';
-import { useAppLayoutStore } from '@/stores/appLayout';
 import { useDialogsStore } from '@/stores/dialogs';
 import { infoMsg } from '@/utils/labels';
 import { convertToCSV } from '@/utils/utils';
@@ -24,8 +22,6 @@ export function LibraryPage() {
   const { items: libraryItems } = useLibrarySuspense();
   const { renameLocation } = useRenameLocation();
 
-  const noNavigation = useAppLayoutStore(state => state.noNavigation);
-
   const folderMode = useLibrarySearchStore(state => state.folderMode);
   const location = useLibrarySearchStore(state => state.location);
   const setLocation = useLibrarySearchStore(state => state.setLocation);
@@ -57,20 +53,15 @@ export function LibraryPage() {
 
   return (
     <>
-      <Overlay
-        position={noNavigation ? 'top-[0.25rem] right-[3rem]' : 'top-[0.25rem] right-0'}
-        layer='z-tooltip'
-        className='cc-animate-position'
-      >
+      <ToolbarSearch total={libraryItems.length} filtered={filtered.length} />
+      <div className='relative cc-fade-in flex'>
         <MiniButton
+          className='absolute z-tooltip top-[0.25rem] right-0 cc-animate-position'
           title='Выгрузить в формате CSV'
           icon={<IconCSV size='1.25rem' className='icon-green' />}
           onClick={handleDownloadCSV}
         />
-      </Overlay>
-      <ToolbarSearch total={libraryItems.length} filtered={filtered.length} />
 
-      <div className='cc-fade-in flex'>
         <ViewSideLocation
           isVisible={folderMode}
           onRenameLocation={() => showChangeLocation({ initial: location, onChangeLocation: handleRenameLocation })}
diff --git a/rsconcept/frontend/src/features/library/pages/LibraryPage/ToolbarSearch.tsx b/rsconcept/frontend/src/features/library/pages/LibraryPage/ToolbarSearch.tsx
index c72afe79..40851ac7 100644
--- a/rsconcept/frontend/src/features/library/pages/LibraryPage/ToolbarSearch.tsx
+++ b/rsconcept/frontend/src/features/library/pages/LibraryPage/ToolbarSearch.tsx
@@ -166,7 +166,7 @@ export function ToolbarSearch({ total, filtered }: ToolbarSearchProps) {
               text={head ?? '//'}
             />
 
-            <Dropdown isOpen={headMenu.isOpen} stretchLeft className='z-modal-tooltip'>
+            <Dropdown isOpen={headMenu.isOpen} stretchLeft>
               <DropdownButton title='Переключение в режим Проводник' onClick={handleToggleFolder}>
                 <div className='inline-flex items-center gap-3'>
                   <IconFolderTree size='1rem' className='clr-text-controls' />
diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssCard/FormOSS.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssCard/FormOSS.tsx
index 855d1ff5..9060197e 100644
--- a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssCard/FormOSS.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssCard/FormOSS.tsx
@@ -69,7 +69,7 @@ export function FormOSS() {
         disabled={!isMutable}
         error={errors.title}
       />
-      <div className='flex justify-between gap-3 mb-3'>
+      <div className='relative flex justify-between gap-3 mb-3'>
         <TextInput
           id='schema_alias'
           {...register('alias')}
diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx
index 1fc32cd3..e5224b8d 100644
--- a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx
@@ -190,7 +190,7 @@ export function OssFlow() {
   }
 
   return (
-    <div tabIndex={-1} onKeyDown={handleKeyDown}>
+    <div tabIndex={-1} className='relative' onKeyDown={handleKeyDown}>
       <Overlay
         position='top-[1.9rem] pt-1 right-1/2 translate-x-1/2'
         className='rounded-b-2xl cc-blur hover:bg-prim-100 hover:bg-opacity-50'
diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
index 5e8565ea..ac478e10 100644
--- a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
@@ -23,7 +23,12 @@ export function NodeCore({ node }: NodeCoreProps) {
   const longLabel = node.data.label.length > LONG_LABEL_CHARS;
 
   return (
-    <>
+    <div
+      className='relative h-[34px] w-[144px] flex items-center justify-center'
+      data-tooltip-id={globalIDs.operation_tooltip}
+      data-tooltip-hidden={node.dragging}
+      onMouseEnter={() => setHover(node.data.operation)}
+    >
       <Overlay position='top-0 right-0' className='flex flex-col gap-1 p-[2px]'>
         <Indicator
           noPadding
@@ -40,35 +45,24 @@ export function NodeCore({ node }: NodeCoreProps) {
       </Overlay>
 
       {node.data.operation.operation_type === OperationType.INPUT ? (
-        <Overlay position='top-[1px] right-1/2 translate-x-1/2' className='flex'>
-          <div className='border-t w-[30px]'></div>
-        </Overlay>
+        <div className='absolute top-[1px] right-1/2 translate-x-1/2 border-t w-[30px]' />
       ) : null}
 
       {!node.data.operation.is_owned ? (
-        <Overlay position='left-[2px] top-[6px]'>
-          <div className='border-r rounded-none clr-input h-[22px]'></div>
-        </Overlay>
+        <div className='absolute left-[2px] top-[6px] border-r rounded-none clr-input h-[22px]' />
       ) : null}
 
       <div
-        className='h-[34px] w-[144px] flex items-center justify-center'
-        data-tooltip-id={globalIDs.operation_tooltip}
-        data-tooltip-hidden={node.dragging}
-        onMouseEnter={() => setHover(node.data.operation)}
+        className='text-center line-clamp-2'
+        style={{
+          fontSize: longLabel ? '12px' : '14px',
+          lineHeight: longLabel ? '16px' : '20px',
+          paddingLeft: '4px',
+          paddingRight: longLabel ? '10px' : '4px'
+        }}
       >
-        <div
-          className='text-center line-clamp-2'
-          style={{
-            fontSize: longLabel ? '12px' : '14px',
-            lineHeight: longLabel ? '16px' : '20px',
-            paddingLeft: '4px',
-            paddingRight: longLabel ? '10px' : '4px'
-          }}
-        >
-          {node.data.label}
-        </div>
+        {node.data.label}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx
index 28207e00..ed1778a0 100644
--- a/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx
@@ -5,7 +5,6 @@ import clsx from 'clsx';
 
 import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
 
-import { Overlay } from '@/components/Container';
 import { TabLabel, TabList, TabPanel, Tabs } from '@/components/Tabs';
 import { useAppLayoutStore } from '@/stores/appLayout';
 
@@ -61,16 +60,22 @@ export function OssTabs({ activeTab }: OssTabsProps) {
       onSelect={onSelectTab}
       defaultFocus
       selectedTabClassName='clr-selected'
-      className='flex flex-col mx-auto min-w-fit items-center'
+      className='relative flex flex-col mx-auto min-w-fit items-center'
     >
-      <Overlay position='top-0 right-1/2 translate-x-1/2' layer='z-sticky'>
-        <TabList className={clsx('w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2', 'bg-prim-200')}>
-          <MenuOssTabs />
+      <TabList
+        className={clsx(
+          'absolute z-sticky',
+          'top-0 right-1/2 w-fit translate-x-1/2',
+          'flex items-stretch',
+          'border-b-2 border-x-2 divide-x-2',
+          'bg-prim-200'
+        )}
+      >
+        <MenuOssTabs />
 
-          <TabLabel label='Карточка' title={schema.title ?? ''} />
-          <TabLabel label='Граф' />
-        </TabList>
-      </Overlay>
+        <TabLabel label='Карточка' title={schema.title ?? ''} />
+        <TabLabel label='Граф' />
+      </TabList>
 
       <div className='overflow-x-hidden'>
         <TabPanel>
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/DlgShowAST.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/DlgShowAST.tsx
index 40499e85..8ce5bcb7 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/DlgShowAST.tsx
@@ -26,13 +26,10 @@ export function DlgShowAST() {
   const [isDragging, setIsDragging] = useState(false);
 
   return (
-    <ModalView
-      className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
-      helpTopic={HelpTopic.UI_FORMULA_TREE}
-    >
+    <ModalView className='relative w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]' helpTopic={HelpTopic.UI_FORMULA_TREE}>
       <Overlay
-        position='top-2 right-1/2 translate-x-1/2'
-        className='px-2 py-1 rounded-2xl cc-blur bg-prim-100 max-w-[60ch] text-lg text-center'
+        position='top-0 -mt-1 right-1/2 translate-x-1/2'
+        className='px-2 rounded-2xl cc-blur bg-prim-100 max-w-[60ch] text-lg text-center'
       >
         {!hoverNode || isDragging ? expression : null}
         {!isDragging && hoverNode ? (
@@ -43,6 +40,7 @@ export function DlgShowAST() {
           </div>
         ) : null}
       </Overlay>
+
       <ReactFlowProvider>
         <ASTFlow
           data={syntaxTree}
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx
index c9d619fa..c44ecda5 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx
@@ -5,17 +5,14 @@ import clsx from 'clsx';
 
 import { useWindowSize } from '@/hooks/useWindowSize';
 import { useMainHeight } from '@/stores/appLayout';
-import { useDialogsStore } from '@/stores/dialogs';
 import { useModificationStore } from '@/stores/modification';
 import { usePreferencesStore } from '@/stores/preferences';
 import { globalIDs } from '@/utils/constants';
-import { promptUnsaved } from '@/utils/utils';
 
 import { useMutatingRSForm } from '../../../backend/useMutatingRSForm';
 import { useRSEdit } from '../RSEditContext';
 import { ViewConstituents } from '../ViewConstituents';
 
-import { EditorControls } from './EditorControls';
 import { FormConstituenta } from './FormConstituenta';
 import { ToolbarConstituenta } from './ToolbarConstituenta';
 
@@ -28,7 +25,6 @@ export function EditorConstituenta() {
   const mainHeight = useMainHeight();
 
   const showList = usePreferencesStore(state => state.showCstSideList);
-  const showEditTerm = useDialogsStore(state => state.showEditWordForms);
   const { isModified } = useModificationStore();
 
   const [toggleReset, setToggleReset] = useState(false);
@@ -57,16 +53,6 @@ export function EditorConstituenta() {
     }
   }
 
-  function handleEditTermForms() {
-    if (!activeCst) {
-      return;
-    }
-    if (isModified && !promptUnsaved()) {
-      return;
-    }
-    showEditTerm({ itemID: schema.id, target: activeCst });
-  }
-
   function initiateSubmit() {
     const element = document.getElementById(globalIDs.constituenta_editor) as HTMLFormElement;
     if (element) {
@@ -85,46 +71,38 @@ export function EditorConstituenta() {
   }
 
   return (
-    <>
+    <div
+      tabIndex={-1}
+      className={clsx(
+        'relative',
+        'cc-fade-in',
+        'min-h-[20rem] max-w-[calc(min(100vw,95rem))] mx-auto',
+        'flex pt-[1.9rem]',
+        'overflow-y-auto overflow-x-clip',
+        { 'flex-col md:items-center': isNarrow }
+      )}
+      style={{ maxHeight: mainHeight }}
+      onKeyDown={handleInput}
+    >
       <ToolbarConstituenta
         activeCst={activeCst}
         disabled={disabled}
         onSubmit={initiateSubmit}
         onReset={() => setToggleReset(prev => !prev)}
       />
-      <div
-        tabIndex={-1}
-        className={clsx(
-          'cc-fade-in',
-          'min-h-[20rem] max-w-[calc(min(100vw,95rem))] mx-auto',
-          'flex pt-[1.9rem]',
-          'overflow-y-auto overflow-x-clip',
-          { 'flex-col md:items-center': isNarrow }
-        )}
-        style={{ maxHeight: mainHeight }}
-        onKeyDown={handleInput}
-      >
-        <div className='mx-0 md:mx-auto pt-[2rem] md:w-[48.8rem] shrink-0 xs:pt-0'>
-          {activeCst ? (
-            <EditorControls
-              disabled={disabled} //
-              constituenta={activeCst}
-              onEditTerm={handleEditTermForms}
-            />
-          ) : null}
-          {activeCst ? (
-            <FormConstituenta
-              id={globalIDs.constituenta_editor} //
-              disabled={disabled}
-              toggleReset={toggleReset}
-              activeCst={activeCst}
-              schema={schema}
-              onOpenEdit={navigateCst}
-            />
-          ) : null}
-        </div>
-        <ViewConstituents isMounted={showList} isBottom={isNarrow} />
+      <div className='mx-0 md:mx-auto pt-[2rem] md:w-[48.8rem] shrink-0 xs:pt-0'>
+        {activeCst ? (
+          <FormConstituenta
+            id={globalIDs.constituenta_editor}
+            disabled={disabled}
+            toggleReset={toggleReset}
+            activeCst={activeCst}
+            schema={schema}
+            onOpenEdit={navigateCst}
+          />
+        ) : null}
       </div>
-    </>
+      <ViewConstituents isMounted={showList} isBottom={isNarrow} />
+    </div>
   );
 }
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorControls.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorControls.tsx
index 13cc24af..ebaf7eef 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorControls.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorControls.tsx
@@ -29,7 +29,7 @@ export function EditorControls({ constituenta, disabled, onEditTerm }: EditorCon
   }
 
   return (
-    <Overlay position='top-1 left-[4.7rem]' className='flex select-none'>
+    <Overlay position='top-0 left-[4.7rem]' className='flex select-none'>
       {!disabled || isProcessing ? (
         <MiniButton
           title={isModified ? tooltipText.unsaved : `Редактировать словоформы термина`}
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index fa71d4e2..0eb37750 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -14,6 +14,7 @@ import { Indicator } from '@/components/View';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useModificationStore } from '@/stores/modification';
 import { errorMsg } from '@/utils/labels';
+import { promptUnsaved } from '@/utils/utils';
 
 import {
   CstType,
@@ -30,6 +31,8 @@ import { type IConstituenta, type IRSForm } from '../../../models/rsform';
 import { isBaseSet, isBasicConcept, isFunctional } from '../../../models/rsformAPI';
 import { EditorRSExpression } from '../EditorRSExpression';
 
+import { EditorControls } from './EditorControls';
+
 interface FormConstituentaProps {
   id?: string;
   disabled: boolean;
@@ -41,8 +44,6 @@ interface FormConstituentaProps {
 }
 
 export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst, onOpenEdit }: FormConstituentaProps) {
-  const { cstUpdate } = useCstUpdate();
-  const showTypification = useDialogsStore(state => state.showShowTypeGraph);
   const { isModified, setIsModified } = useModificationStore();
   const isProcessing = useMutatingRSForm();
 
@@ -54,6 +55,10 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
     formState: { isDirty }
   } = useForm<ICstUpdateDTO>({ resolver: zodResolver(schemaCstUpdate) });
 
+  const { cstUpdate } = useCstUpdate();
+  const showTypification = useDialogsStore(state => state.showShowTypeGraph);
+  const showEditTerm = useDialogsStore(state => state.showEditWordForms);
+
   const [localParse, setLocalParse] = useState<IExpressionParseDTO | null>(null);
 
   const typification = useMemo(
@@ -115,8 +120,20 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
     showTypification({ items: typeInfo ? [typeInfo] : [] });
   }
 
+  function handleEditTermForms() {
+    if (!activeCst) {
+      return;
+    }
+    if (isModified && !promptUnsaved()) {
+      return;
+    }
+    showEditTerm({ itemID: schema.id, target: activeCst });
+  }
+
   return (
-    <form id={id} className='cc-column mt-1 px-6 py-1' onSubmit={event => void handleSubmit(onSubmit)(event)}>
+    <form id={id} className='relative cc-column mt-1 px-6 py-1' onSubmit={event => void handleSubmit(onSubmit)(event)}>
+      <EditorControls disabled={disabled} constituenta={activeCst} onEditTerm={handleEditTermForms} />
+
       <Controller
         control={control}
         name='item_data.term_raw'
@@ -228,13 +245,13 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
       ) : null}
 
       {!disabled || isProcessing ? (
-        <div className='mx-auto flex'>
+        <div className='relative mx-auto flex'>
           <SubmitButton
             text='Сохранить изменения'
             disabled={disabled || !isModified}
             icon={<IconSave size='1.25rem' />}
           />
-          <Overlay position='top-[0.1rem] left-[0.4rem]' className='cc-icons'>
+          <Overlay position='top-[0.1rem] left-full' className='cc-icons'>
             {activeCst.has_inherited_children && !activeCst.is_inherited ? (
               <Indicator
                 icon={<IconPredecessor size='1.25rem' className='text-sec-600' />}
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
index dfe94c96..b147fd53 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
@@ -4,10 +4,6 @@ import { useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 import { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
 
-import { HelpTopic } from '@/features/help';
-import { BadgeHelp } from '@/features/help/components';
-
-import { Overlay } from '@/components/Container';
 import { useDialogsStore } from '@/stores/dialogs';
 import { usePreferencesStore } from '@/stores/preferences';
 import { errorMsg } from '@/utils/labels';
@@ -158,23 +154,16 @@ export function EditorRSExpression({
   }
 
   return (
-    <div className='cc-fade-in'>
+    <div className='relative cc-fade-in'>
       <ToolbarRSExpression disabled={disabled} showAST={handleShowAST} showTypeGraph={onShowTypeGraph} />
 
-      <Overlay
-        position='top-[-0.5rem] right-1/2 translate-x-1/2'
-        layer='z-pop'
-        className='w-fit pl-[8.5rem] xs:pl-[2rem] flex gap-1'
-      >
-        <StatusBar
-          processing={isPending}
-          isModified={isModified}
-          activeCst={activeCst}
-          parseData={parseData}
-          onAnalyze={() => handleCheckExpression()}
-        />
-        <BadgeHelp topic={HelpTopic.UI_CST_STATUS} offset={4} />
-      </Overlay>
+      <StatusBar
+        processing={isPending}
+        isModified={isModified}
+        activeCst={activeCst}
+        parseData={parseData}
+        onAnalyze={() => handleCheckExpression()}
+      />
 
       <RSInput
         ref={rsInput}
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
index 2a9ea9c3..d7593463 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
@@ -2,6 +2,10 @@
 
 import clsx from 'clsx';
 
+import { HelpTopic } from '@/features/help';
+import { BadgeHelp } from '@/features/help/components';
+
+import { Overlay } from '@/components/Container';
 import { Loader } from '@/components/Loader';
 import { APP_COLORS } from '@/styling/colors';
 import { globalIDs } from '@/utils/constants';
@@ -35,34 +39,40 @@ export function StatusBar({ isModified, processing, activeCst, parseData, onAnal
   })();
 
   return (
-    <div
-      tabIndex={0}
-      className={clsx(
-        'w-[10rem] h-[1.75rem]',
-        'px-2 flex items-center justify-center',
-        'border',
-        'select-none',
-        'cursor-pointer',
-        'focus-frame',
-        'transition-colors duration-500'
-      )}
-      style={{ backgroundColor: processing ? APP_COLORS.bgDefault : colorStatusBar(status) }}
-      data-tooltip-id={globalIDs.tooltip}
-      data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
-      onClick={onAnalyze}
+    <Overlay
+      position='top-[-0.5rem] right-1/2 translate-x-1/2'
+      layer='z-pop'
+      className='w-fit pl-[8.5rem] xs:pl-[2rem] flex gap-1'
     >
-      {processing ? (
-        <div className='cc-fade-in'>
-          {' '}
-          <Loader scale={3} />
-        </div>
-      ) : null}
-      {!processing ? (
-        <div className='cc-fade-in flex items-center gap-2'>
-          <IconExpressionStatus size='1rem' value={status} />
-          <span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
-        </div>
-      ) : null}
-    </div>
+      <div
+        tabIndex={0}
+        className={clsx(
+          'w-[10rem] h-[1.75rem]',
+          'px-2 flex items-center justify-center',
+          'border',
+          'select-none',
+          'cursor-pointer',
+          'focus-frame outline-none',
+          'transition-colors duration-500'
+        )}
+        style={{ backgroundColor: processing ? APP_COLORS.bgDefault : colorStatusBar(status) }}
+        data-tooltip-id={globalIDs.tooltip}
+        data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
+        onClick={onAnalyze}
+      >
+        {processing ? (
+          <div className='cc-fade-in'>
+            <Loader scale={3} />
+          </div>
+        ) : null}
+        {!processing ? (
+          <div className='cc-fade-in flex items-center gap-2'>
+            <IconExpressionStatus size='1rem' value={status} />
+            <span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
+          </div>
+        ) : null}
+      </div>
+      <BadgeHelp topic={HelpTopic.UI_CST_STATUS} offset={4} />
+    </Overlay>
   );
 }
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx
index 5cd7baa9..95a03e5f 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx
@@ -35,23 +35,23 @@ export function EditorRSFormCard() {
   }
 
   return (
-    <>
+    <div
+      onKeyDown={handleInput}
+      className={clsx(
+        'relative',
+        'cc-fade-in',
+        'md:w-fit md:max-w-fit max-w-[32rem]',
+        'flex flex-row flex-wrap px-6 pt-[1.9rem]'
+      )}
+    >
       <ToolbarRSFormCard onSubmit={initiateSubmit} schema={schema} isMutable={isMutable} deleteSchema={deleteSchema} />
-      <div
-        onKeyDown={handleInput}
-        className={clsx(
-          'cc-fade-in',
-          'md:w-fit md:max-w-fit max-w-[32rem]',
-          'flex flex-row flex-wrap px-6 pt-[1.9rem]'
-        )}
-      >
-        <FlexColumn className='shrink'>
-          <FormRSForm />
-          <EditorLibraryItem schema={schema} isAttachedToOSS={isAttachedToOSS} />
-        </FlexColumn>
 
-        <RSFormStats stats={schema.stats} isArchive={isArchive} />
-      </div>
-    </>
+      <FlexColumn className='shrink'>
+        <FormRSForm />
+        <EditorLibraryItem schema={schema} isAttachedToOSS={isAttachedToOSS} />
+      </FlexColumn>
+
+      <RSFormStats stats={schema.stats} isArchive={isArchive} />
+    </div>
   );
 }
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx
index 787b75a8..592b599a 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx
@@ -91,7 +91,7 @@ export function FormRSForm() {
           disabled={!isContentEditable}
           error={errors.alias}
         />
-        <div className='flex flex-col'>
+        <div className='relative flex flex-col'>
           <ToolbarVersioning blockReload={schema.oss.length > 0} />
           <ToolbarItemAccess
             visible={visible}
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/EditorRSList.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/EditorRSList.tsx
index 68b83a9c..438ee4c1 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/EditorRSList.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSList/EditorRSList.tsx
@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { toast } from 'react-toastify';
 import fileDownload from 'js-file-download';
 
-import { Overlay } from '@/components/Container';
 import { MiniButton } from '@/components/Control';
 import { type RowSelectionState } from '@/components/DataTable';
 import { IconCSV } from '@/components/Icons';
@@ -127,42 +126,40 @@ export function EditorRSList() {
   const tableHeight = useFitHeight('4.05rem + 5px');
 
   return (
-    <>
+    <div tabIndex={-1} onKeyDown={handleKeyDown} className='relative cc-fade-in pt-[1.9rem]'>
       {isContentEditable ? <ToolbarRSList /> : null}
-      <div tabIndex={-1} onKeyDown={handleKeyDown} className='cc-fade-in pt-[1.9rem]'>
-        {isContentEditable ? (
-          <div className='flex items-center border-b'>
-            <div className='px-2'>
-              Выбор {selected.length} из {schema.stats?.count_all}
-            </div>
-            <SearchBar
-              id='constituents_search'
-              noBorder
-              className='w-[8rem]'
-              query={filterText}
-              onChangeQuery={setFilterText}
-            />
+
+      <MiniButton
+        className='absolute z-tooltip top-[2.15rem] right-[1rem]'
+        title='Выгрузить в формате CSV'
+        icon={<IconCSV size='1.25rem' className='icon-green' />}
+        onClick={handleDownloadCSV}
+      />
+
+      {isContentEditable ? (
+        <div className='flex items-center border-b'>
+          <div className='px-2'>
+            Выбор {selected.length} из {schema.stats?.count_all}
           </div>
-        ) : null}
-
-        <Overlay position='top-[0.25rem] right-[1rem]' layer='z-tooltip'>
-          <MiniButton
-            title='Выгрузить в формате CSV'
-            icon={<IconCSV size='1.25rem' className='icon-green' />}
-            onClick={handleDownloadCSV}
+          <SearchBar
+            id='constituents_search'
+            noBorder
+            className='w-[8rem]'
+            query={filterText}
+            onChangeQuery={setFilterText}
           />
-        </Overlay>
+        </div>
+      ) : null}
 
-        <TableRSList
-          items={filtered}
-          maxHeight={tableHeight}
-          enableSelection={isContentEditable}
-          selected={rowSelection}
-          setSelected={handleRowSelection}
-          onEdit={navigateCst}
-          onCreateNew={createCstDefault}
-        />
-      </div>
-    </>
+      <TableRSList
+        items={filtered}
+        maxHeight={tableHeight}
+        enableSelection={isContentEditable}
+        selected={rowSelection}
+        setSelected={handleRowSelection}
+        onEdit={navigateCst}
+        onCreateNew={createCstDefault}
+      />
+    </div>
   );
 }
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx
index 282a4332..e596a05d 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx
@@ -20,7 +20,7 @@ export function GraphSelectors() {
   const setColoring = useTermGraphStore(state => state.setColoring);
 
   return (
-    <div className='border rounded-b-none select-none clr-input rounded-t-md pointer-events-auto'>
+    <div className='relative border rounded-b-none select-none clr-input rounded-t-md pointer-events-auto'>
       <Overlay position='right-[2.5rem] top-[0.25rem]'>
         {coloring === 'status' ? <BadgeHelp topic={HelpTopic.UI_CST_STATUS} className='min-w-[25rem]' /> : null}
         {coloring === 'type' ? <BadgeHelp topic={HelpTopic.UI_CST_CLASS} className='min-w-[25rem]' /> : null}
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx
index c93cfb86..17004095 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx
@@ -40,7 +40,6 @@ export function SchemasGuide() {
       <IconHelp size='1.25rem' className='icon-primary' />
       <Tooltip
         anchorSelect={`#${globalIDs.graph_schemas}`}
-        layer='z-modal-tooltip'
         place='right'
         className='max-w-[25rem] break-words text-base'
       >
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
index 0e49220c..48083579 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
@@ -2,7 +2,6 @@
 
 import clsx from 'clsx';
 
-import { Overlay } from '@/components/Container';
 import { MiniButton } from '@/components/Control';
 import { IconDropArrow, IconDropArrowUp } from '@/components/Icons';
 import { useWindowSize } from '@/hooks/useWindowSize';
@@ -47,16 +46,16 @@ export function ViewHidden({ items }: ViewHiddenProps) {
     return null;
   }
   return (
-    <div className='flex flex-col'>
-      <Overlay position='right-[calc(0.7rem-2px)] top-2 pointer-events-auto'>
-        <MiniButton
-          noPadding
-          noHover
-          title={!isFolded ? 'Свернуть' : 'Развернуть'}
-          icon={!isFolded ? <IconDropArrowUp size='1.25rem' /> : <IconDropArrow size='1.25rem' />}
-          onClick={toggleFolded}
-        />
-      </Overlay>
+    <div className='flex flex-col relative'>
+      <MiniButton
+        className='absolute right-[calc(0.7rem-2px)] top-2 pointer-events-auto'
+        noPadding
+        noHover
+        title={!isFolded ? 'Свернуть' : 'Развернуть'}
+        icon={!isFolded ? <IconDropArrowUp size='1.25rem' /> : <IconDropArrow size='1.25rem' />}
+        onClick={toggleFolded}
+      />
+
       <div className={clsx('pt-2 clr-input border-x pb-2', { 'border-b rounded-b-md': isFolded })}>
         <div
           className='w-fit select-none'
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx
index 6ad02335..d2d609c0 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx
@@ -5,7 +5,6 @@ import clsx from 'clsx';
 
 import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
 
-import { Overlay } from '@/components/Container';
 import { TabLabel, TabList, TabPanel, Tabs } from '@/components/Tabs';
 import { useAppLayoutStore } from '@/stores/appLayout';
 import { useModificationStore } from '@/stores/modification';
@@ -72,51 +71,53 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
   }
 
   return (
-    <>
-      <Tabs
-        selectedIndex={activeTab}
-        onSelect={onSelectTab}
-        defaultFocus
-        selectedTabClassName='clr-selected'
-        className='flex flex-col mx-auto min-w-fit items-center'
+    <Tabs
+      selectedIndex={activeTab}
+      onSelect={onSelectTab}
+      defaultFocus
+      selectedTabClassName='clr-selected'
+      className='relative flex flex-col mx-auto min-w-fit items-center'
+    >
+      <TabList
+        className={clsx(
+          'absolute z-sticky',
+          'mx-auto w-fit top-0 right-1/2 translate-x-1/2',
+          'flex items-stretch',
+          'border-b-2 border-x-2 divide-x-2',
+          'bg-prim-200'
+        )}
       >
-        <Overlay position='top-0 right-1/2 translate-x-1/2' layer='z-sticky'>
-          <TabList
-            className={clsx('mx-auto w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2', 'bg-prim-200')}
-          >
-            <MenuRSTabs />
+        <MenuRSTabs />
 
-            <TabLabel
-              label='Карточка'
-              titleHtml={`${schema.title ?? ''}<br />Версия: ${labelVersion(schema.version, schema.versions)}`}
-            />
-            <TabLabel
-              label='Содержание'
-              titleHtml={`Конституент: ${schema.stats?.count_all ?? 0}<br />Ошибок: ${schema.stats?.count_errors ?? 0}`}
-            />
-            <TabLabel label='Редактор' />
-            <TabLabel label='Граф термов' />
-          </TabList>
-        </Overlay>
+        <TabLabel
+          label='Карточка'
+          titleHtml={`${schema.title ?? ''}<br />Версия: ${labelVersion(schema.version, schema.versions)}`}
+        />
+        <TabLabel
+          label='Содержание'
+          titleHtml={`Конституент: ${schema.stats?.count_all ?? 0}<br />Ошибок: ${schema.stats?.count_errors ?? 0}`}
+        />
+        <TabLabel label='Редактор' />
+        <TabLabel label='Граф термов' />
+      </TabList>
 
-        <div className='overflow-x-hidden'>
-          <TabPanel>
-            <EditorRSFormCard />
-          </TabPanel>
+      <div className='overflow-x-hidden'>
+        <TabPanel>
+          <EditorRSFormCard />
+        </TabPanel>
 
-          <TabPanel>
-            <EditorRSList />
-          </TabPanel>
+        <TabPanel>
+          <EditorRSList />
+        </TabPanel>
 
-          <TabPanel>
-            <EditorConstituenta />
-          </TabPanel>
+        <TabPanel>
+          <EditorConstituenta />
+        </TabPanel>
 
-          <TabPanel>
-            <EditorTermGraph />
-          </TabPanel>
-        </div>
-      </Tabs>
-    </>
+        <TabPanel>
+          <EditorTermGraph />
+        </TabPanel>
+      </div>
+    </Tabs>
   );
 }
diff --git a/rsconcept/frontend/src/features/users/pages/RegisterPage/FormSignup.tsx b/rsconcept/frontend/src/features/users/pages/RegisterPage/FormSignup.tsx
index 1ba648d1..0b5083ef 100644
--- a/rsconcept/frontend/src/features/users/pages/RegisterPage/FormSignup.tsx
+++ b/rsconcept/frontend/src/features/users/pages/RegisterPage/FormSignup.tsx
@@ -9,7 +9,7 @@ import { urls, useConceptNavigation } from '@/app';
 import { HelpTopic } from '@/features/help';
 
 import { isAxiosError } from '@/backend/apiTransport';
-import { FlexColumn, Overlay, Tooltip } from '@/components/Container';
+import { FlexColumn, Tooltip } from '@/components/Container';
 import { Button, SubmitButton, TextURL } from '@/components/Control';
 import { IconHelp } from '@/components/Icons';
 import { type ErrorData } from '@/components/InfoError';
@@ -60,15 +60,7 @@ export function FormSignup() {
       onSubmit={event => void handleSubmit(onSubmit)(event)}
       onChange={resetErrors}
     >
-      <h1>
-        <span>Новый пользователь</span>
-        <Overlay id={globalIDs.email_tooltip} position='top-[0.5rem] right-[1.75rem]'>
-          <IconHelp size='1.25rem' className='icon-primary' />
-        </Overlay>
-        <Tooltip anchorSelect={`#${globalIDs.email_tooltip}`} offset={6}>
-          электронная почта используется для восстановления пароля
-        </Tooltip>
-      </h1>
+      <h1>Новый пользователь</h1>
       <div className='flex gap-12'>
         <FlexColumn>
           <TextInput
@@ -102,7 +94,11 @@ export function FormSignup() {
           />
         </FlexColumn>
 
-        <FlexColumn className='w-[15rem]'>
+        <FlexColumn className='w-[15rem] relative'>
+          <IconHelp id={globalIDs.email_tooltip} className='absolute top-0 right-0 icon-primary' size='1.25rem' />
+          <Tooltip anchorSelect={`#${globalIDs.email_tooltip}`} offset={6}>
+            электронная почта используется для восстановления пароля
+          </Tooltip>
           <TextInput
             id='email'
             {...register('email')}
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index d6b8d266..c7369f44 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -42,8 +42,6 @@
   --z-index-tooltip: 30;
   --z-index-navigation: 50;
   --z-index-modal: 60;
-  --z-index-modal-controls: 70;
-  --z-index-modal-tooltip: 90;
 
   --breakpoint-*: initial;
   --breakpoint-xs: 475px;