M: Small UI layout fixes

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -23,7 +23,7 @@ function ApplicationLayout() {
 
         <div
           id={globals.main_scroll}
-          className='flex flex-col items-start overflow-x-auto max-w-[100vw]'
+          className='overflow-x-auto max-w-[100vw]'
           style={{
             maxHeight: viewportHeight
           }}

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

@@ -74,7 +74,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         spellCheck
         label='Термин'
         placeholder='Обозначение, используемое в текстовых определениях'
-        rows={2}
+        className='cc-fit-content max-h-[3.6rem]'
         value={state.term_raw}
         onChange={event => partialUpdate({ term_raw: event.target.value })}
       />
@@ -104,7 +104,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           spellCheck
           label='Текстовое определение'
           placeholder='Текстовая интерпретация формального выражения'
-          rows={2}
+          className='cc-fit-content max-h-[3.6rem]'
           value={state.definition_raw}
           onChange={event => partialUpdate({ definition_raw: event.target.value })}
         />
@@ -128,7 +128,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           spellCheck
           label={isBasic ? 'Конвенция' : 'Комментарий'}
           placeholder={isBasic ? 'Договоренность об интерпретации' : 'Пояснение разработчика'}
-          rows={2}
+          className='cc-fit-content max-h-[5.4rem]'
           value={state.convention}
           onChange={event => partialUpdate({ convention: event.target.value })}
         />

rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx

@@ -184,8 +184,8 @@ function FormCreateItem() {
         onChange={event => setComment(event.target.value)}
       />
 
-      <div className='flex justify-between gap-3'>
+      <div className='flex justify-between gap-3 flex-grow'>
-        <div className='flex flex-col gap-2 w-[7rem] h-min'>
+        <div className='flex flex-col gap-2 min-w-[7rem] h-min'>
           <Label text='Корень' />
           <SelectLocationHead
             value={head}
@@ -197,7 +197,6 @@ function FormCreateItem() {
         <TextArea
           id='dlg_cst_body'
           label='Путь'
-          className='w-[18rem]'
           rows={4}
           value={body}
           onChange={event => setBody(event.target.value)}

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

@@ -20,11 +20,6 @@ import { information, labelCstTypification } from '@/utils/labels';
 import EditorRSExpression from '../EditorRSExpression';
 import ControlsOverlay from './ControlsOverlay';
 
-/**
- * Characters limit to start increasing number of rows.
- */
-export const ROW_SIZE_IN_CHARACTERS = 70;
-
 interface FormConstituentaProps {
   disabled: boolean;
 
@@ -166,7 +161,7 @@ function FormConstituenta({
         {state ? (
           <TextArea
             id='cst_typification'
-            rows={typification.length > ROW_SIZE_IN_CHARACTERS ? 2 : 1}
+            className='cc-fit-content'
             dense
             noResize
             noBorder
@@ -220,12 +215,12 @@ function FormConstituenta({
           <AnimateFade key='cst_convention_fade' hideContent={!showConvention || !state}>
             <TextArea
               id='cst_convention'
+              className='cc-fit-content max-h-[8rem]'
               spellCheck
               label={isBasic ? 'Конвенция' : 'Комментарий'}
               placeholder={isBasic ? 'Договоренность об интерпретации' : 'Пояснение разработчика'}
               value={convention}
               disabled={disabled || (isBasic && state?.is_inherited)}
-              rows={convention.length > 2 * ROW_SIZE_IN_CHARACTERS || convention.includes('\n') ? 4 : 2}
               onChange={event => setConvention(event.target.value)}
             />
           </AnimateFade>

rsconcept/frontend/src/styling/styles.css

@@ -226,6 +226,10 @@
     @apply flex gap-1;
   }
 
+  .cc-fit-content {
+    field-sizing: content;
+  }
+
   .cc-scroll-row {
     scroll-snap-align: start;
     scroll-snap-stop: always;