refactor(FE): Refactor RecordingTable layout for improved readability

src/app/production/recording/page.tsx

@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full p-3 overflow-x-hidden'>
+    <section className='w-full overflow-x-hidden'>
       <RecordingTable />
     </section>
   );

src/components/pages/production/recording/RecordingTable.tsx

@@ -1173,11 +1173,9 @@ const RecordingTable = () => {
   return (
     <>
       <div className='w-full'>
-        <div className='flex flex-col mb-4 -mx-4 px-4'>
-          {/* Action Buttons, Search and Filter Section */}
-          <div className='relative w-full p-3 pt-0 px-0 flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3 flex-wrap after:absolute after:bottom-0 after:left-0 after:right-0 after:-mx-4 after:border-b after:border-base-content/10'>
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
           {/* Action Buttons */}
-            <div className='w-full xl:w-fit flex flex-col sm:flex-row self-start gap-2'>
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
             <RequirePermission permissions='lti.production.recording.create'>
               <Button
                 href='/production/recording/add'
@@ -1191,49 +1189,51 @@ const RecordingTable = () => {
 
             {selectedRowIds.length > 0 && (
               <>
+                <hr className='w-px h-full border-none bg-base-content/10 sm:block hidden' />
+
                 <RequirePermission permissions='lti.production.recording.approve'>
                   <Button
                     variant='outline'
-                      color='success'
+                    color='none'
                     onClick={() => {
                       setApprovalNotes('');
-                        approveModal.openModal();
+                      rejectModal.openModal();
                     }}
                     disabled={
-                        selectedRowIds.length === 0 ||
-                        eligibleRowIds.length === 0
+                      selectedRowIds.length === 0 || eligibleRowIds.length === 0
                     }
-                      className='w-full sm:w-fit'
+                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
                   >
                     <Icon
-                        icon='material-symbols:check'
-                        width={24}
-                        height={24}
+                      icon='heroicons:x-mark'
+                      width={20}
+                      height={20}
+                      className='text-error'
                     />
-                      Approve
+                    Reject
                   </Button>
                 </RequirePermission>
 
                 <RequirePermission permissions='lti.production.recording.approve'>
                   <Button
                     variant='outline'
-                      color='error'
+                    color='none'
                     onClick={() => {
                       setApprovalNotes('');
-                        rejectModal.openModal();
+                      approveModal.openModal();
                     }}
                     disabled={
-                        selectedRowIds.length === 0 ||
-                        eligibleRowIds.length === 0
+                      selectedRowIds.length === 0 || eligibleRowIds.length === 0
                     }
-                      className='w-full sm:w-fit'
+                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
                   >
                     <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
+                      icon='heroicons:check'
+                      width={20}
+                      height={20}
+                      className='text-success'
                     />
-                      Reject
+                    Approve
                   </Button>
                 </RequirePermission>
               </>
@@ -1241,7 +1241,7 @@ const RecordingTable = () => {
           </div>
 
           {/* Search and Filter */}
-            <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap w-full xl:w-auto'>
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
             <DebouncedTextInput
               name='search'
               placeholder='Search'
@@ -1298,6 +1298,7 @@ const RecordingTable = () => {
         </div>
 
         {/* Table Section */}
+        <div className='flex flex-col mb-4 -mx-4 px-4'>
           {isLoading ? (
             <div className='w-full flex flex-row justify-center items-center p-4'>
               <span className='loading loading-spinner loading-xl' />
@@ -1335,7 +1336,7 @@ const RecordingTable = () => {
               rowSelection={rowSelection}
               setRowSelection={setRowSelection}
               className={{
-                containerClassName: cn('mt-3 mb-0', {
+                containerClassName: cn('p-3 mb-0', {
                   'w-full':
                     isResponseSuccess(recordings) &&
                     recordings?.data?.length === 0,