M: Small layout fixes

This commit is contained in:
Ivan 2025-03-11 14:42:27 +03:00
parent 1643cd737c
commit c04ea8993e
5 changed files with 7 additions and 7 deletions

View File

@ -102,7 +102,7 @@ export function FormCreateItem() {
return ( return (
<form <form
className='cc-fade-in cc-column min-w-120 max-w-120 mx-auto px-6 py-3' className='cc-fade-in cc-column w-120 mx-auto px-6 py-3'
onSubmit={event => void handleSubmit(onSubmit)(event)} onSubmit={event => void handleSubmit(onSubmit)(event)}
onChange={resetErrors} onChange={resetErrors}
> >

View File

@ -53,7 +53,7 @@ export function LibraryPage() {
return ( return (
<> <>
<ToolbarSearch total={libraryItems.length} filtered={filtered.length} /> <ToolbarSearch className='sticky top-0 h-9' total={libraryItems.length} filtered={filtered.length} />
<div className='relative cc-fade-in flex'> <div className='relative cc-fade-in flex'>
<MiniButton <MiniButton
className='absolute z-tooltip top-1 right-0 cc-animate-position' className='absolute z-tooltip top-1 right-0 cc-animate-position'

View File

@ -60,7 +60,7 @@ export function TableLibraryItems({ items }: TableLibraryItemsProps) {
columns={columns} columns={columns}
data={items} data={items}
headPosition='0' headPosition='0'
className={clsx('text-xs sm:text-sm cc-scroll-y h-fit border-b', { 'border-l': folderMode })} className={clsx('cc-scroll-y h-fit text-xs sm:text-sm border-b', { 'border-l': folderMode })}
style={{ maxHeight: tableHeight }} style={{ maxHeight: tableHeight }}
noDataComponent={ noDataComponent={
<div className='cc-column dense p-3 items-center min-h-24'> <div className='cc-column dense p-3 items-center min-h-24'>

View File

@ -26,11 +26,12 @@ import { LocationHead } from '../../models/library';
import { useHasCustomFilter, useLibrarySearchStore } from '../../stores/librarySearch'; import { useHasCustomFilter, useLibrarySearchStore } from '../../stores/librarySearch';
interface ToolbarSearchProps { interface ToolbarSearchProps {
className?: string;
total: number; total: number;
filtered: number; filtered: number;
} }
export function ToolbarSearch({ total, filtered }: ToolbarSearchProps) { export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps) {
const headMenu = useDropdown(); const headMenu = useDropdown();
const userMenu = useDropdown(); const userMenu = useDropdown();
@ -75,7 +76,7 @@ export function ToolbarSearch({ total, filtered }: ToolbarSearchProps) {
} }
return ( return (
<div className='sticky top-0 h-9 flex gap-3 border-b text-sm clr-input items-center'> <div className={clsx('flex gap-3 border-b text-sm clr-input items-center', className)}>
<div className='ml-3 min-w-18 sm:min-w-30 select-none whitespace-nowrap'> <div className='ml-3 min-w-18 sm:min-w-30 select-none whitespace-nowrap'>
{filtered} из {total} {filtered} из {total}
</div> </div>

View File

@ -1,5 +1,4 @@
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import clsx from 'clsx';
import { useAuthSuspense } from '@/features/auth'; import { useAuthSuspense } from '@/features/auth';
import { HelpTopic } from '@/features/help'; import { HelpTopic } from '@/features/help';
@ -63,7 +62,7 @@ export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocati
return ( return (
<div <div
className={clsx('max-w-40 sm:max-w-60', 'flex flex-col', 'text:xs sm:text-sm', 'select-none')} className='max-w-40 sm:max-w-60 flex flex-col text:xs sm:text-sm select-none'
style={{ style={{
transitionProperty: 'width, min-width, opacity', transitionProperty: 'width, min-width, opacity',
transitionDuration: `${PARAMETER.moveDuration}ms`, transitionDuration: `${PARAMETER.moveDuration}ms`,