From af25c0eef9aee66572dc1c529dc8ce5de4404173 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 14 Oct 2023 21:17:21 +0300
Subject: [PATCH] UI fixes for small screens

---
 rsconcept/frontend/src/App.tsx                           | 2 +-
 .../src/components/Navigation/NavigationButton.tsx       | 2 +-
 rsconcept/frontend/src/index.css                         | 7 +++++++
 .../frontend/src/pages/RSFormPage/EditorConstituenta.tsx | 6 +++---
 .../frontend/src/pages/RSFormPage/EditorTermGraph.tsx    | 9 +++++----
 rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx       | 6 +++---
 .../pages/RSFormPage/elements/ViewSideConstituents.tsx   | 4 ++--
 .../src/pages/UserProfilePage/EditorPassword.tsx         | 2 +-
 8 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx
index 433a87d3..ab8f7ff2 100644
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@@ -38,7 +38,7 @@ function Root() {
           overflowY: showScroll ? 'scroll': 'auto'
         }}
       >
-        <main className='w-full h-full' style={{minHeight: mainHeight}}>
+        <main className='w-full h-full min-w-fit' style={{minHeight: mainHeight}}>
           <Outlet />
         </main>
       {!noNavigation && !noFooter && <Footer />}
diff --git a/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx b/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
index 9e52c6ac..ae7a8651 100644
--- a/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
+++ b/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
@@ -13,7 +13,7 @@ function NavigationButton({ id, icon, description, onClick, text }: NavigationBu
       type='button'
       onClick={onClick}
       tabIndex={-1}
-      className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 min-w-fit small-caps whitespace-nowrap clr-btn-nav`}
+      className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 small-caps whitespace-nowrap clr-btn-nav`}
     >
       {icon && <span>{icon}</span>}
       {text && <span className='font-semibold'>{text}</span>}
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index aac11cf5..0a8466d1 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -106,6 +106,13 @@
   }
 }
 
+::selection {
+  background: var(--cl-prim-bg-60);
+  .dark & {
+    background: var(--cd-prim-bg-60);
+  }
+}
+
 [data-color-scheme="dark"] {
   color-scheme: dark;
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 905dd30c..e85760ce 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -136,8 +136,8 @@ function EditorConstituenta({
   }
 
   return (
-  <div className='flex w-full max-w-[1500px] gap-2 justify-stretch'>
-    <form onSubmit={handleSubmit} className='min-w-[50rem] max-w-min px-4 py-2'>
+  <div className='flex max-w-[1500px] gap-2'>
+    <form onSubmit={handleSubmit} className='min-w-[50rem] max-w-[50rem] px-4 py-2'>
       <div className='relative w-full'>
       <div className='absolute top-0 right-0 flex items-start justify-between w-full'>
         {activeCst && 
@@ -162,7 +162,7 @@ function EditorConstituenta({
             icon={<PenIcon size={4} color={isEnabled ? 'text-primary' : ''} />}
           />
         </div>
-        <div className='flex justify-end min-w-fit'>
+        <div className='flex justify-end'>
           <MiniButton
             tooltip='Сохранить изменения'
             disabled={!isModified || !isEnabled}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index 78cbfdd1..cbc64444 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -367,7 +367,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       initial={getOptions()}
       onConfirm={handleChangeOptions}
     />}
-    <div className='flex flex-col border min-w-[13.5rem] max-w-[13.5rem] px-2 pb-2 text-sm select-none h-fit'>
+    <div className='flex flex-col border min-w-[13.5rem] max-w-[13.5rem] px-2 pb-2 mt-4 text-sm select-none h-fit'>
       {hoverCst && 
       <div className='relative'>
         <InfoConstituenta
@@ -440,8 +440,9 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       />
       </div>
 
-      <Divider margins='mt-3 mb-2' />
+      {dismissed.length > 0 && <Divider margins='mt-3 mb-2' />}
 
+      {dismissed.length > 0 &&
       <div className='flex flex-col overflow-y-auto'>
         <p className='text-center'><b>Скрытые конституенты</b></p>
         <div className='flex flex-wrap justify-center gap-2 py-2'>
@@ -469,14 +470,14 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
           </>);
         })}
         </div>
-      </div>
+      </div>}
     </div>
     <div className='w-full h-full overflow-auto'>
     <div 
       className='relative'
       style={{width: canvasWidth, height: canvasHeight}}
     >
-      <div className='relative top-0 right-0 flex mt-1 ml-2 z-pop flex-start'>
+      <div className='relative top-4 right-0 flex mt-1 ml-2 z-pop flex-start'>
         <div className='px-1 py-1' id='items-graph-help' >
           <HelpIcon color='text-primary' size={5} />
         </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 9a8ea61a..03285cd6 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -372,7 +372,7 @@ function RSTabs() {
       onSelect={onSelectTab}
       defaultFocus={true}
       selectedTabClassName='clr-selected'
-      className='flex flex-col items-center w-full'
+      className='flex flex-col w-full items-center'
     >
       <TabList className='flex items-start border-b-2 border-x-2 select-none justify-stretch w-fit clr-controls h-[1.9rem] small-caps font-semibold'>
         <RSTabsMenu 
@@ -406,7 +406,7 @@ function RSTabs() {
           {schema.stats && <RSFormStats stats={schema.stats}/>}
         </TabPanel>
 
-        <TabPanel className='w-full'>
+        <TabPanel>
           <EditorItems
             onOpenEdit={onOpenCst}
             onCreateCst={promptCreateCst}
@@ -414,7 +414,7 @@ function RSTabs() {
           />
         </TabPanel>
 
-        <TabPanel className='flex justify-center w-full'>
+        <TabPanel>
           <EditorConstituenta
             isModified={isModified}
             setIsModified={setIsModified}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
index edc1680b..0fd353a3 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
@@ -206,8 +206,8 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
   () => {
     const siblingHeight = `${baseHeight} - ${LOCAL_NAVIGATION_H}`
     return (noNavigation ? 
-      `calc(min(100vh - 7.2rem, ${siblingHeight}))`
-    : `calc(min(100vh - 10.7rem, ${siblingHeight}))`);
+      `calc(min(100vh - 8.2rem, ${siblingHeight}))`
+    : `calc(min(100vh - 11.7rem, ${siblingHeight}))`);
   }, [noNavigation, baseHeight]);
 
   return (<>
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
index b8d9c721..1999b128 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
@@ -61,7 +61,7 @@ function EditorPassword() {
 
   return (
     <div className='flex py-2 border-l-2 max-w-[14rem]'>
-      <form onSubmit={handleSubmit} className='flex flex-col justify-between px-6 min-w-fit'>
+      <form onSubmit={handleSubmit} className='flex flex-col justify-between px-6'>
         <div className='flex flex-col gap-3'>
           <TextInput id='old_password'
             type='password'