From c8979668864441feeccd01ebdb4be4a3ed22df4a Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 24 Aug 2024 11:21:02 +0300
Subject: [PATCH] M: Small UI layout fixes

---
 rsconcept/frontend/src/app/ApplicationLayout.tsx         | 2 +-
 .../frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx  | 6 +++---
 .../frontend/src/pages/CreateItemPage/FormCreateItem.tsx | 5 ++---
 .../RSFormPage/EditorConstituenta/FormConstituenta.tsx   | 9 ++-------
 rsconcept/frontend/src/styling/styles.css                | 4 ++++
 5 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index 5f7417ee..eb40d64b 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/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
           }}
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
index 75d8e208..139d680b 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
+++ b/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 })}
         />
diff --git a/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx b/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx
index 170c01a2..aa7da132 100644
--- a/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx
+++ b/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 flex-col gap-2 w-[7rem] h-min'>
+      <div className='flex justify-between gap-3 flex-grow'>
+        <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)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index 3821b570..3673e065 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/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>
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index 198b365a..dcdc3760 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/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;