From aea9dececf540a291e8c21e17ee5da8aa3bc8ba3 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 11 Mar 2025 11:35:22 +0300
Subject: [PATCH] R: Refactor tabs layout

---
 rsconcept/frontend/src/components/Input/SearchBar.tsx |  6 +++---
 .../dialogs/DlgCreateOperation/DlgCreateOperation.tsx | 10 ++--------
 .../oss/dialogs/DlgEditOperation/DlgEditOperation.tsx | 10 ++--------
 .../src/features/oss/pages/OssPage/OssTabs.tsx        | 11 +----------
 .../rsform/dialogs/DlgCstTemplate/DlgCstTemplate.tsx  |  9 ++-------
 .../dialogs/DlgEditReference/DlgEditReference.tsx     |  9 ++-------
 .../dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx |  9 ++-------
 .../dialogs/DlgInlineSynthesis/TabConstituents.tsx    |  1 +
 .../src/features/rsform/pages/RSFormPage/RSTabs.tsx   | 11 +----------
 9 files changed, 16 insertions(+), 60 deletions(-)

diff --git a/rsconcept/frontend/src/components/Input/SearchBar.tsx b/rsconcept/frontend/src/components/Input/SearchBar.tsx
index 0f8a36fc..1391354c 100644
--- a/rsconcept/frontend/src/components/Input/SearchBar.tsx
+++ b/rsconcept/frontend/src/components/Input/SearchBar.tsx
@@ -39,10 +39,10 @@ export function SearchBar({
   ...restProps
 }: SearchBarProps) {
   return (
-    <div className={clsx('relative', className)} {...restProps}>
+    <div className={clsx('relative flex items-center', className)} {...restProps}>
       {!noIcon ? (
         <IconSearch
-          className='absolute -top-0.5 left-3 translate-y-1/2 pointer-events-none clr-text-controls'
+          className='absolute -top-0.5 left-2 translate-y-1/2 pointer-events-none clr-text-controls'
           size='1.25rem'
         />
       ) : null}
@@ -52,7 +52,7 @@ export function SearchBar({
         transparent
         placeholder={placeholder}
         type='search'
-        className={clsx('bg-transparent', !noIcon && 'pl-10')}
+        className={clsx('bg-transparent', !noIcon && 'pl-8')}
         noBorder={noBorder}
         value={query}
         onChange={event => onChangeQuery?.(event.target.value)}
diff --git a/rsconcept/frontend/src/features/oss/dialogs/DlgCreateOperation/DlgCreateOperation.tsx b/rsconcept/frontend/src/features/oss/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
index 2a7d4edf..bde03e04 100644
--- a/rsconcept/frontend/src/features/oss/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
+++ b/rsconcept/frontend/src/features/oss/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import clsx from 'clsx';
 
 import { HelpTopic } from '@/features/help';
 
@@ -102,13 +101,8 @@ export function DlgCreateOperation() {
       className='w-160 px-6 h-128'
       helpTopic={HelpTopic.CC_OSS}
     >
-      <Tabs
-        selectedTabClassName='clr-selected'
-        className='flex flex-col pt-2'
-        selectedIndex={activeTab}
-        onSelect={handleSelectTab}
-      >
-        <TabList className={clsx('self-center absolute top-10', 'flex', 'border divide-x rounded-none', 'bg-prim-200')}>
+      <Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={handleSelectTab}>
+        <TabList className='z-pop mx-auto -mb-5 flex border divide-x rounded-none bg-prim-200'>
           <TabLabel
             title={describeOperationType(OperationType.INPUT)}
             label={labelOperationType(OperationType.INPUT)}
diff --git a/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/DlgEditOperation.tsx b/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/DlgEditOperation.tsx
index 9f9448d8..64e8ca74 100644
--- a/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/DlgEditOperation.tsx
+++ b/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/DlgEditOperation.tsx
@@ -3,7 +3,6 @@
 import { Suspense, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import clsx from 'clsx';
 
 import { HelpTopic } from '@/features/help';
 
@@ -75,13 +74,8 @@ export function DlgEditOperation() {
       helpTopic={HelpTopic.UI_SUBSTITUTIONS}
       hideHelpWhen={() => activeTab !== TabID.SUBSTITUTION}
     >
-      <Tabs
-        selectedTabClassName='clr-selected'
-        className='flex flex-col'
-        selectedIndex={activeTab}
-        onSelect={setActiveTab}
-      >
-        <TabList className={clsx('mb-3 self-center', 'flex', 'border divide-x rounded-none', 'bg-prim-200')}>
+      <Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={setActiveTab}>
+        <TabList className='mb-3 mx-auto w-fit flex border divide-x rounded-none bg-prim-200'>
           <TabLabel title='Текстовые поля' label='Карточка' className='w-32' />
           {target.operation_type === OperationType.SYNTHESIS ? (
             <TabLabel title='Выбор аргументов операции' label='Аргументы' className='w-32' />
diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx
index ed1778a0..08aa0abb 100644
--- a/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/OssPage/OssTabs.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useLayoutEffect } from 'react';
-import clsx from 'clsx';
 
 import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
 
@@ -62,15 +61,7 @@ export function OssTabs({ activeTab }: OssTabsProps) {
       selectedTabClassName='clr-selected'
       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'
-        )}
-      >
+      <TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-prim-200'>
         <MenuOssTabs />
 
         <TabLabel label='Карточка' title={schema.title ?? ''} />
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/DlgCstTemplate.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/DlgCstTemplate.tsx
index d37b0b06..4feb21f4 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/DlgCstTemplate.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/DlgCstTemplate.tsx
@@ -69,13 +69,8 @@ export function DlgCstTemplate() {
       onSubmit={event => void methods.handleSubmit(onSubmit)(event)}
       helpTopic={HelpTopic.RSL_TEMPLATES}
     >
-      <Tabs
-        selectedTabClassName='clr-selected'
-        className='flex flex-col'
-        selectedIndex={activeTab}
-        onSelect={setActiveTab}
-      >
-        <TabList className='mb-4 self-center flex border divide-x rounded-none bg-prim-200'>
+      <Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={setActiveTab}>
+        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
           <TabLabel label='Шаблон' title='Выбор шаблона выражения' className='w-32' />
           <TabLabel label='Аргументы' title='Подстановка аргументов шаблона' className='w-32' />
           <TabLabel label='Конституента' title='Редактирование конституенты' className='w-32' />
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/DlgEditReference.tsx
index 1b38b842..d94a7165 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/DlgEditReference.tsx
@@ -104,13 +104,8 @@ export function DlgEditReference() {
       className='w-160 px-6 h-128'
       helpTopic={HelpTopic.TERM_CONTROL}
     >
-      <Tabs
-        selectedTabClassName='clr-selected'
-        className='flex flex-col'
-        selectedIndex={activeTab}
-        onSelect={handleChangeTab}
-      >
-        <TabList className='mb-3 self-center flex border divide-x rounded-none bg-prim-200'>
+      <Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={handleChangeTab}>
+        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
           <TabLabel title='Отсылка на термин в заданной словоформе' label={labelReferenceType(ReferenceType.ENTITY)} />
           <TabLabel
             title='Установление синтаксической связи с отсылкой на термин'
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
index 72c2de05..9ed64355 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
@@ -57,13 +57,8 @@ export function DlgInlineSynthesis() {
       canSubmit={methods.formState.isValid && sourceID !== null}
       onSubmit={event => void methods.handleSubmit(onSubmit)(event)}
     >
-      <Tabs
-        selectedTabClassName='clr-selected'
-        className='flex flex-col'
-        selectedIndex={activeTab}
-        onSelect={setActiveTab}
-      >
-        <TabList className='mb-3 self-center flex border divide-x rounded-none bg-prim-200'>
+      <Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={setActiveTab}>
+        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
           <TabLabel
             label='Схема' //
             title='Источник конституент'
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabConstituents.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabConstituents.tsx
index d09460b9..a0bafe47 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabConstituents.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgInlineSynthesis/TabConstituents.tsx
@@ -34,6 +34,7 @@ export function TabConstituents() {
           rows={13}
           value={field.value}
           onChange={handleSelectItems}
+          className='w-144'
         />
       )}
     />
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx
index 9b07c9a4..0b9a5dc6 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSTabs.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useLayoutEffect } from 'react';
-import clsx from 'clsx';
 
 import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
 
@@ -78,15 +77,7 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
       selectedTabClassName='clr-selected'
       className='relative flex flex-col 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'
-        )}
-      >
+      <TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-prim-200'>
         <MenuRSTabs />
 
         <TabLabel