Refactored projects page, fixed security user modal

PostFundManagement.ConsoleUI/src/components/projects/ProjectExpandedRow.tsx

@@ -94,7 +94,7 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
     <div className="p-5 sm:p-6 bg-[#090d16]/95 border-t border-b border-blue-500/20 space-y-6 animate-in fade-in duration-200">
       {/* Project Meta Bar */}
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 rounded-2xl bg-[#0d121f] border border-slate-800">
-        <div className="space-y-1 max-w-3xl">
+        <div className="space-y-1 min-w-0 flex-1">
           <div className="flex items-center gap-2 flex-wrap">
             <span className="text-[10px] font-mono uppercase tracking-wider text-blue-400 bg-blue-500/10 px-2.5 py-0.5 rounded-md border border-blue-500/30">
               Project #{project.id} Summary
@@ -145,7 +145,7 @@ export const ProjectExpandedRow: React.FC<ProjectExpandedRowProps> = ({
       />
 
       {/* 4 Vital Resource Summary Cards Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
         {/* Card 1: Milestones */}
         <div className="bg-[#0d121f] rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3">
           <div className="space-y-2.5">