From 2eb94c56a39b9d9df71b5cecfce56c8789526ef9 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 5 Aug 2025 23:19:51 +0200
Subject: [PATCH] feat: Add responsive design for SelectedPrincipalsList and
 improve layout in GenericGrantAccessDialog

---
 client/src/components/Sharing/GenericGrantAccessDialog.tsx | 2 ++
 .../Sharing/PeoplePicker/SelectedPrincipalsList.tsx        | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Sharing/GenericGrantAccessDialog.tsx b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
index f18ecdcbfb..4a4960fac0 100644
--- a/client/src/components/Sharing/GenericGrantAccessDialog.tsx
+++ b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
@@ -336,6 +336,8 @@ export default function GenericGrantAccessDialog({
             )}
           </div>
 
+          <div className="flex border-t border-border-light" />
+
           {/* Public Access Section */}
           <PublicSharingToggle
             isPublic={isPublic}
diff --git a/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx b/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
index ae8fd11892..495b9132c8 100644
--- a/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
+++ b/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@librechat/client';
+import { Button, useMediaQuery } from '@librechat/client';
 import { Users, X, ExternalLink } from 'lucide-react';
 import type { TPrincipal, AccessRoleIds } from 'librechat-data-provider';
 import { ResourceType } from 'librechat-data-provider';
@@ -23,10 +23,13 @@ export default function SelectedPrincipalsList({
   resourceType = ResourceType.AGENT,
 }: SelectedPrincipalsListProps) {
   const localize = useLocalize();
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   const getPrincipalDisplayInfo = (principal: TPrincipal) => {
     const displayName = principal.name || localize('com_ui_unknown');
-    const subtitle = principal.email || `${principal.type} (${principal.source || 'local'})`;
+    const subtitle = isMobile
+      ? `${principal.type} (${principal.source || 'local'})`
+      : principal.email || `${principal.type} (${principal.source || 'local'})`;
 
     return { displayName, subtitle };
   };