fix: organization settings page responsive on mobile.

src/components/wrappers/dashboard/agent/agent-database-card.tsx

@@ -10,9 +10,9 @@ export type agentDatabaseCardProps = {
 export const AgentDatabaseCard = (props: agentDatabaseCardProps) => {
     const {data: database} = props;
 
-    return <DatabaseCard data={database}/>;
+    return <DatabaseCard withDetails={false} data={database}/>;
 
-    //todo: à remettre quand on aura fait l'impersonation des admins
+    //Todo: Add again when impersonation system will be implemented
    /* if (!database.projectId) {
          return <DatabaseCard data={database}/>;
     }

src/components/wrappers/dashboard/agent/button-delete-agent/button-delete-agent.tsx

@@ -6,6 +6,7 @@ import {useMutation} from "@tanstack/react-query";
 import {useRouter} from "next/navigation";
 import {toast} from "sonner";
 import {deleteAgentAction} from "@/components/wrappers/dashboard/agent/button-delete-agent/delete-agent.action";
+import {useIsMobile} from "@/hooks/use-mobile";
 
 export type ButtonDeleteAgentProps = {
     text?: string;
@@ -14,6 +15,7 @@ export type ButtonDeleteAgentProps = {
 
 export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => {
     const router = useRouter();
+    const isMobile = useIsMobile();
 
     const mutation = useMutation({
         mutationFn: () => deleteAgentAction(props.agentId),
@@ -33,7 +35,7 @@ export const ButtonDeleteAgent = (props: ButtonDeleteAgentProps) => {
             description="Are you sure you want to remove this agent? This action cannot be undone."
             button={{
                 main: {
-                    text: props.text ? props.text : "",
+                    text: props.text ? !isMobile ? props.text: "" : "",
                     variant: "outline",
                     icon: <Trash2 color="red"/>,
                 },

src/components/wrappers/dashboard/organization/delete-organization/delete-organization-button.tsx

@@ -6,6 +6,7 @@ import {useRouter} from "next/navigation";
 import {toast} from "sonner";
 import {authClient} from "@/lib/auth/auth-client";
 import {Trash2} from "lucide-react";
+import {useIsMobile} from "@/hooks/use-mobile";
 
 export type DeleteOrganizationButtonProps = {
     organizationSlug: string;
@@ -13,6 +14,7 @@ export type DeleteOrganizationButtonProps = {
 
 export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) => {
     const router = useRouter();
+    const isMobile = useIsMobile();
     const {data: organizations, refetch} = authClient.useListOrganizations();
 
     const mutation = useMutation({
@@ -47,7 +49,7 @@ export const DeleteOrganizationButton = (props: DeleteOrganizationButtonProps) =
             description="Are you sure you want to remove this organization? This action cannot be undone."
             button={{
                 main: {
-                    text: "Delete Organization",
+                    text: !isMobile ? "Delete Organization" : "",
                     variant: "outline",
                     icon: <Trash2 color="red"/>,
                 },

src/components/wrappers/dashboard/projects/project-card/project-database-card.tsx

@@ -19,8 +19,9 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
     const {data: database, extendedProps: extendedProps} = props;
 
     return (
-        <Link className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
-              href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
+        <Link
+            className="group block transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
+            href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
             <DatabaseCard data={database}/>
         </Link>
     );
@@ -28,10 +29,11 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
 
 export type databaseCardProps = {
     data: Database;
+    withDetails?: boolean;
 };
 
 export const DatabaseCard = (props: databaseCardProps) => {
-    const {data: database} = props;
+    const {data: database, withDetails = true} = props;
     const [isCopied, setIsCopied] = useState(false);
 
     const handleCopy = (e: React.MouseEvent) => {
@@ -43,13 +45,15 @@ export const DatabaseCard = (props: databaseCardProps) => {
     };
 
     return (
-        <Card className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
+        <Card
+            className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
             <div className="flex items-start justify-between mb-2">
-                <div className="relative w-12 h-12 p-2 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105">
-                    <Image 
-                        src={`/images/${database.dbms}.png`} 
+                <div
+                    className="relative w-12 h-12 p-2 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105">
+                    <Image
+                        src={`/images/${database.dbms}.png`}
                         alt={`${database.dbms} icon`}
-                        width={32} 
+                        width={32}
                         height={32}
                         className="object-contain w-full h-full"
                     />
@@ -60,16 +64,17 @@ export const DatabaseCard = (props: databaseCardProps) => {
                     </div>
                 </div>
             </div>
-            
+
             <div className="flex flex-col gap-2 flex-1">
                 <h3 className="text-lg font-black text-foreground group-hover:text-primary transition-colors truncate tracking-tight">
                     {database.name}
                 </h3>
-                
+
                 <div className="flex flex-col gap-2">
-                    <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
+                    <div
+                        className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                         <div className="p-1 bg-muted/50 rounded-lg">
-                            <Fingerprint className="w-3.5 h-3.5" />
+                            <Fingerprint className="w-3.5 h-3.5"/>
                         </div>
                         <span className="font-mono text-[10px] font-bold truncate">
                             {database.agentDatabaseId}
@@ -79,12 +84,14 @@ export const DatabaseCard = (props: databaseCardProps) => {
                             className="ml-1 p-0.5 hover:bg-muted rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 z-10"
                             title="Copy ID"
                         >
-                            {isCopied ? <Check className="w-2.5 h-2.5 text-green-500" /> : <Copy className="w-2.5 h-2.5" />}
+                            {isCopied ? <Check className="w-2.5 h-2.5 text-green-500"/> :
+                                <Copy className="w-2.5 h-2.5"/>}
                         </button>
                     </div>
-                    <div className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
+                    <div
+                        className="flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors">
                         <div className="p-1 bg-muted/50 rounded-lg">
-                            <Activity className="w-3.5 h-3.5" />
+                            <Activity className="w-3.5 h-3.5"/>
                         </div>
                         <span className="text-[10px] font-bold uppercase tracking-tight">
                             {formatDateLastContact(database.lastContact)}
@@ -92,14 +99,19 @@ export const DatabaseCard = (props: databaseCardProps) => {
                     </div>
                 </div>
             </div>
-            
-            <div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50">
-                <span className="text-[10px] font-black uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-[-10px] group-hover:translate-x-0">Open</span>
-                <div className="flex items-center gap-1 text-muted-foreground group-hover:text-primary transition-colors">
-                    <span className="text-[10px] font-bold uppercase tracking-widest group-hover:hidden">Details</span>
-                    <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+
+            {withDetails && (
+                <div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50">
+                <span
+                    className="text-[10px] font-black uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-[-10px] group-hover:translate-x-0">Open</span>
+                    <div
+                        className="flex items-center gap-1 text-muted-foreground group-hover:text-primary transition-colors">
+                        <span
+                            className="text-[10px] font-bold uppercase tracking-widest group-hover:hidden">Details</span>
+                        <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform"/>
+                    </div>
                 </div>
-            </div>
+            )}
         </Card>
     );
 };