From 7f88d030d48392dfc82bf0fce5dde66281a5ff06 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 21 Sep 2024 20:04:07 +0300
Subject: [PATCH] M: Small UI layout fixes

---
 .../frontend/src/app/ApplicationLayout.tsx    |  5 +-
 .../src/app/Navigation/Navigation.tsx         |  3 +-
 .../src/components/info/InfoError.tsx         |  2 +-
 .../src/components/info/TooltipOperation.tsx  |  2 +-
 .../components/select/PickMultiOperation.tsx  |  1 -
 .../src/components/select/PickSchema.tsx      |  2 +-
 .../components/select/PickSubstitutions.tsx   | 73 +++++++++----------
 .../src/components/select/SelectVersion.tsx   |  2 +-
 .../frontend/src/components/ui/SearchBar.tsx  |  2 +-
 .../src/components/ui/SelectSingle.tsx        |  2 +-
 .../dialogs/DlgCreateCst/FormCreateCst.tsx    |  2 +-
 .../src/dialogs/DlgDeleteOperation.tsx        | 10 +--
 .../DlgEditWordForms/DlgEditWordForms.tsx     |  4 +-
 .../dialogs/DlgInlineSynthesis/TabSchema.tsx  |  4 +-
 .../frontend/src/dialogs/DlgRenameCst.tsx     |  4 +-
 .../src/pages/ManualsPage/ManualsPage.tsx     |  2 +-
 .../pages/ManualsPage/items/HelpRSLang.tsx    | 10 +--
 .../ManualsPage/items/ui/HelpOssGraph.tsx     |  6 +-
 .../ManualsPage/items/ui/HelpRSGraphTerm.tsx  |  6 +-
 .../pages/OssPage/EditorOssCard/FormOSS.tsx   |  2 +-
 .../EditorConstituenta/FormConstituenta.tsx   |  6 +-
 .../EditorRSExpression/EditorRSExpression.tsx |  4 +-
 .../ToolbarRSExpression.tsx                   |  2 +-
 .../EditorRSFormCard/FormRSForm.tsx           |  2 +-
 rsconcept/frontend/src/styling/overrides.css  |  4 +-
 rsconcept/frontend/src/utils/codemirror.ts    |  6 +-
 26 files changed, 72 insertions(+), 96 deletions(-)

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index 7395de5b..7bd3f01e 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@@ -28,10 +28,7 @@ function ApplicationLayout() {
             maxHeight: viewportHeight
           }}
         >
-          <main
-            className='w-full h-full cc-scroll-y'
-            style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}
-          >
+          <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
             <Outlet />
           </main>
           <Footer />
diff --git a/rsconcept/frontend/src/app/Navigation/Navigation.tsx b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
index e4518012..432a6109 100644
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
@@ -28,7 +28,6 @@ function Navigation() {
       className={clsx(
         'z-navigation', // prettier: split lines
         'sticky top-0 left-0 right-0',
-        'w-full',
         'clr-app',
         'select-none'
       )}
@@ -36,7 +35,7 @@ function Navigation() {
       <ToggleNavigation />
       <motion.div
         className={clsx(
-          'pl-2 pr-[1.5rem] sm:pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
+          'pl-2 pr-[1.5rem] sm:pr-[0.9rem] h-[3rem]', // prettier: split lines
           'flex',
           'cc-shadow-border'
         )}
diff --git a/rsconcept/frontend/src/components/info/InfoError.tsx b/rsconcept/frontend/src/components/info/InfoError.tsx
index 4fc55d9c..b980f758 100644
--- a/rsconcept/frontend/src/components/info/InfoError.tsx
+++ b/rsconcept/frontend/src/components/info/InfoError.tsx
@@ -61,7 +61,7 @@ function InfoError({ error }: InfoErrorProps) {
   return (
     <AnimateFade
       className={clsx(
-        'min-w-[25rem] w-full',
+        'min-w-[25rem]',
         'px-3 py-2 flex flex-col',
         'clr-text-red',
         'text-sm font-semibold',
diff --git a/rsconcept/frontend/src/components/info/TooltipOperation.tsx b/rsconcept/frontend/src/components/info/TooltipOperation.tsx
index 3e704cb9..198acf1f 100644
--- a/rsconcept/frontend/src/components/info/TooltipOperation.tsx
+++ b/rsconcept/frontend/src/components/info/TooltipOperation.tsx
@@ -53,7 +53,7 @@ function TooltipOperation({ node, anchor }: TooltipOperationProps) {
         dense
         noHeader
         noFooter
-        className='w-full text-sm border select-none mb-2'
+        className='text-sm border select-none mb-2'
         data={node.data.operation.substitutions}
         columns={columns}
       />
diff --git a/rsconcept/frontend/src/components/select/PickMultiOperation.tsx b/rsconcept/frontend/src/components/select/PickMultiOperation.tsx
index 6461726f..80f4600d 100644
--- a/rsconcept/frontend/src/components/select/PickMultiOperation.tsx
+++ b/rsconcept/frontend/src/components/select/PickMultiOperation.tsx
@@ -130,7 +130,6 @@ function PickMultiOperation({ rows, items, selected, setSelected }: PickMultiOpe
         items={nonSelectedItems} // prettier: split-line
         value={lastSelected}
         onSelectValue={handleSelect}
-        className='w-full'
       />
       <DataTable
         dense
diff --git a/rsconcept/frontend/src/components/select/PickSchema.tsx b/rsconcept/frontend/src/components/select/PickSchema.tsx
index e9f5f279..00c5ca40 100644
--- a/rsconcept/frontend/src/components/select/PickSchema.tsx
+++ b/rsconcept/frontend/src/components/select/PickSchema.tsx
@@ -124,7 +124,7 @@ function PickSchema({
       <div className='flex justify-between clr-input items-center pr-1'>
         <SearchBar
           id={id ? `${id}__search` : undefined}
-          className='clr-input w-full'
+          className='clr-input flex-grow'
           noBorder
           value={filterText}
           onChange={newValue => setFilterText(newValue)}
diff --git a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
index dccd93c0..a74be64c 100644
--- a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
+++ b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
@@ -257,26 +257,24 @@ function PickSubstitutions({
   );
 
   return (
-    <div className='flex flex-col w-full'>
+    <div className='flex flex-col'>
       <div className='flex items-end gap-3 justify-stretch'>
-        <div className='flex-grow flex flex-col basis-1/2'>
-          <div className='flex flex-col gap-[0.125rem] border-x border-t clr-input'>
-            <SelectLibraryItem
-              noBorder
-              placeholder='Выберите аргумент'
-              items={allowSelfSubstitution ? schemas : schemas.filter(item => item.id !== rightArgument?.id)}
-              value={leftArgument}
-              onSelectValue={setLeftArgument}
-            />
-            <SelectConstituenta
-              noBorder
-              items={(leftArgument as IRSForm)?.items.filter(
-                cst => !substitutions.find(item => item.original === cst.id) && (!filter || filter(cst))
-              )}
-              value={leftCst}
-              onSelectValue={setLeftCst}
-            />
-          </div>
+        <div className='flex-grow flex flex-col basis-1/2 gap-[0.125rem] border-x border-t clr-input'>
+          <SelectLibraryItem
+            noBorder
+            placeholder='Выберите аргумент'
+            items={allowSelfSubstitution ? schemas : schemas.filter(item => item.id !== rightArgument?.id)}
+            value={leftArgument}
+            onSelectValue={setLeftArgument}
+          />
+          <SelectConstituenta
+            noBorder
+            items={(leftArgument as IRSForm)?.items.filter(
+              cst => !substitutions.find(item => item.original === cst.id) && (!filter || filter(cst))
+            )}
+            value={leftCst}
+            onSelectValue={setLeftCst}
+          />
         </div>
         <div className='flex flex-col gap-1'>
           <MiniButton
@@ -290,7 +288,6 @@ function PickSubstitutions({
               )
             }
           />
-
           <MiniButton
             title='Добавить в таблицу отождествлений'
             className='mb-[0.375rem] grow-0'
@@ -300,24 +297,22 @@ function PickSubstitutions({
           />
         </div>
 
-        <div className='flex-grow basis-1/2'>
-          <div className='flex flex-col gap-[0.125rem] border-x border-t clr-input'>
-            <SelectLibraryItem
-              noBorder
-              placeholder='Выберите аргумент'
-              items={allowSelfSubstitution ? schemas : schemas.filter(item => item.id !== leftArgument?.id)}
-              value={rightArgument}
-              onSelectValue={setRightArgument}
-            />
-            <SelectConstituenta
-              noBorder
-              items={(rightArgument as IRSForm)?.items.filter(
-                cst => !substitutions.find(item => item.original === cst.id) && (!filter || filter(cst))
-              )}
-              value={rightCst}
-              onSelectValue={setRightCst}
-            />
-          </div>
+        <div className='flex-grow basis-1/2 flex flex-col gap-[0.125rem] border-x border-t clr-input'>
+          <SelectLibraryItem
+            noBorder
+            placeholder='Выберите аргумент'
+            items={allowSelfSubstitution ? schemas : schemas.filter(item => item.id !== leftArgument?.id)}
+            value={rightArgument}
+            onSelectValue={setRightArgument}
+          />
+          <SelectConstituenta
+            noBorder
+            items={(rightArgument as IRSForm)?.items.filter(
+              cst => !substitutions.find(item => item.original === cst.id) && (!filter || filter(cst))
+            )}
+            value={rightCst}
+            onSelectValue={setRightCst}
+          />
         </div>
       </div>
 
@@ -325,7 +320,7 @@ function PickSubstitutions({
         dense
         noHeader
         noFooter
-        className='w-full text-sm border select-none cc-scroll-y'
+        className='text-sm border select-none cc-scroll-y'
         rows={rows}
         contentHeight='1.3rem'
         data={substitutionData}
diff --git a/rsconcept/frontend/src/components/select/SelectVersion.tsx b/rsconcept/frontend/src/components/select/SelectVersion.tsx
index 47198335..c93496f4 100644
--- a/rsconcept/frontend/src/components/select/SelectVersion.tsx
+++ b/rsconcept/frontend/src/components/select/SelectVersion.tsx
@@ -40,7 +40,7 @@ function SelectVersion({ id, className, items, value, onSelectValue, ...restProp
   return (
     <SelectSingle
       id={id}
-      className={clsx('w-full min-w-[12rem] text-ellipsis', className)}
+      className={clsx('min-w-[12rem] text-ellipsis', className)}
       options={options}
       value={{ value: value, label: valueLabel }}
       onChange={data => onSelectValue(data?.value)}
diff --git a/rsconcept/frontend/src/components/ui/SearchBar.tsx b/rsconcept/frontend/src/components/ui/SearchBar.tsx
index 00ab8f50..a2baccb8 100644
--- a/rsconcept/frontend/src/components/ui/SearchBar.tsx
+++ b/rsconcept/frontend/src/components/ui/SearchBar.tsx
@@ -27,7 +27,7 @@ function SearchBar({ id, value, noIcon, onChange, noBorder, placeholder = 'По
         noOutline
         placeholder={placeholder}
         type='search'
-        className={clsx('w-full outline-none bg-transparent', !noIcon && 'pl-10')}
+        className={clsx('outline-none bg-transparent', !noIcon && 'pl-10')}
         noBorder={noBorder}
         value={value}
         onChange={event => (onChange ? onChange(event.target.value) : undefined)}
diff --git a/rsconcept/frontend/src/components/ui/SelectSingle.tsx b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
index c1f65bbb..645709e6 100644
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@@ -113,7 +113,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
         spacing: {
           ...theme.spacing, // prettier: split-lines
           baseUnit: size.isSmall ? 2 : 4,
-          menuGutter: size.isSmall ? 4 : 8,
+          menuGutter: 2,
           controlHeight: size.isSmall ? 28 : 38
         },
         colors: {
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
index f01f3c09..8fe031ff 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
@@ -53,7 +53,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         <SelectSingle
           id='dlg_cst_type'
           placeholder='Выберите тип'
-          className='w-[15rem]'
+          className='w-[16rem]'
           options={SelectorCstType}
           value={{ value: state.cst_type, label: labelCstType(state.cst_type) }}
           onChange={data => handleTypeChange(data?.value ?? CstType.BASE)}
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
index e7c41d35..96b4830d 100644
--- a/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
@@ -43,15 +43,7 @@ function DlgDeleteOperation({ hideWindow, target, onSubmit }: DlgDeleteOperation
         />
       </Overlay>
 
-      <TextInput
-        disabled
-        dense
-        noBorder
-        id='operation_alias'
-        label='Операция'
-        className='w-full'
-        value={target.alias}
-      />
+      <TextInput disabled dense noBorder id='operation_alias' label='Операция' value={target.alias} />
       <Checkbox
         label='Сохранить наследованные конституенты'
         titleHtml='Наследованные конституенты <br/>превратятся в дописанные'
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
index 49d12115..17a08762 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
@@ -201,9 +201,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
             onClick={handleGenerateLexeme}
           />
         </div>
-        <div
-          className={clsx('mt-3 mb-2', 'w-full flex justify-center items-center', 'text-sm text-center font-semibold')}
-        >
+        <div className={clsx('mt-3 mb-2 mx-auto', 'flex items-center', 'text-sm text-center font-semibold')}>
           <div>Заданные вручную словоформы [{forms.length}]</div>
           <MiniButton
             noHover
diff --git a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSchema.tsx b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSchema.tsx
index 465d0a9c..605104e0 100644
--- a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSchema.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSchema.tsx
@@ -37,8 +37,8 @@ function TabSchema({ selected, receiver, setSelected }: TabSchemaProps) {
           id='dlg_selected_schema_title'
           disabled
           noBorder
-          className='w-full'
-          placeholder='Выберите из списка ниже'
+          className='flex-grow'
+          placeholder='Схема не выбрана'
           value={selectedInfo?.title ?? ''}
           dense
         />
diff --git a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
index c1dbef15..d7d33073 100644
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@@ -47,12 +47,12 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
       hideWindow={hideWindow}
       canSubmit={validated}
       onSubmit={() => onRename(cstData)}
-      className={clsx('w-[30rem]', 'py-6 pr-3 pl-6 flex gap-3 justify-center items-center')}
+      className={clsx('w-[30rem]', 'py-6 pr-3 pl-6 flex gap-3 justify-center items-center ')}
     >
       <SelectSingle
         id='dlg_cst_type'
         placeholder='Выберите тип'
-        className='min-w-[16rem] self-center'
+        className='min-w-[16rem]'
         isDisabled={!allowChangeType}
         options={SelectorCstType}
         value={{
diff --git a/rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx b/rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx
index fd3a9ac0..871e3a1e 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx
@@ -26,7 +26,7 @@ function ManualsPage() {
   );
 
   return (
-    <div className='flex w-full gap-2' style={{ minHeight: mainHeight }}>
+    <div className='flex gap-2' style={{ minHeight: mainHeight }}>
       <TopicsList activeTopic={activeTopic} onChangeTopic={topic => onSelectTopic(topic)} />
       <ViewTopic topic={activeTopic} />
     </div>
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx
index 13268903..1ce51517 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx
@@ -28,12 +28,10 @@ function HelpRSLang() {
       <p>2. <a className='underline' href={external_urls.ponomarev}>Текст: Учебник И. Н. Пономарева</a></p>
       <p>3. <a className='underline' href={external_urls.full_course}>Видео: лекции для 4 курса (второй семестр 2022-23 год)</a></p>
     </div>
-    <div className='justify-center w-full'>
-      <EmbedYoutube
-        videoID={youtube.intro}
-        pxHeight={videoHeight}
-      />
-    </div>
+    <EmbedYoutube
+      videoID={youtube.intro}
+      pxHeight={videoHeight}
+    />
     <div className='dense'>
       <Subtopics headTopic={HelpTopic.RSLANG} />
     </div>
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpOssGraph.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpOssGraph.tsx
index 51e9c650..7bd77051 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpOssGraph.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpOssGraph.tsx
@@ -26,7 +26,7 @@ function HelpOssGraph() {
     <div className='flex flex-col'>
       <h1 className='sm:pr-[6rem]'>Граф синтеза</h1>
       <div className='flex flex-col sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Настройка графа</h1>
           <li>
             <IconFitImage className='inline-icon' /> Вписать в экран
@@ -50,7 +50,7 @@ function HelpOssGraph() {
 
         <Divider vertical margins='mx-3 mt-3' className='hidden sm:block' />
 
-        <div className='w-full sm:w-[21rem]'>
+        <div className='sm:w-[21rem]'>
           <h1>Изменение узлов</h1>
           <li>Клик на операцию – выделение</li>
           <li>Esc – сбросить выделение</li>
@@ -72,7 +72,7 @@ function HelpOssGraph() {
       <Divider margins='my-3' className='hidden sm:block' />
 
       <div className='flex flex-col-reverse mb-3 sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Общие</h1>
           <li>
             <IconReset className='inline-icon' /> Сбросить изменения
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx
index dd7d2fca..c3570b1b 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx
@@ -28,7 +28,7 @@ function HelpRSGraphTerm() {
     <div className='flex flex-col'>
       <h1>Граф термов</h1>
       <div className='flex flex-col sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Настройка графа</h1>
           <li>Цвет – покраска узлов</li>
           <li>Граф – расположение</li>
@@ -46,7 +46,7 @@ function HelpRSGraphTerm() {
 
         <Divider vertical margins='mx-3 mt-3' className='hidden sm:block' />
 
-        <div className='w-full sm:w-[21rem]'>
+        <div className='sm:w-[21rem]'>
           <h1>Изменение узлов</h1>
           <li>Клик на конституенту – выделение</li>
           <li>
@@ -70,7 +70,7 @@ function HelpRSGraphTerm() {
       <Divider margins='my-3' className='hidden sm:block' />
 
       <div className='flex flex-col-reverse mb-3 sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Общие</h1>
           <li>
             <IconOSS className='inline-icon' /> переход к связанной <LinkTopic text='ОСС' topic={HelpTopic.CC_OSS} />
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssCard/FormOSS.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssCard/FormOSS.tsx
index 9cff3564..5e69492b 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssCard/FormOSS.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssCard/FormOSS.tsx
@@ -95,7 +95,7 @@ function FormOSS({ id, isModified, setIsModified }: FormOSSProps) {
         disabled={!controller.isMutable}
         onChange={event => setTitle(event.target.value)}
       />
-      <div className='flex justify-between w-full gap-3 mb-3'>
+      <div className='flex justify-between gap-3 mb-3'>
         <TextInput
           id='schema_alias'
           required
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index 5f5ea0fa..845b0727 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -139,11 +139,7 @@ function FormConstituenta({
           onRename={onRename}
         />
       ) : null}
-      <form
-        id={id}
-        className={clsx('cc-column', 'mt-1 w-full md:w-[48.8rem] shrink-0', 'px-6 py-1')}
-        onSubmit={handleSubmit}
-      >
+      <form id={id} className={clsx('cc-column', 'mt-1 md:w-[48.8rem] shrink-0', 'px-6 py-1')} onSubmit={handleSubmit}>
         <RefsInput
           key='cst_term'
           id='cst_term'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
index b2b6d48f..2f72ee5e 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
@@ -166,9 +166,9 @@ function EditorRSExpression({
       />
 
       <Overlay
-        position='top-[-0.5rem]'
+        position='top-[-0.5rem] right-1/2 translate-x-1/2'
         layer='z-pop'
-        className='pl-[8.5rem] xs:pl-[2rem] flex justify-center w-full gap-1'
+        className='w-fit pl-[8.5rem] xs:pl-[2rem] flex gap-1'
       >
         <StatusBar
           processing={parser.processing}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ToolbarRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ToolbarRSExpression.tsx
index cd10ad29..a80b3bc1 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ToolbarRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ToolbarRSExpression.tsx
@@ -15,7 +15,7 @@ function ToolbarRSExpression({ disabled, showControls, toggleControls, showAST }
   const model = useRSForm();
 
   return (
-    <Overlay position='top-[-0.5rem] right-0' layer='z-sticky' className='cc-icons'>
+    <Overlay position='top-[-0.5rem] right-0' layer='z-pop' className='cc-icons'>
       {!disabled || model.processing ? (
         <MiniButton
           title='Отображение специальной клавиатуры'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx
index a450703b..98b4b3a8 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx
@@ -95,7 +95,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
         disabled={!controller.isContentEditable}
         onChange={event => setTitle(event.target.value)}
       />
-      <div className='flex justify-between w-full gap-3 mb-3'>
+      <div className='flex justify-between gap-3 mb-3'>
         <TextInput
           id='schema_alias'
           required
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index 11bc1268..1d269e1f 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -35,6 +35,7 @@
 
 .cm-editor .cm-placeholder {
   color: var(--cl-fg-60);
+  @apply font-main;
   .dark & {
     color: var(--cd-fg-60);
   }
@@ -72,7 +73,8 @@
   }
 }
 
-:is(.react-flow__node-input, .react-flow__node-synthesis) {
+.react-flow__node-input,
+.react-flow__node-synthesis {
   cursor: pointer;
 
   border: 1px solid;
diff --git a/rsconcept/frontend/src/utils/codemirror.ts b/rsconcept/frontend/src/utils/codemirror.ts
index 054ffb6a..5caaf5ef 100644
--- a/rsconcept/frontend/src/utils/codemirror.ts
+++ b/rsconcept/frontend/src/utils/codemirror.ts
@@ -229,7 +229,7 @@ export function domTooltipConstituenta(cst?: IConstituenta, canClick?: boolean):
 
     if (canClick) {
       const clickTip = document.createElement('p');
-      clickTip.className = 'w-full text-center text-xs mt-2';
+      clickTip.className = 'text-center text-xs mt-1';
       clickTip.innerText = 'Ctrl + клик для перехода';
       dom.appendChild(clickTip);
     }
@@ -288,7 +288,7 @@ export function domTooltipEntityReference(
 
   if (canClick) {
     const clickTip = document.createElement('p');
-    clickTip.className = 'w-full text-center text-xs mt-2';
+    clickTip.className = 'text-center text-xs mt-1';
     clickTip.innerHTML = 'Ctrl + клик для перехода</br>Ctrl + пробел для редактирования';
     dom.appendChild(clickTip);
   }
@@ -333,7 +333,7 @@ export function domTooltipSyntacticReference(
 
   if (canClick) {
     const clickTip = document.createElement('p');
-    clickTip.className = 'w-full text-center text-xs mt-2';
+    clickTip.className = 'text-center text-xs mt-1';
     clickTip.innerHTML = 'Ctrl + пробел для редактирования';
     dom.appendChild(clickTip);
   }