From 31fb5b82ef15c34ed64e5eae76f706de9749c8d2 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 6 Sep 2024 13:50:00 +0300
Subject: [PATCH] F: Improve RSEditor layout responsiveness

---
 .../src/components/info/BadgeConstituenta.tsx   | 13 ++++++++-----
 rsconcept/frontend/src/components/ui/Modal.tsx  | 14 ++++++++------
 .../src/dialogs/DlgCreateCst/FormCreateCst.tsx  |  2 +-
 .../EditorConstituenta/FormConstituenta.tsx     |  4 ++--
 .../EditorRSExpression/EditorRSExpression.tsx   |  2 +-
 .../EditorRSExpression/RSEditControls.tsx       |  5 ++++-
 .../EditorRSExpression/RSLocalButton.tsx        | 17 ++++++++++++++---
 .../RSFormPage/EditorRSExpression/StatusBar.tsx |  2 --
 .../ViewConstituents/TableSideConstituents.tsx  |  7 ++++++-
 9 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx b/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
index f70ab2fd..8d78b8e6 100644
--- a/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
+++ b/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}
diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index 4e8ced08..dcd01f2b 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/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)}
-          style={{
-            overflow: overflowVisible ? 'visible' : 'auto',
-            maxHeight: 'calc(100svh - 8rem)',
-            maxWidth: 'calc(100svw - 2rem)'
-          }}
+          className={clsx(
+            'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)]',
+            {
+              'overflow-auto': !overflowVisible,
+              'overflow-visible': overflowVisible
+            },
+            className
+          )}
         >
           {children}
         </div>
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
index 188af2fa..f01f3c09 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
+++ b/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 })}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index 191bba40..2321fbe9 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/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'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
index 66d828c0..7ffeea44 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
+++ b/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}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
index a5409153..7270a868 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
+++ b/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}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
index fa224d20..aad4ded6 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
+++ b/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>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
index 4bbacfcb..74b69b19 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
+++ b/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'
       )}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
index cec12186..11780219 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
+++ b/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), {