From 26991f460ca0f5ffead41aca93fd324aebde9e6f Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 29 May 2024 22:40:23 +0300
Subject: [PATCH] Small UI fixes for Safari

---
 rsconcept/frontend/src/app/ApplicationLayout.tsx      |  2 +-
 rsconcept/frontend/src/app/Navigation/Logo.tsx        |  2 +-
 rsconcept/frontend/src/app/Navigation/Navigation.tsx  |  4 ++--
 rsconcept/frontend/src/components/ui/SelectTree.tsx   | 11 ++++++++++-
 .../frontend/src/pages/ManualsPage/TopicsStatic.tsx   |  5 +++--
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index 4d6eee2a..f3b15914 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='cc-scroll-y min-w-fit'
+          className='overflow-x-auto cc-scroll-y min-w-fit'
           style={{
             maxHeight: viewportHeight,
             overflowY: showScroll ? 'scroll' : 'auto'
diff --git a/rsconcept/frontend/src/app/Navigation/Logo.tsx b/rsconcept/frontend/src/app/Navigation/Logo.tsx
index 48ec90ba..a4d16662 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] w-fit')}
+      className={clsx('max-h-[1.6rem] w-fit max-w-[11.4rem]')}
       src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
     />
   );
diff --git a/rsconcept/frontend/src/app/Navigation/Navigation.tsx b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
index a8c5cd9a..e7f82256 100644
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
@@ -37,14 +37,14 @@ function Navigation() {
       <motion.div
         className={clsx(
           'pl-2 pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
-          'flex justify-between',
+          'flex',
           'cc-shadow-border'
         )}
         initial={false}
         animate={!noNavigationAnimation ? 'open' : 'closed'}
         variants={animateNavigation}
       >
-        <div tabIndex={-1} className='flex items-center mr-2 cursor-pointer' onClick={navigateHome}>
+        <div tabIndex={-1} className='flex items-center mr-auto cursor-pointer' onClick={navigateHome}>
           <Logo />
         </div>
         <div className='flex'>
diff --git a/rsconcept/frontend/src/components/ui/SelectTree.tsx b/rsconcept/frontend/src/components/ui/SelectTree.tsx
index 0bc0a810..0ae42afa 100644
--- a/rsconcept/frontend/src/components/ui/SelectTree.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectTree.tsx
@@ -67,6 +67,15 @@ function SelectTree<ItemType>({
     [onFoldItem]
   );
 
+  const handleSetValue = useCallback(
+    (event: CProps.EventMouse, target: ItemType) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setValue(target);
+    },
+    [setValue]
+  );
+
   return (
     <div {...restProps}>
       <AnimatePresence initial={false}>
@@ -84,7 +93,7 @@ function SelectTree<ItemType>({
               )}
               data-tooltip-id={globals.tooltip}
               data-tooltip-content={getDescription(item)}
-              onClick={() => setValue(item)}
+              onClick={event => handleSetValue(event, item)}
               initial={{ ...animateSideAppear.initial }}
               animate={{ ...animateSideAppear.animate }}
               exit={{ ...animateSideAppear.exit }}
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
index 58f94d6c..0ca8dc54 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
@@ -24,14 +24,15 @@ function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) {
       getDescription={describeHelpTopic}
       className={clsx(
         'sticky top-0 left-0',
-        'w-[14.5rem] cc-scroll-y',
+        'min-w-[14.5rem] max-w-[14.5rem] sm:min-w-[12.5rem] sm:max-w-[12.5rem] md:min-w-[14.5rem] md:max-w-[14.5rem]',
+        'cc-scroll-y',
         'self-start',
         'border divide-y rounded-none',
         'clr-controls',
         'text-xs sm:text-sm',
         'select-none'
       )}
-      style={{ maxHeight: calculateHeight('2.25rem + 2px') }}
+      style={{ maxHeight: calculateHeight('1rem + 2px') }}
     />
   );
 }