Firefox UI fixes

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'}

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()}>

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

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',

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(

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>
   );
 }

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>
     )
   );

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>
     )
   );

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,

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
           },

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}

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}

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)}

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)}

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)}

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',

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='Только администраторы могут присваивать схемам неизменный статус'

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: '– ';
   }