Small UI fixes for Safari

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'

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

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

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

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