fix(frontend): users policies page responsiveness

Author: lg-epitech

frontend/app/components/dashboard/user-card.tsx

@@ -63,14 +63,14 @@ export function UserCard({
       )}
     >
       <CardHeader className="pb-3">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+          <div className="min-w-0">
             <CardTitle className="text-lg font-semibold">{user.user}</CardTitle>
             <p className="text-xs text-muted-foreground mt-1">
               Created {formatDateOnly(user.created_at, timeZone)}
             </p>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 flex-shrink-0 flex-wrap">
             <PolicyGate requiredPolicies={Policy.USERS_UPDATE_POLICIES}>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>

frontend/app/components/dashboard/users-policies-page.tsx

@@ -52,9 +52,8 @@ export default function UsersPoliciesPage() {
     <PolicyGate requiredPolicies={Policy.USERS_GET}>
       <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
         <div className="flex h-full overflow-hidden">
-          {/* Left Panel - Policies */}
           <div
-            className="border-r border-border bg-sidebar/30 flex flex-col overflow-hidden"
+            className="hidden md:flex border-r border-border bg-sidebar/30 flex-col overflow-hidden"
             style={{ width: `${leftPanelWidth}%` }}
           >
             <div className="p-6 border-b border-border flex-shrink-0">
@@ -102,9 +101,8 @@ export default function UsersPoliciesPage() {
             </div>
           </div>
 
-          {/* Resizer */}
           <div
-            className="w-2 bg-border hover:bg-primary cursor-col-resize transition-colors flex-shrink-0 relative group"
+            className="hidden md:block w-2 bg-border hover:bg-primary cursor-col-resize transition-colors flex-shrink-0 relative group"
             onMouseDown={(e) => handleResizeStart(e.clientX)}
           >
             <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-transparent group-hover:bg-primary/50 transition-colors" />