From db1d5077c798c6654d127f3f14e423dc91c9500c Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 18 Dec 2023 19:42:27 +0300
Subject: [PATCH] Refactoring: attribute names + introducing namespace

---
 .../frontend/src/components/Common/Button.tsx | 11 ++-
 .../src/components/Common/Checkbox.tsx        |  7 +-
 .../src/components/Common/ConceptSearch.tsx   |  9 +--
 .../src/components/Common/ConceptTab.tsx      |  7 +-
 .../src/components/Common/ConceptTooltip.tsx  |  2 +-
 .../src/components/Common/Dropdown.tsx        | 15 ++--
 .../src/components/Common/DropdownButton.tsx  | 20 +++---
 .../components/Common/DropdownCheckbox.tsx    |  6 +-
 .../src/components/Common/FileInput.tsx       | 29 ++++----
 .../src/components/Common/FlexColumn.tsx      | 26 +++++++
 .../frontend/src/components/Common/Label.tsx  |  9 ++-
 .../src/components/Common/LabeledValue.tsx    |  6 +-
 .../src/components/Common/MiniButton.tsx      | 13 ++--
 .../frontend/src/components/Common/Modal.tsx  | 22 +++---
 .../src/components/Common/Overlay.tsx         | 22 ++++--
 .../src/components/Common/PageControls.tsx    |  4 +-
 .../src/components/Common/SelectorButton.tsx  | 19 +++--
 .../src/components/Common/SubmitButton.tsx    |  8 +--
 .../src/components/Common/SwitchButton.tsx    | 14 ++--
 .../src/components/Common/TextArea.tsx        |  8 +--
 .../src/components/Common/TextInput.tsx       |  7 +-
 .../src/components/Common/TextURL.tsx         | 12 ++--
 .../src/components/Common/Tristate.tsx        |  3 +-
 .../src/components/Common/commonInterfaces.ts | 20 ------
 .../src/components/DataTable/DataTable.tsx    |  4 +-
 .../src/components/DataTable/SelectAll.tsx    |  2 +-
 .../components/Help/ConstituentaTooltip.tsx   |  2 +-
 .../src/components/Help/HelpButton.tsx        | 10 +--
 .../components/Navigation/UserDropdown.tsx    |  6 +-
 .../src/components/RSInput/RSInput.tsx        | 19 ++---
 .../src/components/Shared/SelectGrammeme.tsx  |  4 --
 rsconcept/frontend/src/components/props.d.ts  | 36 ++++++++++
 .../src/dialogs/DlgCloneLibraryItem.tsx       |  6 +-
 .../DlgConstituentaTemplate/ArgumentsTab.tsx  | 20 +++---
 .../ConstituentaTab.tsx                       |  4 +-
 .../DlgConstituentaTemplate.tsx               | 17 ++---
 .../DlgConstituentaTemplate/TemplateTab.tsx   | 72 +++++++++----------
 .../frontend/src/dialogs/DlgCreateCst.tsx     |  6 +-
 .../src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx | 11 ++-
 .../DlgEditReference/DlgEditReference.tsx     | 10 +--
 .../dialogs/DlgEditReference/EntityTab.tsx    |  9 +--
 .../DlgEditWordForms/DlgEditWordForms.tsx     | 18 ++---
 .../DlgEditWordForms/WordFormsTable.tsx       |  2 +-
 .../frontend/src/dialogs/DlgGraphParams.tsx   | 10 +--
 .../frontend/src/dialogs/DlgRenameCst.tsx     |  2 +-
 .../frontend/src/dialogs/DlgUploadRSForm.tsx  |  3 +-
 .../frontend/src/pages/CreateRSFormPage.tsx   | 10 +--
 .../src/pages/LibraryPage/PickerStrategy.tsx  |  6 +-
 .../src/pages/LibraryPage/SearchPanel.tsx     |  2 +-
 .../src/pages/LibraryPage/ViewLibrary.tsx     |  2 +-
 rsconcept/frontend/src/pages/LoginPage.tsx    |  5 +-
 .../src/pages/ManualsPage/TopicsList.tsx      |  3 +-
 .../ConstituentaToolbar.tsx                   | 10 +--
 .../EditorConstituenta/FormConstituenta.tsx   | 10 +--
 .../EditorRSExpression/EditorRSExpression.tsx |  4 +-
 .../EditorRSExpression/RSEditControls.tsx     | 54 +++++++-------
 .../EditorRSExpression/RSLocalButton.tsx      |  6 +-
 .../RSFormPage/EditorRSForm/EditorRSForm.tsx  |  5 +-
 .../RSFormPage/EditorRSForm/FormRSForm.tsx    | 15 ++--
 .../RSFormPage/EditorRSForm/RSFormStats.tsx   |  2 +-
 .../RSFormPage/EditorRSForm/RSFormToolbar.tsx | 13 ++--
 .../RSFormPage/EditorRSList/RSListToolbar.tsx | 14 ++--
 .../EditorTermGraph/EditorTermGraph.tsx       |  9 +--
 .../EditorTermGraph/GraphToolbar.tsx          | 14 ++--
 .../RSFormPage/EditorTermGraph/ViewHidden.tsx |  2 +-
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  4 +-
 .../src/pages/RSFormPage/RSTabsMenu.tsx       | 18 ++---
 .../ViewConstituents/ConstituentsSearch.tsx   | 10 +--
 rsconcept/frontend/src/pages/RegisterPage.tsx | 18 ++---
 .../pages/UserProfilePage/EditorPassword.tsx  |  5 +-
 .../pages/UserProfilePage/EditorProfile.tsx   | 10 ++-
 .../src/pages/UserProfilePage/UserTabs.tsx    |  2 +-
 rsconcept/frontend/src/utils/codemirror.ts    |  6 +-
 rsconcept/frontend/src/utils/constants.ts     |  8 +++
 74 files changed, 458 insertions(+), 381 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/Common/FlexColumn.tsx
 delete mode 100644 rsconcept/frontend/src/components/Common/commonInterfaces.ts
 create mode 100644 rsconcept/frontend/src/components/props.d.ts

diff --git a/rsconcept/frontend/src/components/Common/Button.tsx b/rsconcept/frontend/src/components/Common/Button.tsx
index 0479c7b5..8496c5b5 100644
--- a/rsconcept/frontend/src/components/Common/Button.tsx
+++ b/rsconcept/frontend/src/components/Common/Button.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 
-import { IColorsProps, IControlProps } from './commonInterfaces';
+import { CProps } from '../props';
 
 interface ButtonProps
-extends IControlProps, IColorsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'| 'type'> {
+extends CProps.Control, CProps.Colors, CProps.Button {
   text?: string
   icon?: React.ReactNode
 
@@ -12,7 +12,7 @@ extends IControlProps, IColorsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonE
 }
 
 function Button({
-  text, icon, tooltip, loading,
+  text, icon, loading,
   dense, disabled, noBorder, noOutline,
   colors = 'clr-btn-default',
   className,
@@ -21,7 +21,6 @@ function Button({
   return (
   <button type='button'
     disabled={disabled ?? loading}
-    title={tooltip}
     className={clsx(
       'inline-flex gap-2 items-center justify-center',
       'select-none disabled:cursor-not-allowed',
@@ -34,8 +33,8 @@ function Button({
         'outline-none': noOutline,
         'clr-outline': !noOutline,
       },
-      colors,
-      className
+      className,
+      colors
     )}
     {...restProps}
   >
diff --git a/rsconcept/frontend/src/components/Common/Checkbox.tsx b/rsconcept/frontend/src/components/Common/Checkbox.tsx
index 0395cabe..609d2aa8 100644
--- a/rsconcept/frontend/src/components/Common/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/Common/Checkbox.tsx
@@ -2,20 +2,20 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 
 import { CheckboxCheckedIcon } from '../Icons';
+import { CProps } from '../props';
 import Label from './Label';
 
 export interface CheckboxProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title' | 'value' | 'onClick' > {
+extends Omit<CProps.Button, 'value' | 'onClick'> {
   label?: string
   disabled?: boolean
-  tooltip?: string
 
   value: boolean
   setValue?: (newValue: boolean) => void
 }
 
 function Checkbox({
-  id, disabled, tooltip, label, 
+  id, disabled, label, 
   className, value, setValue, ...restProps
 }: CheckboxProps) {
   const cursor = useMemo(
@@ -46,7 +46,6 @@ function Checkbox({
       cursor,
       className
     )}
-    title={tooltip}
     disabled={disabled}
     onClick={handleClick}
     {...restProps}
diff --git a/rsconcept/frontend/src/components/Common/ConceptSearch.tsx b/rsconcept/frontend/src/components/Common/ConceptSearch.tsx
index 8bb67596..640ec6f4 100644
--- a/rsconcept/frontend/src/components/Common/ConceptSearch.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptSearch.tsx
@@ -1,18 +1,19 @@
 import { BiSearchAlt2 } from 'react-icons/bi';
 
+import { CProps } from '../props';
 import Overlay from './Overlay';
 import TextInput from './TextInput';
 
-interface ConceptSearchProps  {
+interface ConceptSearchProps
+extends CProps.Styling {
   value: string
   onChange?: (newValue: string) => void
   noBorder?: boolean
-  dimensions?: string
 }
 
-function ConceptSearch({ value, onChange, noBorder, dimensions }: ConceptSearchProps) {
+function ConceptSearch({ value, onChange, noBorder, ...restProps }: ConceptSearchProps) {
   return (
-  <div className={dimensions}>
+  <div {...restProps}>
     <Overlay
       position='top-[-0.125rem] left-3 translate-y-1/2'
       className='pointer-events-none clr-text-controls'
diff --git a/rsconcept/frontend/src/components/Common/ConceptTab.tsx b/rsconcept/frontend/src/components/Common/ConceptTab.tsx
index c7e67a63..7290c0bf 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTab.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTab.tsx
@@ -3,13 +3,11 @@ import type { TabProps } from 'react-tabs';
 import { Tab } from 'react-tabs';
 
 interface ConceptTabProps
-extends Omit<TabProps, 'title' | 'children'> {
-  className?: string
-  tooltip?: string
+extends Omit<TabProps, 'children'> {
   label?: string
 }
 
-function ConceptTab({ label, tooltip, className, ...otherProps }: ConceptTabProps) {
+function ConceptTab({ label, className, ...otherProps }: ConceptTabProps) {
   return (
   <Tab
     className={clsx(
@@ -20,7 +18,6 @@ function ConceptTab({ label, tooltip, className, ...otherProps }: ConceptTabProp
       'select-none hover:cursor-pointer',
       className
     )}
-    title={tooltip}
     {...otherProps}
   >
     {label}
diff --git a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
index 13d9b454..ecf3a42f 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTooltip.tsx
@@ -12,9 +12,9 @@ extends Omit<ITooltip, 'variant'> {
 }
 
 function ConceptTooltip({
-  className,
   layer='z-tooltip',
   place='bottom',
+  className,
   style,
   ...restProps
 }: ConceptTooltipProps) {
diff --git a/rsconcept/frontend/src/components/Common/Dropdown.tsx b/rsconcept/frontend/src/components/Common/Dropdown.tsx
index 3d310976..a3ba3ca3 100644
--- a/rsconcept/frontend/src/components/Common/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/Common/Dropdown.tsx
@@ -1,17 +1,19 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
 import Overlay from './Overlay';
 
-interface DropdownProps {
+interface DropdownProps
+extends CProps.Styling {
   stretchLeft?: boolean
-  dimensions?: string
   children: React.ReactNode
 }
 
 function Dropdown({
-  dimensions = 'w-fit',
+  className,
   stretchLeft,
-  children
+  children,
+  ...restProps
 }: DropdownProps) {
   return (
   <Overlay 
@@ -26,8 +28,9 @@ function Dropdown({
         'right-0': stretchLeft,
         'left-0': !stretchLeft
       },
-      dimensions
-  )}
+      className
+    )}
+    {...restProps}
   >
     {children}
   </Overlay>);
diff --git a/rsconcept/frontend/src/components/Common/DropdownButton.tsx b/rsconcept/frontend/src/components/Common/DropdownButton.tsx
index c06c431c..79cea12b 100644
--- a/rsconcept/frontend/src/components/Common/DropdownButton.tsx
+++ b/rsconcept/frontend/src/components/Common/DropdownButton.tsx
@@ -1,27 +1,22 @@
 import clsx from 'clsx';
 
-interface DropdownButtonProps {
+import { CProps } from '../props';
+
+interface DropdownButtonProps
+extends CProps.Button {
   text?: string
   icon?: React.ReactNode
 
-  className?: string
-  tooltip?: string | undefined
-  onClick?: () => void
-  disabled?: boolean
-
   children?: React.ReactNode
 }
 
 function DropdownButton({
-  text, icon, children,
-  tooltip, className,
-  disabled,
-  onClick
+  text, icon, className, onClick,
+  children,
+  ...restProps
 }: DropdownButtonProps) {
   return (
   <button type='button'
-    disabled={disabled}
-    title={tooltip}
     onClick={onClick}
     className={clsx(
       'px-3 py-1 inline-flex items-center gap-2',
@@ -34,6 +29,7 @@ function DropdownButton({
       },
       className
     )}
+    {...restProps}
   >
     {children ? children : null}
     {!children && icon ? icon : null}
diff --git a/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx b/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx
index c62f605c..edb917b2 100644
--- a/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx
+++ b/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx
@@ -5,15 +5,15 @@ import Checkbox from './Checkbox';
 interface DropdownCheckboxProps {
   value: boolean
   label?: string
-  tooltip?: string
+  title?: string
   disabled?: boolean
   setValue?: (newValue: boolean) => void
 }
 
-function DropdownCheckbox({ tooltip, setValue, disabled, ...restProps }: DropdownCheckboxProps) {
+function DropdownCheckbox({ title, setValue, disabled, ...restProps }: DropdownCheckboxProps) {
   return (
   <div
-    title={tooltip}
+    title={title}
     className={clsx(
       'px-3 py-1',
       'text-left overflow-ellipsis whitespace-nowrap',
diff --git a/rsconcept/frontend/src/components/Common/FileInput.tsx b/rsconcept/frontend/src/components/Common/FileInput.tsx
index b4670175..f227f5a4 100644
--- a/rsconcept/frontend/src/components/Common/FileInput.tsx
+++ b/rsconcept/frontend/src/components/Common/FileInput.tsx
@@ -4,22 +4,22 @@ import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { BiUpload } from 'react-icons/bi';
 
+import { CProps } from '../props';
 import Button from './Button';
 import Label from './Label';
 
 interface FileInputProps 
-extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title' | 'style' | 'accept' | 'type'> {
+extends Omit<CProps.Input, 'accept' | 'type'> {
   label: string
-  tooltip?: string
-  dimensions?: string
   
   acceptType?: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 function FileInput({
-  label, acceptType, tooltip,
-  dimensions = 'w-fit', onChange,
+  label, acceptType, title,
+  className, style,
+  onChange,
   ...restProps 
 }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -31,9 +31,9 @@ function FileInput({
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
-      setFileName(event.target.files[0].name)
+      setFileName(event.target.files[0].name);
     } else {
-      setFileName('')
+      setFileName('');
     }
     if (onChange) {
       onChange(event);
@@ -41,11 +41,14 @@ function FileInput({
   };
 
   return (
-  <div className={clsx(
-    'py-2',
-    'flex flex-col gap-2 items-start',
-    dimensions
-  )}>
+  <div 
+    className={clsx(
+      'py-2',
+      'flex flex-col gap-2 items-center',
+      className
+    )}
+    style={style}
+  >
     <input type='file'
       ref={inputRef}
       style={{ display: 'none' }}
@@ -57,7 +60,7 @@ function FileInput({
       text={label}
       icon={<BiUpload size='1.5rem' />}
       onClick={handleUploadClick}
-      tooltip={tooltip}
+      title={title}
     />
     <Label text={fileName} />
   </div>);
diff --git a/rsconcept/frontend/src/components/Common/FlexColumn.tsx b/rsconcept/frontend/src/components/Common/FlexColumn.tsx
new file mode 100644
index 00000000..64e2cdca
--- /dev/null
+++ b/rsconcept/frontend/src/components/Common/FlexColumn.tsx
@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+
+import { classnames } from '@/utils/constants';
+
+import { CProps } from '../props';
+
+export interface FlexColumnProps
+extends CProps.Div {}
+
+function FlexColumn({
+  className, children,
+  ...restProps
+}: FlexColumnProps) {
+  return (
+  <div
+    className={clsx(
+      classnames.flex_col,
+      className
+    )}
+    {...restProps}
+  >
+    {children}
+  </div>);
+}
+
+export default FlexColumn;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/components/Common/Label.tsx b/rsconcept/frontend/src/components/Common/Label.tsx
index bd182ac4..3a529e96 100644
--- a/rsconcept/frontend/src/components/Common/Label.tsx
+++ b/rsconcept/frontend/src/components/Common/Label.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx';
-import { LabelHTMLAttributes } from 'react';
+
+import { CProps } from '../props';
 
 interface LabelProps 
-extends Omit<React.DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'children' | 'title'> {
+extends CProps.Label {
   text?: string
-  tooltip?: string
 }
 
-function Label({ text, tooltip, className, ...restProps }: LabelProps) {
+function Label({ text, className, ...restProps }: LabelProps) {
   if (!text) {
     return null;
   }
@@ -17,7 +17,6 @@ function Label({ text, tooltip, className, ...restProps }: LabelProps) {
       'text-sm font-semibold whitespace-nowrap',
       className
     )}
-    title={tooltip}
     {...restProps}
   >
     {text}
diff --git a/rsconcept/frontend/src/components/Common/LabeledValue.tsx b/rsconcept/frontend/src/components/Common/LabeledValue.tsx
index 75d94132..81182d2c 100644
--- a/rsconcept/frontend/src/components/Common/LabeledValue.tsx
+++ b/rsconcept/frontend/src/components/Common/LabeledValue.tsx
@@ -2,15 +2,15 @@ interface LabeledValueProps {
   id?: string
   label: string
   text: string | number
-  tooltip?: string
+  title?: string
 }
 
-function LabeledValue({ id, label, text, tooltip }: LabeledValueProps) {
+function LabeledValue({ id, label, text, title }: LabeledValueProps) {
   return (
   <div className='flex justify-between gap-3'>
     <label
       className='font-semibold'
-      title={tooltip}
+      title={title}
       htmlFor={id}
     >
       {label}
diff --git a/rsconcept/frontend/src/components/Common/MiniButton.tsx b/rsconcept/frontend/src/components/Common/MiniButton.tsx
index bd51f350..d75e6c48 100644
--- a/rsconcept/frontend/src/components/Common/MiniButton.tsx
+++ b/rsconcept/frontend/src/components/Common/MiniButton.tsx
@@ -1,21 +1,20 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
+
 interface MiniButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title' | 'children' > {
+extends CProps.Button {
   icon: React.ReactNode
-  tooltip?: string
   noHover?: boolean
-  dimensions?: string
 }
 
 function MiniButton({
-  icon, tooltip, noHover, tabIndex,
-  dimensions='w-fit h-fit',
+  icon, noHover, tabIndex,
+  className,
   ...restProps
 }: MiniButtonProps) {
   return (
   <button type='button'
-    title={tooltip}
     tabIndex={tabIndex ?? -1}
     className={clsx(
       'px-1 py-1',
@@ -26,7 +25,7 @@ function MiniButton({
         'outline-none': noHover,
         'clr-hover': !noHover
       },
-      dimensions
+      className
     )}
     {...restProps}
   >
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx
index b4af8d48..e1c0eb73 100644
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@@ -6,29 +6,34 @@ import { BiX } from 'react-icons/bi';
 
 import useEscapeKey from '@/hooks/useEscapeKey';
 
+import { CProps } from '../props';
 import Button from './Button';
 import MiniButton from './MiniButton';
 import Overlay from './Overlay';
 
-export interface ModalProps {
-  title?: string
+export interface ModalProps
+extends CProps.Styling {
+  header?: string
   submitText?: string
   submitInvalidTooltip?: string
+  
   readonly?: boolean
   canSubmit?: boolean
+
   hideWindow: () => void
   onSubmit?: () => void
   onCancel?: () => void
+
   children: React.ReactNode
-  className?: string
 }
 
 function Modal({ 
-  title, hideWindow, onSubmit,
+  header, hideWindow, onSubmit,
   readonly, onCancel, canSubmit,
   submitInvalidTooltip, className,
   children,
-  submitText = 'Продолжить'
+  submitText = 'Продолжить',
+  ...restProps
 }: ModalProps) {
   const ref = useRef(null);
   useEscapeKey(hideWindow);
@@ -58,16 +63,17 @@ function Modal({
         'border shadow-md',
         'clr-app'
       )}
+      {...restProps}
     >
       <Overlay position='right-[0.3rem] top-2'>
         <MiniButton
-          tooltip='Закрыть диалоговое окно [ESC]'
+          title='Закрыть диалоговое окно [ESC]'
           icon={<BiX size='1.25rem'/>}
           onClick={handleCancel}
         />
       </Overlay>
       
-      {title ? <h1 className='px-12 py-2 select-none'>{title}</h1> : null}
+      {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
       <div
         className={clsx(
@@ -89,7 +95,7 @@ function Modal({
         {!readonly ? 
         <Button autoFocus
           text={submitText}
-          tooltip={!canSubmit ? submitInvalidTooltip: ''}
+          title={!canSubmit ? submitInvalidTooltip: ''}
           className='min-w-[8rem] min-h-[2.6rem]'
           colors='clr-btn-primary'
           disabled={!canSubmit}
diff --git a/rsconcept/frontend/src/components/Common/Overlay.tsx b/rsconcept/frontend/src/components/Common/Overlay.tsx
index a9a383d5..12859c01 100644
--- a/rsconcept/frontend/src/components/Common/Overlay.tsx
+++ b/rsconcept/frontend/src/components/Common/Overlay.tsx
@@ -1,19 +1,31 @@
-interface OverlayProps {
+import clsx from 'clsx'
+
+import { CProps } from '../props'
+
+interface OverlayProps extends CProps.Styling {
   id?: string
   children: React.ReactNode
   position?: string
-  className?: string
   layer?: string
 }
 
 function Overlay({
-  id, children, className,
+  children, className,
   position='top-0 right-0',
-  layer='z-pop'
+  layer='z-pop',
+  ...restProps
 }: OverlayProps) {
   return (
   <div className='relative'>
-  <div id={id} className={`absolute ${className} ${position} ${layer}`}>
+  <div
+    className={clsx(
+      'absolute',
+      className,
+      position,
+      layer
+    )}
+    {...restProps}
+  >
     {children}
   </div>
   </div>);
diff --git a/rsconcept/frontend/src/components/Common/PageControls.tsx b/rsconcept/frontend/src/components/Common/PageControls.tsx
index 4a5f6e71..f5f607c9 100644
--- a/rsconcept/frontend/src/components/Common/PageControls.tsx
+++ b/rsconcept/frontend/src/components/Common/PageControls.tsx
@@ -6,9 +6,7 @@ interface PageControlsProps {
   setPageNumber: React.Dispatch<React.SetStateAction<number>>
 }
 
-function PageControls({
-  pageNumber, pageCount, setPageNumber
-}: PageControlsProps) {
+function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProps) {
   return (
   <>
     <button type='button'
diff --git a/rsconcept/frontend/src/components/Common/SelectorButton.tsx b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
index 479a0f3a..297b87e3 100644
--- a/rsconcept/frontend/src/components/Common/SelectorButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
@@ -1,20 +1,20 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
+
 interface SelectorButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'title' | 'type'> {
+extends CProps.Button {
   text?: string
   icon?: React.ReactNode
-  tooltip?: string
-  dimensions?: string
-  borderClass?: string
+
   colors?: string
   transparent?: boolean
 }
 
 function SelectorButton({
-  text, icon, tooltip,
+  text, icon,
   colors = 'clr-btn-default',
-  dimensions = 'w-fit h-fit',
+  className,
   transparent,
   ...restProps
 }: SelectorButtonProps) {
@@ -29,10 +29,9 @@ function SelectorButton({
         'clr-hover': transparent,
         'border': !transparent,
       },
-      !transparent && colors,
-      dimensions
-  )}
-    title={tooltip}
+      className,
+      !transparent && colors
+    )}
     {...restProps}
   >
     {icon ? icon : null}
diff --git a/rsconcept/frontend/src/components/Common/SubmitButton.tsx b/rsconcept/frontend/src/components/Common/SubmitButton.tsx
index 6af35512..6dd5e60c 100644
--- a/rsconcept/frontend/src/components/Common/SubmitButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SubmitButton.tsx
@@ -1,22 +1,22 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
+
 interface SubmitButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {
+extends CProps.Button {
   text?: string
-  tooltip?: string
   loading?: boolean
   icon?: React.ReactNode
 }
 
 function SubmitButton({
   text = 'ОК',
-  icon, disabled, tooltip, loading,
+  icon, disabled, loading,
   className,
   ...restProps
 }: SubmitButtonProps) {
   return (
   <button type='submit'
-    title={tooltip}
     className={clsx(
       'px-3 py-2 inline-flex items-center gap-2 align-middle justify-center',
       'border',
diff --git a/rsconcept/frontend/src/components/Common/SwitchButton.tsx b/rsconcept/frontend/src/components/Common/SwitchButton.tsx
index 74db2327..ec92ef1b 100644
--- a/rsconcept/frontend/src/components/Common/SwitchButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SwitchButton.tsx
@@ -1,25 +1,25 @@
 import clsx from 'clsx';
 
-interface SwitchButtonProps<ValueType> {
+import { CProps } from '../props';
+
+interface SwitchButtonProps<ValueType>
+extends CProps.Styling {
   id?: string
   value: ValueType
   label?: string
   icon?: React.ReactNode
-  tooltip?: string
-  dimensions?: string
+  title?: string
 
   isSelected?: boolean
   onSelect: (value: ValueType) => void
 }
 
 function SwitchButton<ValueType>({
-  value, icon, label, tooltip,
-  dimensions='w-fit h-fit',
+  value, icon, label, className,
   isSelected, onSelect, ...restProps
 }: SwitchButtonProps<ValueType>) {
   return (
   <button type='button' tabIndex={-1}
-    title={tooltip}
     onClick={() => onSelect(value)}
     className={clsx(
       'px-2 py-1',
@@ -28,7 +28,7 @@ function SwitchButton<ValueType>({
       'clr-btn-clear clr-hover',
       'cursor-pointer',
       isSelected && 'clr-selected',
-      dimensions
+      className
     )}
     {...restProps}
   >
diff --git a/rsconcept/frontend/src/components/Common/TextArea.tsx b/rsconcept/frontend/src/components/Common/TextArea.tsx
index d74346b9..0d48e147 100644
--- a/rsconcept/frontend/src/components/Common/TextArea.tsx
+++ b/rsconcept/frontend/src/components/Common/TextArea.tsx
@@ -1,16 +1,15 @@
 import clsx from 'clsx';
-import { TextareaHTMLAttributes } from 'react';
 
-import { IColorsProps, IEditorProps } from './commonInterfaces';
+import { CProps } from '../props';
 import Label from './Label';
 
 export interface TextAreaProps 
-extends IEditorProps, IColorsProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'title'> {
+extends CProps.Editor, CProps.Colors, CProps.TextArea {
   dense?: boolean
 }
 
 function TextArea({
-  id, label, required, tooltip, rows,
+  id, label, required, rows,
   dense, noBorder, noOutline,
   className,
   colors = 'clr-input',
@@ -26,7 +25,6 @@ function TextArea({
   )}>
     <Label text={label} htmlFor={id} />
     <textarea id={id}
-      title={tooltip}
       className={clsx(
         'px-3 py-2',
         'leading-tight',
diff --git a/rsconcept/frontend/src/components/Common/TextInput.tsx b/rsconcept/frontend/src/components/Common/TextInput.tsx
index 2a65203c..96c374d5 100644
--- a/rsconcept/frontend/src/components/Common/TextInput.tsx
+++ b/rsconcept/frontend/src/components/Common/TextInput.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 
-import { IColorsProps, IEditorProps } from './commonInterfaces';
+import { CProps } from '../props';
 import Label from './Label';
 
 interface TextInputProps 
-extends IEditorProps, IColorsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'title'> {
+extends CProps.Editor, CProps.Colors, CProps.Input {
   dense?: boolean
   allowEnter?: boolean
 }
@@ -16,7 +16,7 @@ function preventEnterCapture(event: React.KeyboardEvent<HTMLInputElement>) {
 }
 
 function TextInput({
-  id, label, dense, tooltip, noBorder, noOutline, allowEnter, disabled,
+  id, label, dense, noBorder, noOutline, allowEnter, disabled,
   className,
   colors = 'clr-input',
   onKeyDown,
@@ -32,7 +32,6 @@ function TextInput({
   )}>
     <Label text={label} htmlFor={id} />
     <input id={id}
-      title={tooltip}
       className={clsx(
         'py-2',
         'leading-tight truncate hover:text-clip',
diff --git a/rsconcept/frontend/src/components/Common/TextURL.tsx b/rsconcept/frontend/src/components/Common/TextURL.tsx
index 09890a6a..b6d1ac3a 100644
--- a/rsconcept/frontend/src/components/Common/TextURL.tsx
+++ b/rsconcept/frontend/src/components/Common/TextURL.tsx
@@ -3,31 +3,29 @@ import { Link } from 'react-router-dom';
 
 interface TextURLProps {
   text: string
-  tooltip?: string
+  title?: string
   href?: string
   color?: string
   onClick?: () => void
 }
 
-function TextURL({ text, href, tooltip, color='clr-text-url', onClick }: TextURLProps) {
+function TextURL({ text, href, title, color='clr-text-url', onClick }: TextURLProps) {
   const design = `cursor-pointer hover:underline ${color}`;
   if (href) {
     return (
-    <Link
+    <Link tabIndex={-1}
       className={design}
-      title={tooltip}
+      title={title}
       to={href}
-      tabIndex={-1}
     >
       {text}
     </Link>
     );
   } else if (onClick) {
     return (
-    <span
+    <span tabIndex={-1}
       className={design}
       onClick={onClick}
-      tabIndex={-1}
     >
       {text}
     </span>);
diff --git a/rsconcept/frontend/src/components/Common/Tristate.tsx b/rsconcept/frontend/src/components/Common/Tristate.tsx
index 98262887..b85fd69b 100644
--- a/rsconcept/frontend/src/components/Common/Tristate.tsx
+++ b/rsconcept/frontend/src/components/Common/Tristate.tsx
@@ -13,7 +13,7 @@ extends Omit<CheckboxProps, 'value' | 'setValue'> {
 }
 
 function Tristate({
-  id, disabled, tooltip, label, 
+  id, disabled, label, 
   className,
   value, setValue,
   ...restProps
@@ -51,7 +51,6 @@ function Tristate({
       cursor,
       className
     )}
-    title={tooltip}
     disabled={disabled}
     onClick={handleClick}
     {...restProps}
diff --git a/rsconcept/frontend/src/components/Common/commonInterfaces.ts b/rsconcept/frontend/src/components/Common/commonInterfaces.ts
deleted file mode 100644
index 5541f3ed..00000000
--- a/rsconcept/frontend/src/components/Common/commonInterfaces.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// =========== Module contains interfaces for common UI elements. ==========
-export interface IControlProps {
-  tooltip?: string
-  disabled?: boolean
-  noBorder?: boolean
-  noOutline?: boolean
-}
-
-export interface IStylingProps {
-  style?: React.CSSProperties
-  className?: string
-}
-
-export interface IEditorProps extends IControlProps {
-  label?: string
-}
-
-export interface IColorsProps {
-  colors?: string
-}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/components/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/DataTable/DataTable.tsx
index ca8d3f6c..ab872c54 100644
--- a/rsconcept/frontend/src/components/DataTable/DataTable.tsx
+++ b/rsconcept/frontend/src/components/DataTable/DataTable.tsx
@@ -10,7 +10,7 @@ import {
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { IStylingProps } from '../Common/commonInterfaces';
+import { CProps } from '../props';
 import DefaultNoData from './DefaultNoData';
 import PaginationTools from './PaginationTools';
 import TableBody from './TableBody';
@@ -25,7 +25,7 @@ export interface IConditionalStyle<TData> {
 }
 
 export interface DataTableProps<TData extends RowData>
-extends IStylingProps, Pick<TableOptions<TData>, 
+extends CProps.Styling, Pick<TableOptions<TData>, 
   'data' | 'columns' |
   'onRowSelectionChange' | 'onColumnVisibilityChange'
 > {
diff --git a/rsconcept/frontend/src/components/DataTable/SelectAll.tsx b/rsconcept/frontend/src/components/DataTable/SelectAll.tsx
index d49dfcae..88083b52 100644
--- a/rsconcept/frontend/src/components/DataTable/SelectAll.tsx
+++ b/rsconcept/frontend/src/components/DataTable/SelectAll.tsx
@@ -9,7 +9,7 @@ interface SelectAllProps<TData> {
 function SelectAll<TData>({ table }: SelectAllProps<TData>) {  
   return (
   <Tristate tabIndex={-1}
-    tooltip='Выделить все'
+    title='Выделить все'
     value={
       (!table.getIsAllPageRowsSelected() && table.getIsSomePageRowsSelected())
       ? null
diff --git a/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx b/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx
index d6a34d4d..863001ed 100644
--- a/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx
+++ b/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx
@@ -11,7 +11,7 @@ function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
   return (
   <ConceptTooltip clickable
     anchorSelect={anchor}
-    className='max-w-[25rem] min-w-[25rem]'
+    className='w-[25rem]'
   >
     <InfoConstituenta data={data} />
   </ConceptTooltip>);
diff --git a/rsconcept/frontend/src/components/Help/HelpButton.tsx b/rsconcept/frontend/src/components/Help/HelpButton.tsx
index de2593e0..81280dd9 100644
--- a/rsconcept/frontend/src/components/Help/HelpButton.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpButton.tsx
@@ -4,15 +4,16 @@ import ConceptTooltip from '@/components/Common/ConceptTooltip';
 import TextURL from '@/components/Common/TextURL';
 import { HelpTopic } from '@/models/miscelanious';
 
+import { CProps } from '../props';
 import InfoTopic from './InfoTopic';
 
-interface HelpButtonProps {
+interface HelpButtonProps
+extends CProps.Styling {
   topic: HelpTopic
   offset?: number
-  dimensions?: string
 }
 
-function HelpButton({ topic, offset, dimensions }: HelpButtonProps) {
+function HelpButton({ topic, ...restProps }: HelpButtonProps) {
   return (
   <>
     <div
@@ -24,8 +25,7 @@ function HelpButton({ topic, offset, dimensions }: HelpButtonProps) {
     <ConceptTooltip clickable
       anchorSelect={`#help-${topic}`}
       layer='z-modal-tooltip'
-      className={dimensions}
-      offset={offset}
+      {...restProps}
     >
       <div className='relative'>
       <div className='absolute right-0 text-sm top-[0.4rem]'>
diff --git a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx b/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
index 098a8015..298da73e 100644
--- a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
+++ b/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
@@ -25,15 +25,15 @@ function UserDropdown({ hideDropdown }: UserDropdownProps) {
   };
 
   return (
-  <Dropdown dimensions='w-36' stretchLeft>
+  <Dropdown className='w-36' stretchLeft>
     <DropdownButton
       text={user?.username}
-      tooltip='Профиль пользователя'
+      title='Профиль пользователя'
       onClick={navigateProfile}
     />
     <DropdownButton
       text={darkMode ? 'Светлая тема' : 'Темная тема'}
-      tooltip='Переключение темы оформления'
+      title='Переключение темы оформления'
       onClick={toggleDarkMode}
     />
     <DropdownButton
diff --git a/rsconcept/frontend/src/components/RSInput/RSInput.tsx b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
index d1148429..7d9cb850 100644
--- a/rsconcept/frontend/src/components/RSInput/RSInput.tsx
+++ b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
@@ -47,10 +47,10 @@ const editorSetup: BasicSetupOptions = {
 
 interface RSInputProps 
 extends Pick<ReactCodeMirrorProps, 
-  'id' | 'height' | 'minHeight' | 'maxHeight' | 'value' | 'className' | 'onFocus' | 'onBlur' | 'placeholder'
+  'id' | 'height' | 'minHeight' | 'maxHeight' | 'value' | 
+  'onFocus' | 'onBlur' | 'placeholder' | 'style' | 'className'
 > {
   label?: string
-  dimensions?: string
   disabled?: boolean
   noTooltip?: boolean
   innerref?: RefObject<ReactCodeMirrorRef> | undefined
@@ -61,7 +61,7 @@ extends Pick<ReactCodeMirrorProps,
 function RSInput({ 
   id, label, innerref, onChange, onAnalyze,
   disabled, noTooltip,
-  dimensions = 'w-full',
+  className, style,
   ...restProps 
 }: RSInputProps) {
   const { darkMode, colors } = useConceptTheme();
@@ -129,11 +129,14 @@ function RSInput({
   }, [thisRef, onAnalyze]);
 
   return (
-  <div className={clsx(
-    'flex flex-col gap-2',
-    dimensions,
-    cursor
-  )}>
+  <div 
+    className={clsx(
+      'flex flex-col gap-2',
+      className,
+      cursor
+    )}
+    style={style}
+  >
     <Label text={label} htmlFor={id}/>
     <CodeMirror id={id}
       ref={thisRef}
diff --git a/rsconcept/frontend/src/components/Shared/SelectGrammeme.tsx b/rsconcept/frontend/src/components/Shared/SelectGrammeme.tsx
index daf4e152..bc289d7b 100644
--- a/rsconcept/frontend/src/components/Shared/SelectGrammeme.tsx
+++ b/rsconcept/frontend/src/components/Shared/SelectGrammeme.tsx
@@ -9,14 +9,12 @@ interface SelectGrammemeProps extends
 Omit<SelectMultiProps<IGrammemeOption>, 'value' | 'onChange'> {
   value: IGrammemeOption[]
   setValue: React.Dispatch<React.SetStateAction<IGrammemeOption[]>>
-  dimensions?: string
   className?: string
   placeholder?: string
 }
 
 function SelectGrammeme({
   value, setValue,
-  dimensions, className, placeholder,
   ...restProps
 }: SelectGrammemeProps) {
   const [options, setOptions] = useState<IGrammemeOption[]>([]);
@@ -33,9 +31,7 @@ function SelectGrammeme({
 
   return (
   <SelectMulti
-    className={`${dimensions} ${className}`}
     options={options}
-    placeholder={placeholder}
     value={value}
     onChange={newValue => setValue([...newValue].sort(compareGrammemeOptions))}
     {...restProps}
diff --git a/rsconcept/frontend/src/components/props.d.ts b/rsconcept/frontend/src/components/props.d.ts
new file mode 100644
index 00000000..5c6c98c3
--- /dev/null
+++ b/rsconcept/frontend/src/components/props.d.ts
@@ -0,0 +1,36 @@
+// =========== Module contains interfaces for common UI elements. ==========
+export namespace CProps {
+
+export type Control = {
+  title?: string
+  disabled?: boolean
+  noBorder?: boolean
+  noOutline?: boolean
+}
+
+export type Styling = {
+  style?: React.CSSProperties
+  className?: string
+}
+
+export type Editor = Control & {
+  label?: string
+}
+
+export type Colors = {
+  colors?: string
+}
+
+export type Div = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type Button = Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'children' | 'type'
+>;
+export type Label = Omit<
+  React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
+  'children'
+>;
+export type TextArea = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+export type Input = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx b/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
index 024b9abe..58534c5a 100644
--- a/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -11,6 +12,7 @@ import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { ILibraryItem } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
+import { classnames } from '@/utils/constants';
 import { cloneTitle } from '@/utils/misc';
 
 interface DlgCloneLibraryItemProps
@@ -57,12 +59,12 @@ function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
 
   return (
   <Modal
-    title='Создание копии концептуальной схемы'
+    header='Создание копии концептуальной схемы'
     hideWindow={hideWindow}
     canSubmit={canSubmit}
     submitText='Создать'
     onSubmit={handleSubmit}
-    className='flex flex-col gap-3 px-6 py-2'
+    className={clsx('px-6 py-2', classnames.flex_col)}
   >
     <TextInput
       label='Полное название'
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
index ac4bd5f5..e7bc24f4 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
@@ -132,7 +132,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
         <div className='max-h-[1.2rem]'>
         {props.row.original.value ?
         <MiniButton
-          tooltip='Очистить значение'
+          title='Очистить значение'
           icon={<BiX size='0.75rem' className='clr-text-warning'/>}
           noHover
           onClick={() => handleClearArgument(props.row.original)}
@@ -148,7 +148,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
   }], [selectedArgument, colors]);
 
   return (
-  <div className='flex flex-col gap-3'>
+  <>
     <DataTable dense noFooter
       className={clsx(
         'max-h-[5.8rem] min-h-[5.8rem]',
@@ -173,8 +173,8 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
     />
 
     <div className={clsx(
-      'py-1 flex gap-2 justify-center items-center',
-      'w-full',
+      'my-4',
+      'flex gap-2 justify-center items-center',
       'select-none'
     )}>
       <span title='Выберите аргумент из списка сверху и значение из списка снизу'
@@ -184,25 +184,25 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
       </span>
       <span>=</span>
       <RSInput noTooltip
-        dimensions='max-w-[12rem] w-full'
+        className='w-[12rem]'
         value={argumentValue}
         onChange={newValue => setArgumentValue(newValue)}
       />
       <div className='flex'>
         <MiniButton
-          tooltip='Подставить значение аргумента'
+          title='Подставить значение аргумента'
           icon={<BiCheck size='1.25rem' className={!!argumentValue && !!selectedArgument ? 'clr-text-success' : ''} />}
           disabled={!argumentValue || !selectedArgument}
           onClick={() => handleAssignArgument(selectedArgument!, argumentValue)}
         />
         <MiniButton
-          tooltip='Откатить значение'
+          title='Откатить значение'
           disabled={!isModified}
           onClick={handleReset}
           icon={<BiRefresh size='1.25rem' className={isModified ? 'clr-text-primary' : ''} />}
         />
         <MiniButton
-          tooltip='Очистить значение аргумента'
+          title='Очистить значение аргумента'
           disabled={!selectedClearable}
           icon={<BiX size='1.25rem' className={selectedClearable ? 'clr-text-warning': ''}/>}
           onClick={() => selectedArgument ? handleClearArgument(selectedArgument) : undefined}
@@ -220,12 +220,12 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
 
     <RSInput id='result'
       placeholder='Итоговое определение'
+      className='mt-[1.2rem]'
       height='5.1rem'
-      dimensions='w-full mt-[0.45rem]'
       value={state.definition}
       disabled
     />
-  </div>);
+  </>);
 }
 
 export default ArgumentsTab;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx
index c287e10e..84c01636 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx
@@ -17,7 +17,7 @@ interface ConstituentaTabProps {
 
 function ConstituentaTab({state, partialUpdate}: ConstituentaTabProps) {
   return (
-  <div className='flex flex-col gap-3'>
+  <>
     <div className='flex self-center gap-3 pr-2'>
       <SelectSingle
         className='min-w-[14rem]'
@@ -62,7 +62,7 @@ function ConstituentaTab({state, partialUpdate}: ConstituentaTabProps) {
       value={state.convention}
       onChange={event => partialUpdate({ convention: event.target.value })}
     />
-  </div>);
+  </>);
 }
 
 export default ConstituentaTab;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
index bae2ccb0..268171e5 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@@ -12,6 +12,7 @@ import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscelanious';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
+import { classnames } from '@/utils/constants';
 import { createAliasFor, validateCstAlias } from '@/utils/misc';
 
 import ArgumentsTab, { IArgumentsState } from './ArgumentsTab';
@@ -113,15 +114,15 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
 
   return (
   <Modal
-    title='Создание конституенты из шаблона'
+    header='Создание конституенты из шаблона'
+    submitText='Создать'
+    className='w-[43rem] h-[36rem] px-6'
     hideWindow={hideWindow}
     canSubmit={validated}
     onSubmit={handleSubmit}
-    submitText='Создать'
-    className='max-w-[43rem] min-w-[43rem] min-h-[36rem] px-6'
   >
     <Overlay position='top-0 right-[6rem]'>
-      <HelpButton topic={HelpTopic.RSTEMPLATES} dimensions='max-w-[35rem]' />
+      <HelpButton topic={HelpTopic.RSTEMPLATES} className='max-w-[35rem]' />
     </Overlay>
     <Tabs forceRenderTabPanel
       selectedTabClassName='clr-selected'
@@ -136,17 +137,17 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       )}>
         <ConceptTab
           label='Шаблон'
-          tooltip='Выбор шаблона выражения'
+          title='Выбор шаблона выражения'
           className='w-[8rem]'
         />
         <ConceptTab
           label='Аргументы'
-          tooltip='Подстановка аргументов шаблона'
+          title='Подстановка аргументов шаблона'
           className='w-[8rem]'
         />
         <ConceptTab
           label='Конституента'
-          tooltip='Редактирование атрибутов конституенты'
+          title='Редактирование атрибутов конституенты'
           className='w-[8rem]'
         />
       </TabList>
@@ -166,7 +167,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       />
       </TabPanel>
 
-      <TabPanel style={{ display: activeTab === TabID.CONSTITUENTA ? '': 'none' }}>
+      <TabPanel className={classnames.flex_col} style={{ display: activeTab === TabID.CONSTITUENTA ? '': 'none' }}>
       <ConstituentaTab 
         state={constituenta}
         partialUpdate={updateConstituenta}
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
index a2b31fda..21aee635 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
@@ -87,50 +87,46 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
   }, [state.filterCategory, selectedSchema]);
 
   return (
-  <div className='flex flex-col gap-3'>
-    <div>
-      <div className='flex justify-stretch'>
-        <SelectSingle
-          placeholder='Выберите категорию'
-          className='flex-grow border-none'
-          options={categorySelector}
-          value={state.filterCategory && selectedSchema ? {
-            value: state.filterCategory.id,
-            label: state.filterCategory.term_raw
-          } : null}
-          onChange={data => partialUpdate({filterCategory: selectedSchema?.items.find(cst => cst.id === data?.value) })}
-          isClearable
-        />
-        <SelectSingle
-          placeholder='Выберите источник'
-          className='min-w-[12rem]'
-          options={templateSelector}
-          value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null}
-          onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})}
-        />
-      </div>
-      <ConstituentaPicker
-        value={state.prototype}
-        data={filteredData}
-        onSelectValue={cst => partialUpdate( { prototype: cst } )}
-        prefixID={prefixes.cst_template_ist}
-        rows={9}
+  <>
+    <div className='flex justify-stretch'>
+      <SelectSingle
+        placeholder='Выберите категорию'
+        className='flex-grow border-none'
+        options={categorySelector}
+        value={state.filterCategory && selectedSchema ? {
+          value: state.filterCategory.id,
+          label: state.filterCategory.term_raw
+        } : null}
+        onChange={data => partialUpdate({filterCategory: selectedSchema?.items.find(cst => cst.id === data?.value) })}
+        isClearable
+      />
+      <SelectSingle
+        placeholder='Выберите источник'
+        className='min-w-[12rem]'
+        options={templateSelector}
+        value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null}
+        onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})}
       />
     </div>
-    <TextArea id='term'
-      rows={2}
-      disabled
-      placeholder='Шаблон конституенты не выбран'
-      value={prototypeInfo}
-      spellCheck
+    <ConstituentaPicker
+      value={state.prototype}
+      data={filteredData}
+      onSelectValue={cst => partialUpdate( { prototype: cst } )}
+      prefixID={prefixes.cst_template_ist}
+      rows={9}
     />
-    <RSInput id='expression'
-      height='5.1rem'
+    <TextArea disabled spellCheck
+      placeholder='Шаблон конституенты не выбран'
+      className='my-3'
+      rows={2}
+      value={prototypeInfo}
+    />
+    <RSInput disabled
       placeholder='Выберите шаблон из списка'
-      disabled
+      height='5.1rem'
       value={state.prototype?.definition_formal}
     />
-  </div>);
+  </>);
 }
 
 export default TemplateTab;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx
index 419487c3..1cb378d6 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx
@@ -10,6 +10,7 @@ import TextInput from '@/components/Common/TextInput';
 import RSInput from '@/components/RSInput';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { CstType,ICstCreateData, IRSForm } from '@/models/rsform';
+import { classnames } from '@/utils/constants';
 import { labelCstType } from '@/utils/labels';
 import { createAliasFor, validateCstAlias } from '@/utils/misc';
 import { SelectorCstType } from '@/utils/selectors';
@@ -50,14 +51,15 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
 
   return (
   <Modal
-    title='Создание конституенты'
+    header='Создание конституенты'
     hideWindow={hideWindow}
     canSubmit={validated}
     onSubmit={handleSubmit}
     submitText='Создать'
     className={clsx(
       'w-[35rem]',
-      'py-2 px-6 flex flex-col gap-3'
+      'py-2 px-6',
+      classnames.flex_col
     )}
   >
     <div className='flex self-center gap-6'>
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
index afc21500..fa503acb 100644
--- a/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
@@ -1,11 +1,12 @@
 'use client';
 
+import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 
 import Checkbox from '@/components/Common/Checkbox';
 import Modal, { ModalProps } from '@/components/Common/Modal';
 import { IRSForm } from '@/models/rsform';
-import { prefixes } from '@/utils/constants';
+import { classnames, prefixes } from '@/utils/constants';
 
 import ConstituentsList from './ConstituentsList';
 
@@ -31,11 +32,15 @@ function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstPr
 
   return (
   <Modal canSubmit
-    title='Удаление конституент'
+    header='Удаление конституент'
     submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
     hideWindow={hideWindow}
     onSubmit={handleSubmit}
-    className='max-w-[60vw] min-w-[30rem] px-6 flex flex-col gap-3'
+    className={clsx(
+      'max-w-[60vw] min-w-[30rem]',
+      'px-6',
+      classnames.flex_col
+    )}
   >
     <ConstituentsList
       title='Выбраны к удалению'
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
index 6b05b609..93f9997e 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@@ -46,15 +46,15 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
   
   return (
   <Modal
-    title='Редактирование ссылки'
+    header='Редактирование ссылки'
     submitText='Сохранить ссылку'
     hideWindow={hideWindow}
     canSubmit={isValid}
     onSubmit={handleSubmit}
-    className='min-w-[40rem] max-w-[40rem] px-6 min-h-[34rem]'
+    className='w-[40rem] px-6 min-h-[34rem]'
   >
     <Overlay position='top-0 right-[4rem]'>
-      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[35rem]' offset={14} />
+      <HelpButton topic={HelpTopic.TERM_CONTROL} className='max-w-[35rem]' offset={14} />
     </Overlay>
     
     <Tabs
@@ -69,12 +69,12 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
         'border divide-x rounded-none'
       )}>
         <ConceptTab
-          tooltip='Отсылка на термин в заданной словоформе'
+          title='Отсылка на термин в заданной словоформе'
           label={labelReferenceType(ReferenceType.ENTITY)}
           className='w-[12rem]'
         />
         <ConceptTab
-          tooltip='Установление синтаксической связи с отсылкой на термин'
+          title='Установление синтаксической связи с отсылкой на термин'
           label={labelReferenceType(ReferenceType.SYNTACTIC)}
           className='w-[12rem]'
         />
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx
index de3eb600..5ca163d8 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useLayoutEffect, useState } from 'react';
 
+import FlexColumn from '@/components/Common/FlexColumn';
 import Label from '@/components/Common/Label';
 import TextInput from '@/components/Common/TextInput';
 import ConstituentaPicker from '@/components/Shared/ConstituentaPicker';
@@ -61,7 +62,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
   }
   
   return (
-  <div className='flex flex-col gap-3'>
+  <FlexColumn>
     <ConstituentaPicker 
       value={selectedCst}
       data={items}
@@ -77,7 +78,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
       <TextInput dense
         label='Конституента'
         placeholder='Имя'
-        className='max-w-[11rem] min-w-[11rem]'
+        className='w-[11rem]'
         value={alias}
         onChange={event => setAlias(event.target.value)}
       />
@@ -85,7 +86,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
         label='Термин'
         className='flex-grow text-sm'
         value={term}
-        tooltip={term}
+        title={term}
       />
     </div>
 
@@ -104,7 +105,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
         setValue={setSelectedGrams}
       />
     </div>
-  </div>);
+  </FlexColumn>);
 }
 
 export default EntityTab;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
index 4be75e29..410c6bf1 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
@@ -123,14 +123,14 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
 
   return (
   <Modal canSubmit
-    title='Редактирование словоформ'
+    header='Редактирование словоформ'
     hideWindow={hideWindow}
     submitText='Сохранить'
     onSubmit={handleSubmit}
-    className='flex flex-col min-w-[40rem] max-w-[40rem] px-6'
+    className='flex flex-col w-[40rem] px-6'
   >
     <Overlay position='top-[-0.2rem] left-[7.5rem]'>
-      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[38rem]' offset={3} />
+      <HelpButton topic={HelpTopic.TERM_CONTROL} className='max-w-[38rem]' offset={3} />
     </Overlay>
   
     <TextArea disabled spellCheck
@@ -154,7 +154,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
       />
       <div className='flex flex-col self-center gap-1'>
         <MiniButton noHover
-          tooltip='Определить граммемы'
+          title='Определить граммемы'
           icon={<BiRightArrow
             size='1.25rem'
             className={inputText ? 'clr-text-primary' : ''}
@@ -163,7 +163,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
           onClick={handleParse}
         />
         <MiniButton noHover
-          tooltip='Генерировать словоформу'
+          title='Генерировать словоформу'
           icon={<BiLeftArrow size='1.25rem' className={inputGrams.length !== 0 ? 'clr-text-primary' : ''} />}
           disabled={textProcessor.loading || inputGrams.length == 0}
           onClick={handleInflect}
@@ -171,7 +171,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
       </div>
       <SelectGrammeme
         placeholder='Выберите граммемы'
-        dimensions='min-w-[15rem] max-w-[15rem]'
+        className='w-[15rem]'
         value={inputGrams}
         setValue={setInputGrams}
       />
@@ -179,7 +179,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
 
     <Overlay position='top-2 left-0'>
       <MiniButton noHover
-        tooltip='Внести словоформу'
+        title='Внести словоформу'
         icon={<BiCheck
           size='1.25rem'
           className={inputText && inputGrams.length !== 0 ? 'clr-text-success' : ''}
@@ -188,7 +188,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         onClick={handleAddForm}
       />
       <MiniButton noHover
-        tooltip='Генерировать стандартные словоформы'
+        title='Генерировать стандартные словоформы'
         icon={<BiChevronsDown size='1.25rem' className={inputText ? 'clr-text-primary' : ''}
         />}
         disabled={textProcessor.loading || !inputText}
@@ -203,7 +203,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
     )}>
       <span>Заданные вручную словоформы [{forms.length}]</span>
       <MiniButton noHover
-        tooltip='Сбросить все словоформы'
+        title='Сбросить все словоформы'
         icon={<BiX size='1rem' className={forms.length !== 0 ? 'clr-text-warning' : ''} />}
         disabled={textProcessor.loading || forms.length === 0}
         onClick={handleResetAll}
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
index 26892f7d..2429a521 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
@@ -62,7 +62,7 @@ function WordFormsTable({ forms, setForms, onFormSelect }: WordFormsTableProps)
       maxSize: 50,
       cell: props => 
         <MiniButton noHover
-          tooltip='Удалить словоформу'
+          title='Удалить словоформу'
           icon={<BiX size='1rem' className='clr-text-warning'/>}
           onClick={() => handleDeleteRow(props.row.index)}
         />
diff --git a/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx b/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
index 4e3a4c74..25bba18d 100644
--- a/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
@@ -24,7 +24,7 @@ function DlgGraphParams({ hideWindow, initial, onConfirm } : DlgGraphParamsProps
   return (
   <Modal canSubmit
     hideWindow={hideWindow}
-    title='Настройки графа термов'
+    header='Настройки графа термов'
     onSubmit={handleSubmit}
     submitText='Применить'
     className='flex gap-12 px-6 py-2'
@@ -33,25 +33,25 @@ function DlgGraphParams({ hideWindow, initial, onConfirm } : DlgGraphParamsProps
       <h1 className='mb-2'>Преобразования</h1>
       <Checkbox
         label='Скрыть текст'
-        tooltip='Не отображать термины'
+        title='Не отображать термины'
         value={params.noText} 
         setValue={value => updateParams({noText: value})}
       />
       <Checkbox
         label='Скрыть несвязанные'
-        tooltip='Неиспользуемые конституенты'
+        title='Неиспользуемые конституенты'
         value={params.noHermits} 
         setValue={value => updateParams({ noHermits: value})}
       />
       <Checkbox
         label='Скрыть шаблоны'
-        tooltip='Терм-функции и предикат-функции с параметризованными аргументами'
+        title='Терм-функции и предикат-функции с параметризованными аргументами'
         value={params.noTemplates} 
         setValue={value => updateParams({ noTemplates: value})}
       />
       <Checkbox
         label='Транзитивная редукция'
-        tooltip='Удалить связи, образующие транзитивные пути в графе'
+        title='Удалить связи, образующие транзитивные пути в графе'
         value={params.noTransitive} 
         setValue={value => updateParams({ noTransitive: value})}
       />
diff --git a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
index 0e4fbb2e..f68c500a 100644
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@@ -44,7 +44,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
 
   return (
   <Modal
-    title='Переименование конституенты'
+    header='Переименование конституенты'
     submitText='Переименовать'
     submitInvalidTooltip={'Введите незанятое имя, соответствующее типу'}
     hideWindow={hideWindow}
diff --git a/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx b/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
index 5a857c4b..6a087897 100644
--- a/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
@@ -41,7 +41,7 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
 
   return (
   <Modal
-    title='Импорт схемы из Экстеора'
+    header='Импорт схемы из Экстеора'
     hideWindow={hideWindow}
     canSubmit={!!file}
     onSubmit={handleSubmit}
@@ -50,7 +50,6 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
   >
     <FileInput
       label='Выбрать файл'
-      dimensions='w-full flex items-center'
       acceptType={EXTEOR_TRS_FILE}
       onChange={handleFile}
     />
diff --git a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
index 741bbcdd..e74fd154 100644
--- a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
+++ b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
@@ -19,7 +19,7 @@ import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { LibraryItemType } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
-import { EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
+import { classnames, EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
 
 function CreateRSFormPage() {
   const router = useConceptNavigation();
@@ -81,8 +81,8 @@ function CreateRSFormPage() {
   <RequireAuth>
   <form
     className={clsx(
-      'w-full max-w-lg',
-      'px-6 py-3 flex flex-col gap-3'
+      'px-6 py-3',
+      classnames.flex_col
     )}
     onSubmit={handleSubmit}
   >
@@ -94,7 +94,7 @@ function CreateRSFormPage() {
         onChange={handleFileChange}
       />
       <MiniButton
-        tooltip='Загрузить из Экстеор'
+        title='Загрузить из Экстеор'
         icon={<BiDownload size='1.25rem' className='clr-text-primary'/>}
         onClick={() => inputRef.current?.click()}
       />
@@ -112,7 +112,7 @@ function CreateRSFormPage() {
       placeholder={file && 'Загрузить из файла'}
       className='w-[14rem]'
       pattern={patterns.alias}
-      tooltip={`не более ${limits.alias_len} символов`}
+      title={`не более ${limits.alias_len} символов`}
       value={alias}
       onChange={event => setAlias(event.target.value)}
     />
diff --git a/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx b/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx
index 8b670aef..636217f9 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx
@@ -42,8 +42,8 @@ function PickerStrategy({ value, onChange }: PickerStrategyProps) {
   return (
   <div ref={strategyMenu.ref} className='h-full text-right'>
     <SelectorButton transparent tabIndex={-1}
-      tooltip='Список фильтров'
-      dimensions='w-fit h-full'
+      title='Список фильтров'
+      className='h-full'
       icon={<BiFilterAlt size='1.25rem' />}
       text={labelLibraryFilter(value)}
       onClick={strategyMenu.toggle}
@@ -59,7 +59,7 @@ function PickerStrategy({ value, onChange }: PickerStrategyProps) {
           value={value === strategy}
           setValue={() => handleChange(strategy)}
           label={labelLibraryFilter(strategy)}
-          tooltip={describeLibraryFilter(strategy)}
+          title={describeLibraryFilter(strategy)}
           disabled={isStrategyDisabled(strategy)}
         />);
       })}
diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index 687f7419..a51e0fc9 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -65,7 +65,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
       'flex gap-1 justify-center items-center'
     )}>
       <ConceptSearch noBorder
-        dimensions='min-w-[10rem]'
+        className='min-w-[10rem]'
         value={query}
         onChange={handleChangeQuery}
       />
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
index 7571a728..eba47463 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
@@ -101,7 +101,7 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
     )}>
       <HelpButton
         topic={HelpTopic.LIBRARY}
-        dimensions='max-w-[35rem]'
+        className='max-w-[35rem]'
         offset={0}
       />
     </div>
diff --git a/rsconcept/frontend/src/pages/LoginPage.tsx b/rsconcept/frontend/src/pages/LoginPage.tsx
index 72896b59..f998a18d 100644
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@@ -13,7 +13,7 @@ import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import useQueryStrings from '@/hooks/useQueryStrings';
 import { IUserLoginData } from '@/models/library';
-import { resources } from '@/utils/constants';
+import { classnames, resources } from '@/utils/constants';
 
 
 function ProcessError({error}: { error: ErrorData }): React.ReactElement {
@@ -68,7 +68,8 @@ function LoginPage() {
   <form
     className={clsx(
       'w-[24rem]', 
-      'pt-12 pb-6 px-6 flex flex-col gap-3'
+      'pt-12 pb-6 px-6',
+      classnames.flex_col
     )}
     onSubmit={handleSubmit}
   >
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
index ca4cf42d..3353861e 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
@@ -13,8 +13,7 @@ function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
   return (
   <div className={clsx(
     'sticky top-0 left-0',
-    'min-w-[13rem] h-fit',
-    'flex flex-col',
+    'min-w-[13rem]',
     'border-x',
     'clr-controls',
     'small-caps',
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
index 36f4454c..6474df55 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
@@ -30,31 +30,31 @@ function ConstituentaToolbar({
   return (
     <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Сохранить изменения [Ctrl + S]'
+      title='Сохранить изменения [Ctrl + S]'
       disabled={!canSave}
       icon={<FiSave size='1.25rem' className={canSave ? 'clr-text-primary' : ''}/>}
       onClick={onSubmit}
     />
     <MiniButton
-      tooltip='Сбросить несохраненные изменения'
+      title='Сбросить несохраненные изменения'
       disabled={!canSave}
       onClick={onReset}
       icon={<BiReset size='1.25rem' className={canSave ? 'clr-text-primary' : ''} />}
     />
     <MiniButton
-      tooltip='Создать конституенту после данной'
+      title='Создать конституенту после данной'
       disabled={!isMutable}
       onClick={onCreate}
       icon={<BiPlusCircle size={'1.25rem'} className={isMutable ? 'clr-text-success' : ''} />} 
     />
     <MiniButton
-      tooltip='Клонировать конституенту [Alt + V]'
+      title='Клонировать конституенту [Alt + V]'
       disabled={!isMutable}
       onClick={onClone}
       icon={<BiDuplicate size='1.25rem' className={isMutable ? 'clr-text-success' : ''} />} 
     />
     <MiniButton
-      tooltip='Удалить редактируемую конституенту'
+      title='Удалить редактируемую конституенту'
       disabled={!isMutable}
       onClick={onDelete}
       icon={<BiTrash size='1.25rem' className={isMutable ? 'clr-text-warning' : ''} />}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index b1f997f4..be2dd4c5 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -13,6 +13,7 @@ import TextArea from '@/components/Common/TextArea';
 import RefsInput from '@/components/RefsInput';
 import { useRSForm } from '@/context/RSFormContext';
 import { IConstituenta, ICstRenameData, ICstUpdateData } from '@/models/rsform';
+import { classnames } from '@/utils/constants';
 import { labelCstTypification } from '@/utils/labels';
 
 import EditorRSExpression from '../EditorRSExpression';
@@ -111,18 +112,18 @@ function FormConstituenta({
     className='flex select-none'
   >
     <MiniButton
-      tooltip={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
+      title={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
       disabled={disabled}
       noHover
       onClick={onEditTerm}
       icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
     />
-    <div className='pt-1 pl-[1.375rem] text-sm font-semibold whitespace-nowrap w-fit'>
+    <div className='pt-1 pl-[1.375rem] text-sm font-semibold whitespace-nowrap'>
       <span>Имя </span>
       <span className='ml-1'>{constituenta?.alias ?? ''}</span>
     </div>
     <MiniButton noHover
-      tooltip='Переименовать конституенту'
+      title='Переименовать конституенту'
       disabled={disabled}
       onClick={handleRename}
       icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
@@ -131,7 +132,8 @@ function FormConstituenta({
   <form id={id}
     className={clsx(
       'mt-1 min-w-[47.8rem] max-w-[47.8rem]',
-      'px-4 py-1 flex flex-col gap-3'
+      'px-4 py-1',
+      classnames.flex_col
     )}
     onSubmit={handleSubmit}
   >
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
index 97b0119e..828040b0 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
@@ -138,12 +138,12 @@ function EditorRSExpression({
   <div>
     <Overlay position='top-0 right-0 flex'>
       <MiniButton noHover
-        tooltip='Включение специальной клавиатуры'
+        title='Включение специальной клавиатуры'
         onClick={() => setShowControls(prev => !prev)}
         icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'clr-text-primary': ''} />}
       />
       <MiniButton noHover
-        tooltip='Дерево разбора выражения'
+        title='Дерево разбора выражения'
         onClick={handleShowAST}
         icon={<RiNodeTree size='1.25rem' className='clr-text-primary' />}
       />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
index d15694de..990e3500 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
@@ -52,30 +52,30 @@ const MAIN_THIRD_ROW: TokenID[] = [
 ];
 
 const SECONDARY_FIRST_ROW = [
-  {text: 'μ', tooltip: 'q'},
-  {text: 'ω', tooltip: 'w'},
-  {text: 'ε', tooltip: 'e'},
-  {text: 'ρ', tooltip: 'r'},
-  {text: 'τ', tooltip: 't'},
-  {text: 'π', tooltip: 'y'}
+  {text: 'μ', title: 'q'},
+  {text: 'ω', title: 'w'},
+  {text: 'ε', title: 'e'},
+  {text: 'ρ', title: 'r'},
+  {text: 'τ', title: 't'},
+  {text: 'π', title: 'y'}
 ];
 
 const SECONDARY_SECOND_ROW = [
-  {text: 'α', tooltip: 'a'},
-  {text: 'σ', tooltip: 's'},
-  {text: 'δ', tooltip: 'd'},
-  {text: 'φ', tooltip: 'f'},
-  {text: 'γ', tooltip: 'g'},
-  {text: 'λ', tooltip: 'h'}
+  {text: 'α', title: 'a'},
+  {text: 'σ', title: 's'},
+  {text: 'δ', title: 'd'},
+  {text: 'φ', title: 'f'},
+  {text: 'γ', title: 'g'},
+  {text: 'λ', title: 'h'}
 ];
 
 const SECONDARY_THIRD_ROW = [
-  {text: 'ζ', tooltip: 'z'},
-  {text: 'ξ', tooltip: 'x'},
-  {text: 'ψ', tooltip: 'c'},
-  {text: 'θ', tooltip: 'v'},
-  {text: 'β', tooltip: 'b'},
-  {text: 'η', tooltip: 'n'}
+  {text: 'ζ', title: 'z'},
+  {text: 'ξ', title: 'x'},
+  {text: 'ψ', title: 'c'},
+  {text: 'θ', title: 'v'},
+  {text: 'β', title: 'b'},
+  {text: 'η', title: 'n'}
 ];
 
 interface RSEditorControlsProps {
@@ -92,9 +92,9 @@ function RSEditorControls({ onEdit, disabled }: RSEditorControlsProps) {
       token={token} onInsert={onEdit} disabled={disabled}
     />)}
     {SECONDARY_FIRST_ROW.map(
-    ({text, tooltip}) => 
-    <RSLocalButton key={`${prefixes.rsedit_btn}${tooltip}`}
-      text={text} tooltip={tooltip} onInsert={onEdit} disabled={disabled}
+    ({text, title}) => 
+    <RSLocalButton key={`${prefixes.rsedit_btn}${title}`}
+      text={text} title={title} onInsert={onEdit} disabled={disabled}
     />)}
 
     {MAIN_SECOND_ROW.map(
@@ -103,9 +103,9 @@ function RSEditorControls({ onEdit, disabled }: RSEditorControlsProps) {
       token={token} onInsert={onEdit} disabled={disabled}
     />)}
     {SECONDARY_SECOND_ROW.map(
-    ({text, tooltip}) => 
-    <RSLocalButton key={`${prefixes.rsedit_btn}${tooltip}`}
-      text={text} tooltip={tooltip} onInsert={onEdit} disabled={disabled}
+    ({text, title}) => 
+    <RSLocalButton key={`${prefixes.rsedit_btn}${title}`}
+      text={text} title={title} onInsert={onEdit} disabled={disabled}
     />)}
 
     {MAIN_THIRD_ROW.map(
@@ -114,9 +114,9 @@ function RSEditorControls({ onEdit, disabled }: RSEditorControlsProps) {
       token={token} onInsert={onEdit} disabled={disabled}
     />)}
     {SECONDARY_THIRD_ROW.map(
-    ({text, tooltip}) => 
-    <RSLocalButton key={`${prefixes.rsedit_btn}${tooltip}`}
-      text={text} tooltip={tooltip} onInsert={onEdit} disabled={disabled}
+    ({text, title}) => 
+    <RSLocalButton key={`${prefixes.rsedit_btn}${title}`}
+      text={text} title={title} onInsert={onEdit} disabled={disabled}
     />)}
   </div>);
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
index 67eda927..6c662a74 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
@@ -2,16 +2,16 @@ import { TokenID } from '@/models/rslang';
 
 interface RSLocalButtonProps {
   text: string
-  tooltip: string
+  title: string
   disabled?: boolean
   onInsert: (token: TokenID, key?: string) => void
 }
 
-function RSLocalButton({ text, tooltip, disabled, onInsert }: RSLocalButtonProps) {
+function RSLocalButton({ text, title, disabled, onInsert }: RSLocalButtonProps) {
   return (
   <button type='button' tabIndex={-1}
     disabled={disabled}
-    title={tooltip}
+    title={title}
     className='w-[2rem] h-6 cursor-pointer disabled:cursor-default rounded-none clr-hover clr-btn-clear'
     onClick={() => onInsert(TokenID.ID_LOCAL, text)}
   >
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
index d6a4c1d1..1379cd9c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
@@ -3,6 +3,7 @@
 import { Dispatch, SetStateAction } from 'react';
 
 import Divider from '@/components/Common/Divider';
+import FlexColumn from '@/components/Common/FlexColumn';
 import InfoLibraryItem from '@/components/Shared/InfoLibraryItem';
 import { useAuth } from '@/context/AuthContext';
 import { useRSForm } from '@/context/RSFormContext';
@@ -69,7 +70,7 @@ function EditorRSForm({
       className='flex'
       onKeyDown={handleInput}
     >
-      <div className='flex flex-col gap-3 px-4 pb-2'>
+      <FlexColumn className='px-4 pb-2'>
         <FormRSForm disabled={!isMutable}
           id={globalIDs.library_item_editor}
           isModified={isModified}
@@ -79,7 +80,7 @@ function EditorRSForm({
         <Divider margins='my-2' />
         
         <InfoLibraryItem item={schema} />
-      </div>
+      </FlexColumn>
 
       <RSFormStats stats={schema?.stats}/>
     </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
index 1cdbc354..5c44ebcf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { Dispatch, SetStateAction, useEffect, useLayoutEffect, useState } from 'react';
 import { FiSave } from 'react-icons/fi';
 import { toast } from 'react-toastify';
@@ -12,7 +13,7 @@ import { useAuth } from '@/context/AuthContext';
 import { useRSForm } from '@/context/RSFormContext';
 import { LibraryItemType } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
-import { limits, patterns } from '@/utils/constants';
+import { classnames, limits, patterns } from '@/utils/constants';
 
 interface FormRSFormProps {
   id?: string
@@ -79,7 +80,11 @@ function FormRSForm({
 
   return (
   <form id={id}
-    className='flex flex-col gap-3 mt-1 py-1 min-w-[22rem] w-[30rem]'
+    className={clsx(
+      'mt-1 min-w-[22rem] w-[30rem]',
+      'py-1',
+      classnames.flex_col
+    )}
     onSubmit={handleSubmit}
   >
     <TextInput required
@@ -92,7 +97,7 @@ function FormRSForm({
       label='Сокращение' 
       className='w-[14rem]'
       pattern={patterns.alias}
-      tooltip={`не более ${limits.alias_len} символов`}
+      title={`не более ${limits.alias_len} символов`}
       disabled={disabled}
       value={alias}
       onChange={event => setAlias(event.target.value)}
@@ -106,14 +111,14 @@ function FormRSForm({
     <div className='flex justify-between whitespace-nowrap'>
       <Checkbox
         label='Общедоступная схема'
-        tooltip='Общедоступные схемы видны всем пользователям и могут быть изменены'
+        title='Общедоступные схемы видны всем пользователям и могут быть изменены'
         disabled={disabled}
         value={common}
         setValue={value => setCommon(value)}
       />
       <Checkbox
         label='Неизменная схема'
-        tooltip='Только администраторы могут присваивать схемам неизменный статус'
+        title='Только администраторы могут присваивать схемам неизменный статус'
         disabled={disabled || !user?.is_staff}
         value={canonical}
         setValue={value => setCanonical(value)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx
index 1fd2d5f6..897c9e5d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx
@@ -11,7 +11,7 @@ function RSFormStats({ stats }: RSFormStatsProps) {
     return null;
   }
   return (
-  <div className='flex flex-col gap-1 px-4 mt-8 min-w-[16rem] max-w-[16rem]'>
+  <div className='flex flex-col gap-1 px-4 mt-8 w-[16rem]'>
     <LabeledValue id='count_all'
       label='Всего конституент '
       text={stats.count_all}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
index 6797667c..75daa191 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
@@ -36,40 +36,39 @@ function RSFormToolbar({
   return (    
   <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Сохранить изменения [Ctrl + S]'
+      title='Сохранить изменения [Ctrl + S]'
       disabled={!canSave}
       icon={<FiSave size='1.25rem' className={canSave ? 'clr-text-primary' : ''}/>}
       onClick={onSubmit}
     />
     <MiniButton
-      tooltip='Поделиться схемой'
+      title='Поделиться схемой'
       icon={<BiShareAlt size='1.25rem' className='clr-text-primary'/>}
       onClick={onShare}
     />
     <MiniButton
-      tooltip='Скачать TRS файл'
+      title='Скачать TRS файл'
       icon={<BiDownload size='1.25rem' className='clr-text-primary'/>}
       onClick={onDownload}
     />
     <MiniButton
-      tooltip={'отслеживание: ' + (isSubscribed ? '[включено]' : '[выключено]')}
+      title={'отслеживание: ' + (isSubscribed ? '[включено]' : '[выключено]')}
       disabled={anonymous || processing}
       icon={isSubscribed
         ? <FiBell size='1.25rem' className='clr-text-primary' />
         : <FiBellOff size='1.25rem' className='clr-text-controls' />
       }
-      dimensions='h-full w-fit'
       style={{outlineColor: 'transparent'}}
       onClick={onToggleSubscribe}
       />
     <MiniButton
-      tooltip={claimable ? 'Стать владельцем' : 'Невозможно стать владельцем' }
+      title={claimable ? 'Стать владельцем' : 'Невозможно стать владельцем' }
       icon={<LuCrown size='1.25rem' className={!claimable ? '' : 'clr-text-success'}/>}
       disabled={!claimable || anonymous || processing}
       onClick={onClaim}
     />
     <MiniButton
-      tooltip='Удалить схему'
+      title='Удалить схему'
       disabled={!isMutable}
       onClick={onDestroy}
       icon={<BiTrash size='1.25rem' className={isMutable ? 'clr-text-warning' : ''} />}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx
index 0e681c73..a3f55431 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx
@@ -40,25 +40,25 @@ function RSListToolbar({
   return (
   <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Переместить вверх [Alt + вверх]'
+      title='Переместить вверх [Alt + вверх]'
       icon={<BiUpvote size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-primary': ''}/>}
       disabled={!isMutable || nothingSelected}
       onClick={onMoveUp}
     />
     <MiniButton
-      tooltip='Переместить вниз [Alt + вниз]'
+      title='Переместить вниз [Alt + вниз]'
       icon={<BiDownvote size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-primary': ''}/>}
       disabled={!isMutable || nothingSelected}
       onClick={onMoveDown}
     />
     <MiniButton
-      tooltip='Клонировать конституенту [Alt + V]'
+      title='Клонировать конституенту [Alt + V]'
       icon={<BiDuplicate size='1.25rem' className={isMutable && selectedCount === 1 ? 'clr-text-success': ''} />}
       disabled={!isMutable || selectedCount !== 1}
       onClick={onClone}
     />
     <MiniButton
-      tooltip='Добавить новую конституенту... [Alt + `]'
+      title='Добавить новую конституенту... [Alt + `]'
       icon={<BiPlusCircle size='1.25rem' className={isMutable ? 'clr-text-success': ''} />}
       disabled={!isMutable}
       onClick={() => onCreate()}
@@ -66,7 +66,7 @@ function RSListToolbar({
     <div ref={insertMenu.ref} className='flex justify-center'>
       <div>
         <MiniButton
-          tooltip='Добавить пустую конституенту'
+          title='Добавить пустую конституенту'
           icon={<BiDownArrowCircle size='1.25rem' className={isMutable ? 'clr-text-success': ''} />}
           disabled={!isMutable}
           onClick={insertMenu.toggle}
@@ -79,14 +79,14 @@ function RSListToolbar({
             key={`${prefixes.csttype_list}${typeStr}`}
             text={`${getCstTypePrefix(typeStr as CstType)}1 — ${labelCstType(typeStr as CstType)}`}
             onClick={() => onCreate(typeStr as CstType)}
-            tooltip={getCstTypeShortcut(typeStr as CstType)}
+            title={getCstTypeShortcut(typeStr as CstType)}
           />
         )}
         </Dropdown> : null}
       </div>
     </div>
     <MiniButton
-      tooltip='Удалить выбранные [Delete]'
+      title='Удалить выбранные [Delete]'
       icon={<BiTrash size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-warning' : ''} />}
       disabled={!isMutable || nothingSelected}
       onClick={onDelete}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
index 9e4ec98c..d12f7cd7 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
@@ -14,7 +14,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import { GraphColoringScheme, GraphFilterParams } from '@/models/miscelanious';
 import { CstType, ICstCreateData } from '@/models/rsform';
 import { colorbgGraphNode } from '@/utils/color';
-import { TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
+import { classnames, TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
 
 import GraphSidebar from './GraphSidebar';
 import GraphToolbar from './GraphToolbar';
@@ -235,7 +235,7 @@ function EditorTermGraph({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Ed
       layer='z-tooltip'
       position='top-[1.6rem] left-[2.6rem]'
       className={clsx(
-        'w-[25rem] h-fit min-h-[11rem]',
+        'w-[25rem]',
         'px-3',
         'overflow-y-auto',
         'border shadow-md',
@@ -243,6 +243,7 @@ function EditorTermGraph({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Ed
       )}
     >
       <InfoConstituenta
+        className='pt-1 pb-2'
         data={hoverCst}
       />
     </Overlay> : null}
@@ -250,8 +251,8 @@ function EditorTermGraph({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Ed
     <Overlay
       position='top-0 left-0'
       className={clsx(
-        'max-w-[13.5rem] min-w-[13.5rem]',
-        'flex flex-col gap-3'
+        'w-[13.5rem]',
+        classnames.flex_col
       )}
     >
       <GraphSidebar 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
index ce7c6dfa..1caa92e4 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
@@ -34,12 +34,12 @@ function GraphToolbar({
   return (
   <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Настройки фильтрации узлов и связей'
+      title='Настройки фильтрации узлов и связей'
       icon={<BiFilterAlt size='1.25rem' className='clr-text-primary' />}
       onClick={showParamsDialog}
     />
     <MiniButton
-      tooltip={!noText ? 'Скрыть текст' : 'Отобразить текст'}
+      title={!noText ? 'Скрыть текст' : 'Отобразить текст'}
       icon={
         !noText
         ? <BiFontFamily size='1.25rem' className='clr-text-success' />
@@ -49,28 +49,28 @@ function GraphToolbar({
     />
     <MiniButton
       icon={<BiCollapse size='1.25rem' className='clr-text-primary' />}
-      tooltip='Восстановить камеру'
+      title='Восстановить камеру'
       onClick={onResetViewpoint}
     />
     <MiniButton
       icon={<BiPlanet size='1.25rem' className={!is3D ? '' : orbit ? 'clr-text-success' : 'clr-text-primary'} />}
-      tooltip='Анимация вращения'
+      title='Анимация вращения'
       disabled={!is3D}
       onClick={toggleOrbit}
     />
     <MiniButton
-      tooltip='Новая конституента'
+      title='Новая конституента'
       icon={<BiPlusCircle size='1.25rem' className={isMutable ? 'clr-text-success' : ''} />}
       disabled={!isMutable}
       onClick={onCreate}
     />
     <MiniButton
-      tooltip='Удалить выбранные'
+      title='Удалить выбранные'
       icon={<BiTrash size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-warning' : ''} />}
       disabled={!isMutable || nothingSelected}
       onClick={onDelete}
     />
-    <HelpButton topic={HelpTopic.GRAPH_TERM} dimensions='max-w-[calc(100vw-20rem)]' offset={4} />
+    <HelpButton topic={HelpTopic.GRAPH_TERM} className='max-w-[calc(100vw-20rem)]' offset={4} />
   </Overlay>);
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
index e74a1ecf..111724cf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
@@ -43,7 +43,7 @@ function ViewHidden({
     return null;
   }
   return (
-  <div className='flex flex-col text-sm ml-2 border clr-app max-w-[12.5rem] min-w-[12.5rem]'>
+  <div className='flex flex-col text-sm ml-2 border clr-app w-[12.5rem]'>
     <p className='mt-2 text-center'><b>Скрытые конституенты</b></p>
     <div className='flex flex-wrap justify-center gap-2 py-2 overflow-y-auto' style={{ maxHeight: dismissedHeight }}>
     {items.map(
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 098ccfe0..f35b7fc0 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -415,11 +415,11 @@ function RSTabs() {
       />
       <ConceptTab
         label='Карточка'
-        tooltip={`Название схемы: ${schema.title ?? ''}`}
+        title={`Название схемы: ${schema.title ?? ''}`}
       />
       <ConceptTab
         label='Содержание'
-        tooltip={[
+        title={[
           `Всего конституент: ${schema.stats?.count_all ?? 0}`,
           `Количество ошибок: ${schema.stats?.count_errors ?? 0}`
         ].join('\n')}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
index a9a73b02..a5e4d799 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
@@ -98,7 +98,7 @@ function RSTabsMenu({
   <div className='flex'>
     <div ref={schemaMenu.ref}>
       <Button noBorder dense tabIndex={-1}
-        tooltip='Меню'
+        title='Меню'
         icon={<BiMenu size='1.25rem' className='clr-text-controls' />}
         className='h-full pl-2'
         style={{outlineColor: 'transparent'}}
@@ -108,7 +108,7 @@ function RSTabsMenu({
       <Dropdown>
         <DropdownButton
           text={isOwned ? 'Вы — владелец' : 'Стать владельцем'}
-          tooltip={!user || !isClaimable ? 'Взять во владение можно общую изменяемую схему' : ''}
+          title={!user || !isClaimable ? 'Взять во владение можно общую изменяемую схему' : ''}
           icon={<LuCrown size='1rem' className={isOwned ? 'clr-text-success' : 'clr-text-controls'} />}
           onClick={(!isOwned && user && isClaimable) ? handleClaimOwner : undefined}
         />
@@ -147,7 +147,7 @@ function RSTabsMenu({
     
     <div ref={editMenu.ref}>
       <Button dense noBorder tabIndex={-1}
-        tooltip={'Редактирование'}
+        title={'Редактирование'}
         className='h-full'
         style={{outlineColor: 'transparent'}}
         icon={<FiEdit size='1.25rem' className={isMutable ? 'clr-text-success' : 'clr-text-warning'}/>}
@@ -157,13 +157,13 @@ function RSTabsMenu({
       <Dropdown>
         <DropdownButton disabled={!isMutable}
           text='Сброс имён'
-          tooltip='Присвоить порядковые имена и обновить выражения'
+          title='Присвоить порядковые имена и обновить выражения'
           icon={<BiAnalyse size='1rem' className={isMutable ? 'clr-text-primary': ''} />}
           onClick={handleReindex}
         />
         <DropdownButton disabled={!isMutable}
           text='Банк выражений'
-          tooltip='Создать конституенту из шаблона'
+          title='Создать конституенту из шаблона'
           icon={<BiDiamond size='1rem' className={isMutable ? 'clr-text-success': ''} />}
           onClick={handleTemplates}
         />
@@ -172,7 +172,7 @@ function RSTabsMenu({
 
     <div ref={accessMenu.ref}>
       <Button dense noBorder tabIndex={-1}
-        tooltip={`режим ${labelAccessMode(mode)}`}
+        title={`режим ${labelAccessMode(mode)}`}
         className='h-full pr-2'
         style={{outlineColor: 'transparent'}}
         icon={
@@ -186,19 +186,19 @@ function RSTabsMenu({
       <Dropdown>
         <DropdownButton
           text={labelAccessMode(UserAccessMode.READER)}
-          tooltip={describeAccessMode(UserAccessMode.READER)}
+          title={describeAccessMode(UserAccessMode.READER)}
           icon={<LuGlasses size='1rem' className='clr-text-primary' />}
           onClick={() => handleChangeMode(UserAccessMode.READER)}
         />
         <DropdownButton disabled={!isOwned}
           text={labelAccessMode(UserAccessMode.OWNER)}
-          tooltip={describeAccessMode(UserAccessMode.OWNER)}
+          title={describeAccessMode(UserAccessMode.OWNER)}
           icon={<LuCrown size='1rem' className={isOwned ? 'clr-text-primary': ''} />}
           onClick={() => handleChangeMode(UserAccessMode.OWNER)}
         />
         <DropdownButton disabled={!user?.is_staff}
           text={labelAccessMode(UserAccessMode.ADMIN)}
-          tooltip={describeAccessMode(UserAccessMode.ADMIN)}
+          title={describeAccessMode(UserAccessMode.ADMIN)}
           icon={<BiMeteor size='1rem' className={user?.is_staff ? 'clr-text-primary': ''} />}
           onClick={() => handleChangeMode(UserAccessMode.ADMIN)}
         />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx
index 0bd09c31..6043114d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx
@@ -77,15 +77,15 @@ function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }:
   return (
   <div className='flex items-stretch border-b clr-input'>
     <ConceptSearch noBorder
-      dimensions='min-w-[6rem] pr-2 w-full'
+      className='min-w-[6rem] pr-2 flex-grow'
       value={filterText}
       onChange={setFilterText}
     />
    
     <div ref={matchModeMenu.ref}>
       <SelectorButton transparent tabIndex={-1}
-        tooltip='Настройка атрибутов для фильтрации'
-        dimensions='w-fit h-full'
+        title='Настройка атрибутов для фильтрации'
+        className='h-full'
         icon={<BiFilterAlt size='1.25rem' />}
         text={labelCstMathchMode(filterMatch)}
         onClick={matchModeMenu.toggle}
@@ -108,8 +108,8 @@ function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }:
 
     <div ref={sourceMenu.ref}>
       <SelectorButton transparent tabIndex={-1}
-        tooltip='Настройка фильтрации по графу термов'
-        dimensions='w-fit h-full pr-2'
+        title='Настройка фильтрации по графу термов'
+        className='h-full pr-2'
         icon={<BiCog size='1.25rem' />}
         text={labelCstSource(filterSource)}
         onClick={sourceMenu.toggle}
diff --git a/rsconcept/frontend/src/pages/RegisterPage.tsx b/rsconcept/frontend/src/pages/RegisterPage.tsx
index 405f1e5c..3f608f16 100644
--- a/rsconcept/frontend/src/pages/RegisterPage.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { BiInfoCircle } from 'react-icons/bi';
 import { toast } from 'react-toastify';
@@ -7,6 +8,7 @@ import { toast } from 'react-toastify';
 import Button from '@/components/Common/Button';
 import Checkbox from '@/components/Common/Checkbox';
 import ConceptTooltip from '@/components/Common/ConceptTooltip';
+import FlexColumn from '@/components/Common/FlexColumn';
 import Overlay from '@/components/Common/Overlay';
 import SubmitButton from '@/components/Common/SubmitButton';
 import TextInput from '@/components/Common/TextInput';
@@ -16,7 +18,7 @@ import InfoError from '@/components/InfoError';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { type IUserSignupData } from '@/models/library';
-import { globalIDs, patterns } from '@/utils/constants';
+import { classnames, globalIDs, patterns } from '@/utils/constants';
 
 function RegisterPage() {
   const router = useConceptNavigation();
@@ -66,12 +68,12 @@ function RegisterPage() {
   }
   return (
   <form
-    className='flex flex-col gap-3 px-6 py-3 h-fit'
+    className={clsx('px-6 py-3', classnames.flex_col)}
     onSubmit={handleSubmit}
   >
     <h1>Новый пользователь</h1>
     <div className='flex gap-12'>
-      <div className='flex flex-col gap-3'>
+      <FlexColumn>
         <div className='absolute'>
           <Overlay
             id={globalIDs.password_tooltip}
@@ -91,7 +93,7 @@ function RegisterPage() {
         <TextInput id='username' required
           label='Имя пользователя (логин)'
           pattern={patterns.login}
-          tooltip='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
+          title='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
           value={username}
           className='w-[15rem]'
           onChange={event => setUsername(event.target.value)}
@@ -108,12 +110,12 @@ function RegisterPage() {
           value={password2}
           onChange={event => setPassword2(event.target.value)}
         />
-      </div>
+      </FlexColumn>
 
-      <div className='flex flex-col gap-3 w-[15rem]'>
+      <FlexColumn className='w-[15rem]'>
         <TextInput id='email' required
           label='Электронная почта (email)'
-          tooltip='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
+          title='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
           value={email}
           onChange={event => setEmail(event.target.value)}
         />
@@ -127,7 +129,7 @@ function RegisterPage() {
           value={lastName}
           onChange={event => setLastName(event.target.value)}
         />
-      </div>
+      </FlexColumn>
     </div>
     
     <div className='flex gap-1 text-sm'>
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
index 5d87d490..a9bded79 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
+import FlexColumn from '@/components/Common/FlexColumn';
 import SubmitButton from '@/components/Common/SubmitButton';
 import TextInput from '@/components/Common/TextInput';
 import InfoError, { ErrorData } from '@/components/InfoError';
@@ -78,7 +79,7 @@ function EditorPassword() {
     )}
     onSubmit={handleSubmit}
   >
-    <div className='flex flex-col gap-3'>
+    <FlexColumn>
       <TextInput id='old_password' type='password' allowEnter
         label='Старый пароль'
         value={oldPassword}
@@ -101,7 +102,7 @@ function EditorPassword() {
         }}
       />
       {error ? <ProcessError error={error} /> : null}
-    </div>
+    </FlexColumn>
     <SubmitButton
       text='Сменить пароль'
       className='self-center'
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
index 73b0809d..015e1771 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -8,6 +9,7 @@ import TextInput from '@/components/Common/TextInput';
 import { useBlockNavigation } from '@/context/NagivationContext';
 import { useUserProfile } from '@/context/UserProfileContext';
 import { IUserUpdateData } from '@/models/library';
+import { classnames } from '@/utils/constants';
 
 function EditorProfile() {
   const { updateUser, user, processing } = useUserProfile();
@@ -53,11 +55,15 @@ function EditorProfile() {
   return (
   <form
     onSubmit={handleSubmit}
-    className='px-6 py-2 flex flex-col gap-3 min-w-[18rem]'
+    className={clsx(
+      'min-w-[18rem]',
+      'px-6 py-2',
+      classnames.flex_col
+    )}
   >
     <TextInput id='username' disabled
       label='Логин'
-      tooltip='Логин изменить нельзя'
+      title='Логин изменить нельзя'
       value={username}
     />
     <TextInput id='first_name' allowEnter
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
index c320ab15..9cc7327d 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
@@ -36,7 +36,7 @@ function UserTabs() {
       <div>
         <Overlay position='top-0 right-0'>
           <MiniButton
-            tooltip='Показать/Скрыть список отслеживаний'
+            title='Показать/Скрыть список отслеживаний'
             icon={showSubs
               ? <FiBell size='1.25rem' className='clr-text-primary' />
               : <FiBellOff size='1.25rem' className='clr-text-primary' />
diff --git a/rsconcept/frontend/src/utils/codemirror.ts b/rsconcept/frontend/src/utils/codemirror.ts
index eb32bd0c..b93f2d76 100644
--- a/rsconcept/frontend/src/utils/codemirror.ts
+++ b/rsconcept/frontend/src/utils/codemirror.ts
@@ -137,7 +137,7 @@ export function domTooltipConstituenta(cst: IConstituenta) {
   const dom = document.createElement('div');
   dom.className = clsx(
     'z-tooltip',
-    'max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit',
+    'max-h-[25rem] max-w-[25rem] min-w-[10rem]',
     'p-2',
     'border shadow-md', 
     'overflow-y-auto',
@@ -181,7 +181,7 @@ export function domTooltipEntityReference(ref: IEntityReference, cst: IConstitue
   const dom = document.createElement('div');
   dom.className = clsx(
     'z-tooltip',
-    'max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit',
+    'max-h-[25rem] max-w-[25rem] min-w-[10rem]',
     'p-2 flex flex-col',
     'border shadow-md',
     'overflow-y-auto',
@@ -229,7 +229,7 @@ export function domTooltipSyntacticReference(ref: ISyntacticReference, masterRef
   const dom = document.createElement('div');
   dom.className = clsx(
     'z-tooltip',
-    'max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit',
+    'max-h-[25rem] max-w-[25rem] min-w-[10rem]',
     'p-2 flex flex-col',
     'border shadow-md',
     'overflow-y-auto',
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index e0e48236..c06afab0 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -55,6 +55,14 @@ export const youtube = {
   intro: '0Ty9mu9sOJo'
 };
 
+/**
+ * Classname combinations.
+ * Note: using clsx in conjunction with tailwindCss is preferred to creating custom CSS
+ */
+export const classnames = {
+  flex_col: 'flex flex-col gap-3'
+};
+
 /**
  * Constant URLs.
  */