Small UI fixes for Safari

This commit is contained in:
IRBorisov 2024-05-29 22:40:23 +03:00
parent 49179dd806
commit 26991f460c
5 changed files with 17 additions and 7 deletions

View File

@ -23,7 +23,7 @@ function ApplicationLayout() {
<div <div
id={globals.main_scroll} id={globals.main_scroll}
className='cc-scroll-y min-w-fit' className='overflow-x-auto cc-scroll-y min-w-fit'
style={{ style={{
maxHeight: viewportHeight, maxHeight: viewportHeight,
overflowY: showScroll ? 'scroll' : 'auto' overflowY: showScroll ? 'scroll' : 'auto'

View File

@ -10,7 +10,7 @@ function Logo() {
return ( return (
<img <img
alt='' 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'} src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
/> />
); );

View File

@ -37,14 +37,14 @@ function Navigation() {
<motion.div <motion.div
className={clsx( className={clsx(
'pl-2 pr-[0.9rem] h-[3rem] w-full', // prettier: split lines 'pl-2 pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
'flex justify-between', 'flex',
'cc-shadow-border' 'cc-shadow-border'
)} )}
initial={false} initial={false}
animate={!noNavigationAnimation ? 'open' : 'closed'} animate={!noNavigationAnimation ? 'open' : 'closed'}
variants={animateNavigation} 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 /> <Logo />
</div> </div>
<div className='flex'> <div className='flex'>

View File

@ -67,6 +67,15 @@ function SelectTree<ItemType>({
[onFoldItem] [onFoldItem]
); );
const handleSetValue = useCallback(
(event: CProps.EventMouse, target: ItemType) => {
event.preventDefault();
event.stopPropagation();
setValue(target);
},
[setValue]
);
return ( return (
<div {...restProps}> <div {...restProps}>
<AnimatePresence initial={false}> <AnimatePresence initial={false}>
@ -84,7 +93,7 @@ function SelectTree<ItemType>({
)} )}
data-tooltip-id={globals.tooltip} data-tooltip-id={globals.tooltip}
data-tooltip-content={getDescription(item)} data-tooltip-content={getDescription(item)}
onClick={() => setValue(item)} onClick={event => handleSetValue(event, item)}
initial={{ ...animateSideAppear.initial }} initial={{ ...animateSideAppear.initial }}
animate={{ ...animateSideAppear.animate }} animate={{ ...animateSideAppear.animate }}
exit={{ ...animateSideAppear.exit }} exit={{ ...animateSideAppear.exit }}

View File

@ -24,14 +24,15 @@ function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) {
getDescription={describeHelpTopic} getDescription={describeHelpTopic}
className={clsx( className={clsx(
'sticky top-0 left-0', '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', 'self-start',
'border divide-y rounded-none', 'border divide-y rounded-none',
'clr-controls', 'clr-controls',
'text-xs sm:text-sm', 'text-xs sm:text-sm',
'select-none' 'select-none'
)} )}
style={{ maxHeight: calculateHeight('2.25rem + 2px') }} style={{ maxHeight: calculateHeight('1rem + 2px') }}
/> />
); );
} }