R: Refactor tabs layout

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

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

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

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

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

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='Установление синтаксической связи с отсылкой на термин'

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='Источник конституент'

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

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