F: Improve RSEditor layout responsiveness

rsconcept/frontend/src/components/info/BadgeConstituenta.tsx

@@ -4,29 +4,32 @@ import { IConstituenta } from '@/models/rsform';
 import { isMockCst } from '@/models/rsformAPI';
 import { colorFgCstStatus, IColorTheme } from '@/styling/color';
 
+import { CProps } from '../props';
 import TooltipConstituenta from './TooltipConstituenta';
 
-interface BadgeConstituentaProps {
+interface BadgeConstituentaProps extends CProps.Styling {
   prefixID?: string;
   value: IConstituenta;
   theme: IColorTheme;
 }
 
-function BadgeConstituenta({ value, prefixID, theme }: BadgeConstituentaProps) {
+function BadgeConstituenta({ value, prefixID, className, style, theme }: BadgeConstituentaProps) {
   return (
     <div
       id={`${prefixID}${value.alias}`}
       className={clsx(
-        'min-w-[3.1rem] max-w-[3.1rem]', // prettier: split lines
+        'min-w-[3.1rem] max-w-[3.1rem]',
         'px-1',
         'border rounded-md',
         value.is_inherited && 'border-dashed',
-        'text-center font-medium whitespace-nowrap'
+        'text-center font-medium whitespace-nowrap',
+        className
       )}
       style={{
         borderColor: colorFgCstStatus(value.status, theme),
         color: colorFgCstStatus(value.status, theme),
-        backgroundColor: isMockCst(value) ? theme.bgWarning : theme.bgInput
+        backgroundColor: isMockCst(value) ? theme.bgWarning : theme.bgInput,
+        ...style
       }}
     >
       {value.alias}

rsconcept/frontend/src/components/ui/Modal.tsx

@@ -91,12 +91,14 @@ function Modal({
         {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
         <div
-          className={clsx('overflow-auto overscroll-contain', className)}
+          className={clsx(
-          style={{
+            'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)]',
-            overflow: overflowVisible ? 'visible' : 'auto',
+            {
-            maxHeight: 'calc(100svh - 8rem)',
+              'overflow-auto': !overflowVisible,
-            maxWidth: 'calc(100svw - 2rem)'
+              'overflow-visible': overflowVisible
-          }}
+            },
+            className
+          )}
         >
           {children}
         </div>

rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx

@@ -78,7 +78,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         fitContent
         spellCheck
         label='Термин'
-        placeholder='Обозначение, используемое в текстовых определениях'
+        placeholder='Обозначение для текстовых определений'
         className='max-h-[3.6rem]'
         value={state.term_raw}
         onChange={event => partialUpdate({ term_raw: event.target.value })}

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx

@@ -149,7 +149,7 @@ function FormConstituenta({
           id='cst_term'
           label='Термин'
           maxHeight='8rem'
-          placeholder='Обозначение, используемое в текстовых определениях'
+          placeholder='Обозначение для текстовых определений'
           schema={schema}
           onOpenEdit={onOpenEdit}
           value={term}
@@ -240,7 +240,7 @@ function FormConstituenta({
             </AnimateFade>
 
             {!disabled || processing ? (
-              <div className='self-center flex'>
+              <div className='mx-auto flex'>
                 <SubmitButton
                   key='cst_form_submit'
                   id='cst_form_submit'

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx

@@ -165,7 +165,7 @@ function EditorRSExpression({
         toggleControls={() => setShowControls(prev => !prev)}
       />
 
-      <Overlay position='top-[-0.5rem] pl-[8rem] sm:pl-[4rem] right-1/2 translate-x-1/2 flex'>
+      <Overlay position='top-[-0.5rem]' className='pl-[8.5rem] xs:pl-[2rem] flex justify-center w-full gap-1'>
         <StatusBar
           processing={parser.processing}
           isModified={isModified}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx

@@ -92,7 +92,7 @@ function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
   return (
     <motion.div
       className={clsx(
-        'max-w-[38.5rem] sm:max-w-[40rem] sm:min-w-[40rem] md:max-w-fit mx-1 sm:mx-0',
+        'max-w-[28rem] min-w-[28rem] xs:max-w-[38.5rem] xs:min-w-[38.5rem] sm:max-w-[40rem] sm:min-w-[40rem] md:max-w-fit mx-1 sm:mx-0',
         'flex-wrap',
         'divide-solid',
         'text-xs md:text-sm',
@@ -112,6 +112,7 @@ function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
           title={title}
           onInsert={onEdit}
           disabled={disabled}
+          className='hidden xs:inline'
         />
       ))}
 
@@ -121,6 +122,7 @@ function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
       {SECONDARY_SECOND_ROW.map(({ text, title }) => (
         <RSLocalButton
           key={`${prefixes.rsedit_btn}${title}`}
+          className='hidden xs:inline'
           text={text}
           title={title}
           onInsert={onEdit}
@@ -134,6 +136,7 @@ function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
       {SECONDARY_THIRD_ROW.map(({ text, title }) => (
         <RSLocalButton
           key={`${prefixes.rsedit_btn}${title}`}
+          className='hidden xs:inline'
           text={text}
           title={title}
           onInsert={onEdit}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx

@@ -4,13 +4,22 @@ import { CProps } from '@/components/props';
 import { TokenID } from '@/models/rslang';
 import { globals } from '@/utils/constants';
 
-interface RSLocalButtonProps extends CProps.Titled {
+interface RSLocalButtonProps extends CProps.Titled, CProps.Styling {
   text: string;
   disabled?: boolean;
   onInsert: (token: TokenID, key?: string) => void;
 }
 
-function RSLocalButton({ text, title, titleHtml, hideTitle, disabled, onInsert }: RSLocalButtonProps) {
+function RSLocalButton({
+  text,
+  title,
+  titleHtml,
+  hideTitle,
+  disabled,
+  className,
+  onInsert,
+  ...restProps
+}: RSLocalButtonProps) {
   return (
     <button
       type='button'
@@ -25,9 +34,11 @@ function RSLocalButton({ text, title, titleHtml, hideTitle, disabled, onInsert }
         'cursor-pointer disabled:cursor-default',
         'rounded-none',
         'clr-hover clr-btn-clear',
-        'font-math'
+        'font-math',
+        className
       )}
       onClick={() => onInsert(TokenID.ID_LOCAL, text)}
+      {...restProps}
     >
       {text}
     </button>

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx

@@ -41,12 +41,10 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
       tabIndex={0}
       className={clsx(
         'w-[10rem] h-[1.75rem]',
-        'scale-75 sm:scale-100 mx-[-2.5rem] sm:m-0',
         'px-2 flex items-center justify-center gap-2',
         'border',
         'select-none',
         'cursor-pointer',
-        'translate-x-[-1.5rem]',
         'focus-frame',
         'duration-500 transition-colors'
       )}

rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx

@@ -69,7 +69,12 @@ function TableSideConstituents({
         minSize: 65,
         footer: undefined,
         cell: props => (
-          <BadgeConstituenta theme={colors} value={props.row.original} prefixID={prefixes.cst_side_table} />
+          <BadgeConstituenta
+            className='mr-[-0.5rem]'
+            theme={colors}
+            value={props.row.original}
+            prefixID={prefixes.cst_side_table}
+          />
         )
       }),
       columnHelper.accessor(cst => describeConstituenta(cst), {