From 65f4aafc68b0a59f9038470e9a9f30078b072e40 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 29 Sep 2025 22:04:52 +0100
Subject: [PATCH] add template layout fix

---
 src/components/products/AddTemplate.jsx | 54 ++++++++++++-------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/products/AddTemplate.jsx b/src/components/products/AddTemplate.jsx
index 9bd8b70..7f874fc 100644
--- a/src/components/products/AddTemplate.jsx
+++ b/src/components/products/AddTemplate.jsx
@@ -52,37 +52,35 @@ export default function AddTemplate() {
             <Form>
                 <div
                     className='flex flex-col w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
-                    <div className='w-full flex flex-col gap-6'>
-                        <div className='grid grid-cols-1 xs:grid-cols-2 gap-3'>
-                            <div className='relative text-input flex flex-col gap-2'>
-                                <label className='absolute left-0 -top-5 text-base flex items-center'>
-                                    Custom ID <span className='text-red-500 text-10'>{(props.errors.custom_id && props.touched.custom_id) ? props.errors.custom_id : ''}</span>
-                                </label>
-                                <InputText
-                                    id='custom_id'
-                                    placeholder='Custon ID'
-                                    name='custom_id'
-                                    value={props.values.custom_id}
-                                    handleChange={props.handleChange}
-                                />
-                            </div>
-                            <div className='relative text-input flex flex-col gap-2'>
-                                <label className='absolute left-0 -top-5 text-base flex items-center'>
-                                    Provision Name <span className='text-red-500 text-10'>{(props.errors.provision_name && props.touched.provision_name) ? props.errors.provision_name : ''}</span>
-                                </label>
-                                <InputText
-                                    id='provision_name'
-                                    placeholder='Provision Name'
-                                    name='provision_name'
-                                    value={props.values.provision_name}
-                                    handleChange={props.handleChange}
-                                />
-                            </div>
+                    <div className='w-full flex flex-col gap-4'>
+                        <div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
+                            <label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.custom_id && props.touched.custom_id) && 'text-red-500'}`}>
+                                Custom ID
+                            </label>
+                            <InputText
+                                id='custom_id'
+                                placeholder='Custom ID'
+                                name='custom_id'
+                                value={props.values.custom_id}
+                                handleChange={props.handleChange}
+                            />
+                        </div>
+                        <div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
+                            <label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.provision_name && props.touched.provision_name) && 'text-red-500'}`}>
+                                Provision Name
+                            </label>
+                            <InputText
+                                id='provision_name'
+                                placeholder='Provision Name'
+                                name='provision_name'
+                                value={props.values.provision_name}
+                                handleChange={props.handleChange}
+                            />
                         </div>
 
-                        <div className='h-10 my-5'>
+                        <div className='h-10 my-5 text-end'>
                             <button type='submit' disabled={customTemplate.isPending}
-                                    className='w-full h-full bg-primary text-white font-bold rounded-md'>{customTemplate.isPending ? 'loading...' : 'Add'}</button>
+                                    className='px-4 h-full bg-primary text-white font-bold rounded-md'>{customTemplate.isPending ? 'loading...' : 'Add'}</button>
                         </div>
 
                         {customTemplate.error &&
-- 
2.34.1