F: Refactor z-index and stacking

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>
   );
 }

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',

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,

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
-          <IconSearch size='1.25rem' />
+          className='absolute top-[-0.125rem] left-3 translate-y-1/2 pointer-events-none clr-text-controls'
-        </Overlay>
+          size='1.25rem'
+        />
       ) : null}
       <TextInput
         id={id}

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
+                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))}
               />
-              </Overlay>
             ) : null}
             {getParent(item) === item ? getLabel(item) : `- ${getLabel(item).toLowerCase()}`}
           </div>

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}
       />
     </>

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,7 +104,6 @@ export function ModalForm({
           </div>
         ) : null}
 
-        <Overlay className='z-modalOverlay'>
         <MiniButton
           noPadding
           titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
@@ -113,7 +111,6 @@ export function ModalForm({
           className='float-right mt-2 mr-2'
           onClick={handleCancel}
         />
-        </Overlay>
 
         {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}

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='fixed top-0 left-0 w-full h-full z-modal isolate 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-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')} />
+      <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',

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,7 +48,6 @@ export function ModalView({
           </div>
         ) : null}
 
-        <Overlay className='z-modalOverlay'>
         <MiniButton
           noPadding
           titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
@@ -57,7 +55,6 @@ export function ModalView({
           className='float-right mt-2 mr-2'
           onClick={hideDialog}
         />
-        </Overlay>
 
         {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>

rsconcept/frontend/src/features/help/components/BadgeHelp.tsx

@@ -39,13 +39,11 @@ 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-1 text-sm top-[0.4rem] clr-input' onClick={event => event.stopPropagation()}>
-            <div className='absolute right-0 text-sm top-[0.4rem] clr-input'>
             <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
           </div>
-          </div>
           <TopicPage topic={topic} />
         </Suspense>
       </Tooltip>

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',
         {

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,12 +101,11 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
         />
       </div>
 
+      <div className='relative'>
         {ownerSelector.isOpen ? (
-        <Overlay position='top-[-0.5rem] left-[4rem] cc-icons'>
+          <div className='absolute top-[-0.5rem] left-[4rem]'>
-          {ownerSelector.isOpen ? (
             <SelectUser className='w-[25rem] sm:w-[26rem] text-sm' value={schema.owner} onChange={onSelectUser} />
-          ) : null}
+          </div>
-        </Overlay>
         ) : null}
         <ValueIcon
           className='sm:mb-1'
@@ -116,6 +115,7 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
           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>

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}

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

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) => {

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

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

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>

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
+      <ToolbarSearch total={libraryItems.length} filtered={filtered.length} />
-        position={noNavigation ? 'top-[0.25rem] right-[3rem]' : 'top-[0.25rem] right-0'}
+      <div className='relative cc-fade-in flex'>
-        layer='z-tooltip'
-        className='cc-animate-position'
-      >
         <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 })}

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' />

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')}

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'

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,23 +45,13 @@ 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='absolute top-[1px] right-1/2 translate-x-1/2 border-t w-[30px]' />
-          <div className='border-t w-[30px]'></div>
-        </Overlay>
       ) : null}
 
       {!node.data.operation.is_owned ? (
-        <Overlay position='left-[2px] top-[6px]'>
+        <div className='absolute left-[2px] top-[6px] border-r rounded-none clr-input h-[22px]' />
-          <div className='border-r rounded-none clr-input h-[22px]'></div>
-        </Overlay>
       ) : 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)}
-      >
       <div
         className='text-center line-clamp-2'
         style={{
@@ -69,6 +64,5 @@ export function NodeCore({ node }: NodeCoreProps) {
         {node.data.label}
       </div>
     </div>
-    </>
   );
 }

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'
+    >
+      <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'
+        )}
       >
-      <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 />
 
         <TabLabel label='Карточка' title={schema.title ?? ''} />
         <TabLabel label='Граф' />
       </TabList>
-      </Overlay>
 
       <div className='overflow-x-hidden'>
         <TabPanel>

rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/DlgShowAST.tsx

@@ -26,13 +26,10 @@ export function DlgShowAST() {
   const [isDragging, setIsDragging] = useState(false);
 
   return (
-    <ModalView
+    <ModalView className='relative w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]' helpTopic={HelpTopic.UI_FORMULA_TREE}>
-      className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
-      helpTopic={HelpTopic.UI_FORMULA_TREE}
-    >
       <Overlay
-        position='top-2 right-1/2 translate-x-1/2'
+        position='top-0 -mt-1 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'
+        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}

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,16 +71,10 @@ export function EditorConstituenta() {
   }
 
   return (
-    <>
-      <ToolbarConstituenta
-        activeCst={activeCst}
-        disabled={disabled}
-        onSubmit={initiateSubmit}
-        onReset={() => setToggleReset(prev => !prev)}
-      />
     <div
       tabIndex={-1}
       className={clsx(
+        'relative',
         'cc-fade-in',
         'min-h-[20rem] max-w-[calc(min(100vw,95rem))] mx-auto',
         'flex pt-[1.9rem]',
@@ -104,17 +84,16 @@ export function EditorConstituenta() {
       style={{ maxHeight: mainHeight }}
       onKeyDown={handleInput}
     >
+      <ToolbarConstituenta
+        activeCst={activeCst}
+        disabled={disabled}
+        onSubmit={initiateSubmit}
+        onReset={() => setToggleReset(prev => !prev)}
+      />
       <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} //
+            id={globalIDs.constituenta_editor}
             disabled={disabled}
             toggleReset={toggleReset}
             activeCst={activeCst}
@@ -125,6 +104,5 @@ export function EditorConstituenta() {
       </div>
       <ViewConstituents isMounted={showList} isBottom={isNarrow} />
     </div>
-    </>
   );
 }

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 : `Редактировать словоформы термина`}

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' />}

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,14 +154,9 @@ 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}
@@ -173,8 +164,6 @@ export function EditorRSExpression({
         parseData={parseData}
         onAnalyze={() => handleCheckExpression()}
       />
-        <BadgeHelp topic={HelpTopic.UI_CST_STATUS} offset={4} />
-      </Overlay>
 
       <RSInput
         ref={rsInput}

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,6 +39,11 @@ export function StatusBar({ isModified, processing, activeCst, parseData, onAnal
   })();
 
   return (
+    <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'
+    >
       <div
         tabIndex={0}
         className={clsx(
@@ -43,7 +52,7 @@ export function StatusBar({ isModified, processing, activeCst, parseData, onAnal
           'border',
           'select-none',
           'cursor-pointer',
-        'focus-frame',
+          'focus-frame outline-none',
           'transition-colors duration-500'
         )}
         style={{ backgroundColor: processing ? APP_COLORS.bgDefault : colorStatusBar(status) }}
@@ -53,7 +62,6 @@ export function StatusBar({ isModified, processing, activeCst, parseData, onAnal
       >
         {processing ? (
           <div className='cc-fade-in'>
-          {' '}
             <Loader scale={3} />
           </div>
         ) : null}
@@ -64,5 +72,7 @@ export function StatusBar({ isModified, processing, activeCst, parseData, onAnal
           </div>
         ) : null}
       </div>
+      <BadgeHelp topic={HelpTopic.UI_CST_STATUS} offset={4} />
+    </Overlay>
   );
 }

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx

@@ -35,16 +35,17 @@ export function EditorRSFormCard() {
   }
 
   return (
-    <>
-      <ToolbarRSFormCard onSubmit={initiateSubmit} schema={schema} isMutable={isMutable} deleteSchema={deleteSchema} />
     <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} />
+
       <FlexColumn className='shrink'>
         <FormRSForm />
         <EditorLibraryItem schema={schema} isAttachedToOSS={isAttachedToOSS} />
@@ -52,6 +53,5 @@ export function EditorRSFormCard() {
 
       <RSFormStats stats={schema.stats} isArchive={isArchive} />
     </div>
-    </>
   );
 }

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}

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,9 +126,16 @@ 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]'>
+
+      <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'>
@@ -145,14 +151,6 @@ export function EditorRSList() {
         </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}
-          />
-        </Overlay>
-
       <TableRSList
         items={filtered}
         maxHeight={tableHeight}
@@ -163,6 +161,5 @@ export function EditorRSList() {
         onCreateNew={createCstDefault}
       />
     </div>
-    </>
   );
 }

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}

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'
       >

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'>
+    <div className='flex flex-col relative'>
-      <Overlay position='right-[calc(0.7rem-2px)] top-2 pointer-events-auto'>
       <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}
       />
-      </Overlay>
+
       <div className={clsx('pt-2 clr-input border-x pb-2', { 'border-b rounded-b-md': isFolded })}>
         <div
           className='w-fit select-none'

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,17 +71,21 @@ 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'
+      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('mx-auto w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2', 'bg-prim-200')}
+        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'
+        )}
       >
         <MenuRSTabs />
 
@@ -97,7 +100,6 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
         <TabLabel label='Редактор' />
         <TabLabel label='Граф термов' />
       </TabList>
-        </Overlay>
 
       <div className='overflow-x-hidden'>
         <TabPanel>
@@ -117,6 +119,5 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
         </TabPanel>
       </div>
     </Tabs>
-    </>
   );
 }

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>
+      <h1>Новый пользователь</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>
       <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')}

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;