DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: visual overflow bug when editing schedule name (#251)

Browse Source 
* fix: visual bug on radio and exit buttons when editing schedule name

* fix: add max width to text input

* fix: non-static sizing

* fix: non-static width with w-full

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>
This commit is contained in:
Ethan
2024-10-01 23:08:31 -05:00
committed by GitHub
parent 4c8f03ca47
commit e8d2c2e142
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/components/common/ScheduleListItem.tsx
View File

@@ -80,14 +80,14 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
<div className='h-full cursor-move focusable' {...dragHandleProps}> <div className='h-full cursor-move focusable' {...dragHandleProps}>
<DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' /> <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
</div> </div>
<div className='group flex flex-1 items-center overflow-x-hidden'> <div className='group relative flex flex-1 items-center overflow-x-hidden'>
<div <div
className='flex flex-grow items-center gap-1.5 overflow-x-hidden' className='flex flex-grow items-center gap-1.5 overflow-x-hidden'
onClick={(...e) => !isEditing && onClick?.(...e)} onClick={(...e) => !isEditing && onClick?.(...e)}
> >
<div <div
className={clsx( className={clsx(
'h-5.5 w-5.5 relative border-2px border-current rounded-full btn-transition group-active:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition tansform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)', 'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
{ {
'after:(scale-0! opacity-0 ease-in-out! duration-200!)': !isActive, 'after:(scale-0! opacity-0 ease-in-out! duration-200!)': !isActive,
} }
@@ -97,7 +97,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
<Text <Text
variant='p' variant='p'
as='input' as='input'
className='mr-1 flex-1 px-0.5 outline-blue-500 -ml-0.5' className='mr-1 w-full flex-1 px-0.5 outline-blue-500 -ml-0.5'
value={editorValue} value={editorValue}
onChange={e => setEditorValue(e.target.value)} onChange={e => setEditorValue(e.target.value)}
onKeyDown={e => { onKeyDown={e => {
@@ -116,7 +116,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
</Text> </Text>
)} )}
</div> </div>
<div> <div className='self-end'>
<XIcon className='invisible h-5 w-5 text-ut-red group-hover:visible' onClick={onDelete} /> <XIcon className='invisible h-5 w-5 text-ut-red group-hover:visible' onClick={onDelete} />
</div> </div>
</div> </div>