TableCell styling changes

i love `border`

compass/components/Table/Index.tsx

@@ -186,7 +186,7 @@ export const Table = () => {
               >
                 {row.getVisibleCells().map((cell, i) => (
                   <td key={cell.id}
-                    className={"p-2 [&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"}
+                    className={"[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>

compass/components/Table/PrimaryTableCell.tsx

@@ -12,9 +12,9 @@ export const PrimaryTableCell = ({ getValue, row, column, table }) => {
   };
 
   return (
-    <div className="font-semibold group flex flex-row items-center justify-between pr-2">
+    <div className="font-semibold group">
       <TableCell getValue={getValue} row={row} column={column} table={table} />
-      <span>
+      <span className="absolute right-1 top-1">
         <Drawer title={getValue()} editableContent={pageContent} onSave={handleDrawerContentChange}>{pageContent}</Drawer>
       </span>
     </div>

compass/components/Table/TableCell.tsx

@@ -12,6 +12,10 @@ export const TableCell = ({ getValue, row, column, table }) => {
   const onBlur = () => {
     table.options.meta?.updateData(row.index, column.id, value);
   };
+// focus:border focus:border-gray-200
+  const className = "w-full p-3 bg-inherit rounded-md outline-none border border-transparent relative "
+    + "focus:shadow-md focus:border-gray-200 focus:bg-white focus:z-20 focus:p-4 focus:-m-1 "
+    + "focus:w-[calc(100%+0.5rem)]";
 
-  return <input className="w-full py-2 bg-inherit" value={value} onChange={e => setValue(e.target.value)} onBlur={onBlur} />;
+  return <input className={className} value={value} onChange={e => setValue(e.target.value)} onBlur={onBlur} />;
 };