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

* 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 <[email protected]>

src/views/components/common/ScheduleListItem.tsx

@@ -80,14 +80,14 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                 <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' />
                 </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
                         className='flex flex-grow items-center gap-1.5 overflow-x-hidden'
                         onClick={(...e) => !isEditing && onClick?.(...e)}
                     >
                         <div
                             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,
                                 }
@@ -97,7 +97,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                             <Text
                                 variant='p'
                                 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}
                                 onChange={e => setEditorValue(e.target.value)}
                                 onKeyDown={e => {
@@ -116,7 +116,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                             </Text>
                         )}
                     </div>
-                    <div>
+                    <div className='self-end'>
                         <XIcon className='invisible h-5 w-5 text-ut-red group-hover:visible' onClick={onDelete} />
                     </div>
                 </div>