Refactoring: attribute names + introducing namespace

2025-06-26 13:00:39 +03:00 · 2023-12-18 19:42:27 +03:00 · 2023-12-18 19:42:27 +03:00 · db1d5077c7
commit db1d5077c7
parent 6965e83e19
74 changed files with 458 additions and 381 deletions
--- 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}
  >
--- 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}
--- 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'
--- 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}
--- 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) {
--- 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>);
--- 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}
--- 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',
--- 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>);
--- a/rsconcept/frontend/src/components/Common/FlexColumn.tsx
+++ 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;
--- 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}
--- 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}
--- 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}
  >
--- 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}
--- 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>);
--- 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'
--- 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}
--- 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',
--- 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}
  >
--- 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',
--- 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',
--- 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>);
--- 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}
--- a/rsconcept/frontend/src/components/Common/commonInterfaces.ts
+++ b/rsconcept/frontend/src/components/Common/commonInterfaces.ts
@ -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
-}
--- 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'
 > {
--- 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
--- 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>);
--- 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]'>
--- 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
--- 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}
--- 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}
--- a/rsconcept/frontend/src/components/props.d.ts
+++ 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>;
+
+}
--- 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='Полное название'
--- 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;
--- 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;
--- 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}
--- 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;
--- 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'>
--- 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='Выбраны к удалению'
--- 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]'
        />
--- 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;
--- 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}
--- 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)}
        />
--- 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})}
      />
--- 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}
--- 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}
    />
--- 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)}
    />
--- 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)}
        />);
      })}
--- 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}
      />
--- 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>
--- 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}
  >
--- 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',
--- 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' : ''} />}
--- 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}
  >
--- 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' />}
      />
--- 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>);
 }
--- 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)}
  >
--- 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>
--- 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)}
--- 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}
--- 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' : ''} />}
--- 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}
--- 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 
--- 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>);
 }

--- 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(
--- 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')}
--- 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)}
        />
--- 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}
--- 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'>
--- 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'
--- 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
--- 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' />
--- 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',
--- 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.
 */