User inventory select/edit + user groups select popup modal added functionality to close modal by clicking behind modal

Author: KushPatel-18

client/src/components/ui/popups/user_groups_select_popup.tsx

@@ -18,7 +18,8 @@ function UserGroupsSelectPopup({ isOpen, item, onClose }: ItemModalProps) {
   if (!isOpen || !item) return null;
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
+      <div className="absolute inset-0" onClick={onClose} />
+      <div className="absolute w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
         <div className="flex gap-4">
           {/* Header */}
           {/* Avatar */}

client/src/components/ui/popups/user_inventory_edit_popup.tsx

@@ -20,7 +20,8 @@ function UserInventoryEditPopup({ isOpen, item, onClose }: ItemModalProps) {
   if (!isOpen || !item) return null;
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
+      <div className="absolute inset-0" onClick={onClose} />
+      <div className="absolute w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
         <div className="flex gap-4">
           {/* Avatar */}
           <div className="relative flex justify-between">

client/src/components/ui/popups/user_inventory_select_popup.tsx

@@ -26,7 +26,8 @@ function UserInventorySelectPopup({
   if (!isOpen || !item) return null;
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
+      <div className="absolute inset-0" onClick={onClose} />
+      <div className="absolute w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
         <div className="flex gap-4">
           {/* Header */}
           {/* Avatar */}