From e8d2c2e1429072fcc1173ee770f06b07e9ddda20 Mon Sep 17 00:00:00 2001
From: Ethan <ethanlanting@gmail.com>
Date: Tue, 1 Oct 2024 23:08:31 -0500
Subject: [PATCH] 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 <razboy20@gmail.com>
---
 src/views/components/common/ScheduleListItem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/components/common/ScheduleListItem.tsx b/src/views/components/common/ScheduleListItem.tsx
index 6e2ce754..aea0e41c 100644
--- a/src/views/components/common/ScheduleListItem.tsx
+++ b/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>