fix(frontend): 🐛 fixed save/button for both terminals and devices

changed the way the components width param was being set to ensure constant dynamic width
vhs · Nov 24, 2024 · a594461 · a594461
1 parent 944ce82
commit a594461
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 40 deletions.
diff --git a/...d/src/components/Pages/DevicesPage/Devices/Device/DeviceDescription/DeviceDescription.tsx b/...d/src/components/Pages/DevicesPage/Devices/Device/DeviceDescription/DeviceDescription.tsx
@@ -13,22 +13,24 @@ const DeviceDescriptionForm: FC<DeviceDescriptionProps> = (props) => {
 
     return (
         <>
-            <div className='font-teko flex'>
+            <div className='font-teko flex justify-between'>
                 <label className='text-card-text-primary mr-16 text-xl font-semibold' htmlFor={props.id}>
                     Description:
                 </label>
-                <input
-                    className='h-7 flex-1 truncate rounded-l-md text-center text-lg'
-                    type='text'
-                    id={props.id}
-                    disabled={!isEdit}
-                />
-                <button
-                    className='text-card-text-secondary bg-card-edit right-0 h-7 rounded-r-md px-2 text-center text-lg'
-                    onClick={handleClick}
-                >
-                    {isEdit ? 'Save' : 'Edit'}
-                </button>
+                <div className='flex w-1/2 max-w-[50%]'>
+                    <input
+                        className='h-7 w-full truncate rounded-l-md text-center text-lg'
+                        type='text'
+                        id={props.id}
+                        disabled={!isEdit}
+                    />
+                    <button
+                        className='text-card-text-secondary bg-card-edit h-7 flex-shrink-0 rounded-r-md px-2 text-lg'
+                        onClick={handleClick}
+                    >
+                        {isEdit ? 'Save' : 'Edit'}
+                    </button>
+                </div>
             </div>
         </>
     )

diff --git a/...ages/frontend/src/components/Pages/DevicesPage/Devices/Device/DeviceRoles/DeviceRoles.tsx b/...ages/frontend/src/components/Pages/DevicesPage/Devices/Device/DeviceRoles/DeviceRoles.tsx
@@ -18,10 +18,10 @@ const DeviceRoles: FC<DeviceRolesProps> = (props) => {
     ]
 
     return (
-        <div className='font-teko mt-4 flex'>
-            <span className='text-card-text-primary mr-16 text-xl font-semibold'>Roles:</span>
+        <div className='font-teko mt-4 flex w-full justify-between'>
+            <span className='text-card-text-primary text-xl font-semibold'>Roles:</span>
             <select
-                className='flex-1 rounded-md text-lg'
+                className='w-full max-w-[50%] rounded-md text-center text-lg'
                 value={props.selectedRole}
                 title='Roles'
                 name={props.id}

diff --git a/...end/src/components/Pages/TerminalsPage/Terminals/Terminal/TerminalField/TerminalField.tsx b/...end/src/components/Pages/TerminalsPage/Terminals/Terminal/TerminalField/TerminalField.tsx
@@ -18,28 +18,25 @@ const TerminalField: FC<TerminalFieldProps> = ({ label, id, type, windowWidth })
     }
 
     return (
-        <>
-            <div className='font-teko mt-4 flex justify-between' style={{ width: '100%' }}>
-                <label className='text-card-text-primary text-xl font-semibold' htmlFor={id}>
-                    {label}:
-                </label>
-                <div className={`inline-block flex justify-end`} style={{ maxWidth: '50%', width: '50%' }}>
-                    <input
-                        className={`h-7 flex-1 truncate rounded-l-md text-center text-lg`}
-                        style={{ maxWidth: '100%' }}
-                        type={type}
-                        id={id}
-                        disabled={!isEdit}
-                    />
-                    <button
-                        className='text-card-text-secondary bg-card-edit h-7 rounded-r-md px-2 text-lg'
-                        onClick={handleClick}
-                    >
-                        {isEdit ? 'Save' : 'Edit'}
-                    </button>
-                </div>
+        <div className='font-teko mt-4 flex w-full justify-between'>
+            <label className='text-card-text-primary text-xl font-semibold' htmlFor={id}>
+                {label}:
+            </label>
+            <div className='flex w-1/2 max-w-[50%]'>
+                <input
+                    className='h-7 w-full truncate rounded-l-md text-center text-lg'
+                    type={type}
+                    id={id}
+                    disabled={!isEdit}
+                />
+                <button
+                    className='text-card-text-secondary bg-card-edit h-7 flex-shrink-0 rounded-r-md px-2 text-lg'
+                    onClick={handleClick}
+                >
+                    {isEdit ? 'Save' : 'Edit'}
+                </button>
             </div>
-        </>
+        </div>
     )
 }
 

diff --git a/...src/components/Pages/TerminalsPage/Terminals/Terminal/TerminalTargets/TerminalTargets.tsx b/...src/components/Pages/TerminalsPage/Terminals/Terminal/TerminalTargets/TerminalTargets.tsx
@@ -18,10 +18,10 @@ const TerminalTargets: FC<TerminalTargetsProps> = (props) => {
     ]
 
     return (
-        <div className='font-teko mt-4 flex'>
-            <span className='text-card-text-primary mr-16 text-xl font-semibold'>Target:</span>
+        <div className='font-teko mt-4 flex w-full justify-between'>
+            <span className='text-card-text-primary text-xl font-semibold'>Target:</span>
             <select
-                className='flex-1 rounded-md text-center text-lg'
+                className='w-full max-w-[50%] rounded-md text-center text-lg'
                 value={props.selectedRole}
                 title='Roles'
                 name={props.id}