feat: add responsive icon class for better image scaling in admin pages

src/app/admin/admins/page.tsx

@@ -193,7 +193,7 @@ export default function Admins() {
                     width={24}
                     height={24}
                     src={icons.editIcon}
-                    className="cursor-pointer"
+                    className="cursor-pointer responsive-icon"
                   />
                 </div>
               }
@@ -258,7 +258,7 @@ export default function Admins() {
                   <Image
                     alt="Supprimer"
                     src={icons.trash}
-                    className="cursor-pointer"
+                    className="cursor-pointer responsive-icon"
                   />
                 </div>
               }

src/app/admin/home/page.tsx

@@ -17,6 +17,7 @@ export default function HomePage () {
   const {data: session, status} = useSession()
   const queryClient = useQueryClient()
   const [open, setOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   console.log("Session = ", session)
 
@@ -128,43 +129,55 @@ export default function HomePage () {
   },
   {
     id: "delete",
-    cell: ({ cell }) => {
-        const id = String(cell.row.original.id)
+    cell: ({ row }) => {
+      const id = String(row.original.id);
       return (
-          <div className="relative p-2 cursor-pointer"
-            // onClick={() => { mutate(id) }}
-          >
+        <div className="relative p-2 cursor-pointer">
           <Modal
-              open={open}
+            open={selectedId === id}
             onOpenChange={(isOpen) => {
               if (!isOpen) {
-                  setOpen(isOpen)
+                setSelectedId(null);
               }
             }}
             trigger={
-                <div onClick={() => setOpen(true)}>
-                  <Image alt="" src={icons.trash} className="absolute right-2 top-[-50%] transform translate-middle-y hover:text-blue-500" />
+              <div
+                onClick={() => {
+                  setSelectedId(id);
+                }}
+              >
+                <Image
+                  alt=""
+                  src={icons.trash}
+                  className="cursor-pointer responsive-icon"
+                />
               </div>
             }
             title={
-                <p className="font-bold text-3xl">Supprimer une organisation</p>
+              <p className="font-bold text-3xl">
+                Supprimer cette organisation
+              </p>
             }
             content={
               <div>
-                  <p className="text-center">Voulez-vous vraiment supprimer cette organisation ?</p>
+                <p className="text-center">
+                  Voulez-vous vraiment supprimer cette organisation ?
+                </p>
 
                 <div className="grid grid-cols-2 gap-3 mt-3">
                   <button
                     className="bg-blue-100 text-blue-600 py-2 px-4 text-lg rounded-full text-center hover:bg-blue-200"
-                      onClick={() => { setOpen(false) }}
+                    onClick={() => {
+                      setSelectedId(null);
+                    }}
                   >
                     Annuler
                   </button>
                   <button
                     className="bg-red-500 text-white py-2 px-4 text-lg rounded-full text-center hover:bg-red-600"
                     onClick={() => {
-                        mutate(id)
-                        setOpen(false) 
+                      mutate(id);
+                      setSelectedId(null);
                     }}
                   >
                     Supprimer
@@ -174,9 +187,9 @@ export default function HomePage () {
             }
           />
         </div>
-        )
-    }
-  }
+      );
+    },
+  },
 ]
 
   return(

src/app/admin/organizations/page.tsx

@@ -239,7 +239,7 @@ export default function Organizations() {
                       <Image
                         alt="Supprimer"
                         src={icons.trash}
-                        className="cursor-pointer"
+                        className="cursor-pointer responsive-icon"
                       />
                     </div>
                   }

src/app/globals.css

@@ -89,3 +89,25 @@ body {
   width: 100%;
   padding: 8px;
 }
+
+.responsive-icon {
+  min-width: 16px;
+  min-height: 16px;
+  width: 24px;
+  height: 24px;
+  transition: width 0.2s, height 0.2s;
+}
+
+@media (max-width: 768px) {
+  .responsive-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .responsive-icon {
+    width: 16px;
+    height: 16px;
+  }
+}

src/components/table/table.tsx

@@ -99,10 +99,11 @@ export default function Table<TData, TValue>({
     }
 
     return(
-        <div>
+        <div className="w-full">
             {render()}
 
             <div className="rounded-lg border border-gray-200 w-auto">
+                <div className="overflow-x-auto">
                     <table className="w-full overflow-x-auto rounded-lg">
                         <thead className="h-10">
                             {table.getHeaderGroups().map((headerGroup) => (
@@ -172,6 +173,7 @@ export default function Table<TData, TValue>({
                         </tbody>
                     </table>
                 </div>
+            </div>
 
             <div className="flex items-center justify-end space-x-2 py-4">
             <button