From 2d9c4936b331e11c19034ec38b936c6db6711b3d Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 11 May 2024 20:53:36 +0300
Subject: [PATCH] Firefox UI fixes

---
 rsconcept/frontend/src/app/Navigation/Logo.tsx      |  2 +-
 rsconcept/frontend/src/components/man/BadgeHelp.tsx |  2 +-
 .../src/components/ui/DataTable/DataTable.tsx       |  2 +-
 rsconcept/frontend/src/components/ui/Dropdown.tsx   |  1 +
 .../frontend/src/components/ui/DropdownButton.tsx   |  1 +
 .../frontend/src/components/ui/DropdownCheckbox.tsx |  2 +-
 .../frontend/src/components/ui/SelectMulti.tsx      |  2 +-
 .../frontend/src/components/ui/SelectSingle.tsx     |  2 +-
 rsconcept/frontend/src/components/ui/TextArea.tsx   |  2 +-
 rsconcept/frontend/src/components/ui/TextInput.tsx  |  2 +-
 .../frontend/src/components/wrap/AnimateFade.tsx    |  1 +
 .../DlgConstituentaTemplate.tsx                     |  2 +-
 .../src/dialogs/DlgCreateCst/FormCreateCst.tsx      |  1 +
 .../EditorConstituenta/FormConstituenta.tsx         |  8 +++-----
 .../RSFormPage/EditorRSExpression/ParsingResult.tsx |  2 ++
 .../RSFormPage/EditorRSExpression/StatusBar.tsx     |  1 +
 .../pages/RSFormPage/EditorRSForm/FormRSForm.tsx    |  2 ++
 rsconcept/frontend/src/styling/setup.css            | 13 ++++++++++---
 18 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/rsconcept/frontend/src/app/Navigation/Logo.tsx b/rsconcept/frontend/src/app/Navigation/Logo.tsx
index 8daabdb5..9077a190 100644
--- a/rsconcept/frontend/src/app/Navigation/Logo.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Logo.tsx
@@ -10,7 +10,7 @@ function Logo() {
   return (
     <img
       alt='Логотип КонцептПортал'
-      className={clsx('max-h-[1.6rem] min-w-fit', {
+      className={clsx('max-h-[1.6rem] w-fit', {
         'min-w-[11.5rem]': size.isSmall
       })}
       src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
diff --git a/rsconcept/frontend/src/components/man/BadgeHelp.tsx b/rsconcept/frontend/src/components/man/BadgeHelp.tsx
index 9ec99bbd..9a94ca89 100644
--- a/rsconcept/frontend/src/components/man/BadgeHelp.tsx
+++ b/rsconcept/frontend/src/components/man/BadgeHelp.tsx
@@ -20,7 +20,7 @@ function BadgeHelp({ topic, ...restProps }: BadgeHelpProps) {
     return null;
   }
   return (
-    <div id={`help-${topic}`} className='p-1'>
+    <div tabIndex={-1} id={`help-${topic}`} className='p-1'>
       <IconHelp size='1.25rem' className='icon-primary' />
       <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modal-tooltip' {...restProps}>
         <div className='relative' onClick={event => event.stopPropagation()}>
diff --git a/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
index a593db38..8978ae49 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
@@ -140,7 +140,7 @@ function DataTable<TData extends RowData>({
   }, [rows, dense, noHeader, contentHeight]);
 
   return (
-    <div id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
+    <div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
       <table className='w-full'>
         {!noHeader ? (
           <TableHeader
diff --git a/rsconcept/frontend/src/components/ui/Dropdown.tsx b/rsconcept/frontend/src/components/ui/Dropdown.tsx
index 86ca5c95..916bcaad 100644
--- a/rsconcept/frontend/src/components/ui/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/ui/Dropdown.tsx
@@ -15,6 +15,7 @@ function Dropdown({ isOpen, stretchLeft, className, children, ...restProps }: Dr
   return (
     <div className='relative'>
       <motion.div
+        tabIndex={-1}
         className={clsx(
           'z-modal-tooltip',
           'absolute mt-3',
diff --git a/rsconcept/frontend/src/components/ui/DropdownButton.tsx b/rsconcept/frontend/src/components/ui/DropdownButton.tsx
index b6d740bc..6dd35db1 100644
--- a/rsconcept/frontend/src/components/ui/DropdownButton.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownButton.tsx
@@ -26,6 +26,7 @@ function DropdownButton({
 }: DropdownButtonProps) {
   return (
     <motion.button
+      tabIndex={-1}
       type='button'
       onClick={onClick}
       className={clsx(
diff --git a/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx b/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
index bffb5bbb..128e3573 100644
--- a/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
@@ -25,7 +25,7 @@ function DropdownCheckbox({ title, setValue, disabled, ...restProps }: DropdownC
         !!setValue && !disabled && 'clr-hover'
       )}
     >
-      <Checkbox disabled={disabled} setValue={setValue} {...restProps} />
+      <Checkbox tabIndex={-1} disabled={disabled} setValue={setValue} {...restProps} />
     </motion.div>
   );
 }
diff --git a/rsconcept/frontend/src/components/ui/SelectMulti.tsx b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
index 81eb7551..275b9f9e 100644
--- a/rsconcept/frontend/src/components/ui/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
@@ -22,7 +22,7 @@ function DropdownIndicator<Option, Group extends GroupBase<Option> = GroupBase<O
   return (
     components.DropdownIndicator && (
       <components.DropdownIndicator {...props}>
-        {props.selectProps.menuIsOpen ? <IconDropArrow size='1.25rem' /> : <IconDropArrowUp size='1.25rem' />}
+        {props.selectProps.menuIsOpen ? <IconDropArrowUp size='1.25rem' /> : <IconDropArrow size='1.25rem' />}
       </components.DropdownIndicator>
     )
   );
diff --git a/rsconcept/frontend/src/components/ui/SelectSingle.tsx b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
index 2492f3a8..74cd5b45 100644
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@@ -22,7 +22,7 @@ function DropdownIndicator<Option, Group extends GroupBase<Option> = GroupBase<O
   return (
     components.DropdownIndicator && (
       <components.DropdownIndicator {...props}>
-        {props.selectProps.menuIsOpen ? <IconDropArrow size='1.25rem' /> : <IconDropArrowUp size='1.25rem' />}
+        {props.selectProps.menuIsOpen ? <IconDropArrowUp size='1.25rem' /> : <IconDropArrow size='1.25rem' />}
       </components.DropdownIndicator>
     )
   );
diff --git a/rsconcept/frontend/src/components/ui/TextArea.tsx b/rsconcept/frontend/src/components/ui/TextArea.tsx
index c5985b81..1fbd02bd 100644
--- a/rsconcept/frontend/src/components/ui/TextArea.tsx
+++ b/rsconcept/frontend/src/components/ui/TextArea.tsx
@@ -37,7 +37,7 @@ function TextArea({
           'leading-tight',
           {
             'border': !noBorder,
-            'flex-grow': dense,
+            'flex-grow max-w-full': dense,
             'clr-outline': !noOutline
           },
           colors,
diff --git a/rsconcept/frontend/src/components/ui/TextInput.tsx b/rsconcept/frontend/src/components/ui/TextInput.tsx
index 7f7a0364..70c125ff 100644
--- a/rsconcept/frontend/src/components/ui/TextInput.tsx
+++ b/rsconcept/frontend/src/components/ui/TextInput.tsx
@@ -45,7 +45,7 @@ function TextInput({
           'leading-tight truncate hover:text-clip',
           {
             'px-3': !noBorder || !disabled,
-            'flex-grow': dense,
+            'flex-grow max-w-full': dense,
             'border': !noBorder,
             'clr-outline': !noOutline
           },
diff --git a/rsconcept/frontend/src/components/wrap/AnimateFade.tsx b/rsconcept/frontend/src/components/wrap/AnimateFade.tsx
index f30b4dd9..76d428e9 100644
--- a/rsconcept/frontend/src/components/wrap/AnimateFade.tsx
+++ b/rsconcept/frontend/src/components/wrap/AnimateFade.tsx
@@ -25,6 +25,7 @@ function AnimateFade({
   }
   return (
     <motion.div
+      tabIndex={-1}
       initial={{ ...(!noFadeIn ? animateFade.initial : {}) }}
       animate={hideContent ? 'hidden' : 'active'}
       variants={animateFade.variants}
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
index b322a8cc..0ef8d1d6 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@@ -139,7 +139,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
     <Modal
       header='Создание конституенты из шаблона'
       submitText='Создать'
-      className='w-[43rem] h-[36rem] px-6'
+      className='w-[43rem] h-[36.5rem] px-6'
       hideWindow={hideWindow}
       canSubmit={validated}
       onSubmit={handleSubmit}
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
index adfa724f..39305ff1 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
@@ -104,6 +104,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         <button
           key='dlg_cst_show_comment'
           id='dlg_cst_show_comment'
+          tabIndex={-1}
           type='button'
           className='self-start cc-label clr-text-url hover:underline'
           onClick={() => setForceComment(true)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index f83833a4..fd0e5056 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -9,6 +9,7 @@ import { IconSave } from '@/components/Icons';
 import RefsInput from '@/components/RefsInput';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
+import TextInput from '@/components/ui/TextInput';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import { useRSForm } from '@/context/RSFormContext';
 import { CstType, IConstituenta, ICstUpdateData } from '@/models/rsform';
@@ -154,18 +155,14 @@ function FormConstituenta({
           disabled={disabled}
           onChange={newValue => setTerm(newValue)}
         />
-        <TextArea
+        <TextInput
           id='cst_typification'
           dense
           noBorder
           disabled={true}
           label='Типизация'
-          rows={typification.length > ROW_SIZE_IN_CHARACTERS ? 2 : 1}
           value={typification}
           colors='clr-app'
-          style={{
-            resize: 'none'
-          }}
         />
         <AnimatePresence>
           <AnimateFade key='cst_expression_fade' hideContent={!!state && !state?.definition_formal && isElementary}>
@@ -225,6 +222,7 @@ function FormConstituenta({
             <button
               key='cst_disable_comment'
               id='cst_disable_comment'
+              tabIndex={-1}
               type='button'
               className='self-start cc-label clr-text-url hover:underline'
               onClick={() => setForceComment(true)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
index 0fcd5070..1226af4b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
@@ -18,6 +18,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
 
   return (
     <motion.div
+      tabIndex={-1}
       className='text-sm border dense cc-scroll-y'
       initial={false}
       animate={isOpen ? 'open' : 'closed'}
@@ -29,6 +30,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
       {data?.errors.map((error, index) => {
         return (
           <p
+            tabIndex={-1}
             key={`error-${index}`}
             className={`clr-text-red ${disabled ? '' : 'cursor-pointer'}`}
             onClick={disabled ? undefined : () => onShowError(error)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
index 0458e1f9..5c48676b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
@@ -39,6 +39,7 @@ function StatusBar({ isModified, processing, constituenta, parseData, onAnalyze
 
   return (
     <div
+      tabIndex={-1}
       className={clsx(
         'w-[10rem] h-[1.75rem]',
         'px-2 flex items-center justify-center gap-2',
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
index 78548ea0..56cd797f 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
@@ -154,6 +154,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
       />
       <div className='flex justify-between whitespace-nowrap'>
         <Checkbox
+          tabIndex={-1}
           id='schema_common'
           label='Общедоступная схема'
           title='Общедоступные схемы видны всем пользователям и могут быть изменены'
@@ -162,6 +163,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
           setValue={value => setCommon(value)}
         />
         <Checkbox
+          tabIndex={-1}
           id='schema_immutable'
           label='Неизменная схема'
           title='Только администраторы могут присваивать схемам неизменный статус'
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index db41cb5d..a6ec9ff6 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -41,6 +41,7 @@ html {
 
 :root {
   font-size: 16px;
+  line-height: 24px;
   font-family: var(--font-main);
 
   color: var(--cl-fg-100);
@@ -57,6 +58,7 @@ html {
 @media only screen and (max-width: 639px) {
   :root {
     font-size: 12px;
+    line-height: 18px;
   }
 }
 
@@ -64,9 +66,10 @@ html {
   outline-width: 2px;
   outline-style: solid;
   outline-color: transparent;
-  .dark & {
-    outline-color: transparent;
-  }
+}
+
+:focus-visible {
+  outline: 0;
 }
 
 ::selection {
@@ -123,6 +126,10 @@ div:not(.dense) > p {
     @apply font-semibold;
   }
 
+  li {
+    list-style-position: inside;
+  }
+
   li::marker {
     content: '– ';
   }