Improve responsiveness of User Details page

src/components/Users/UserBanner.tsx

@@ -1,3 +1,5 @@
+import { TooltipComponent } from "@/components/ui/tooltip";
+
 import { Avatar } from "@/components/Common/Avatar";
 
 import { formatDisplayName, formatName } from "@/Utils/utils";
@@ -12,29 +14,36 @@ export default function UserBanner({ userData }: { userData: UserBase }) {
 
   return (
     <div className="mt-2 flex flex-col justify-between gap-3 sm:flex-row">
-      <div className="mb-3 flex w-full flex-col justify-between gap-3 rounded bg-white p-3 shadow-sm transition-all duration-200 ease-in-out sm:flex-row md:p-6">
+      <div className="mb-3 flex flex-col w-full justify-between gap-3 rounded p-3 shadow-sm transition-all duration-200 ease-in-out sm:flex-row md:p-6">
         <div className="flex flex-row gap-2 self-center">
           <Avatar
             imageUrl={userData?.profile_picture_url}
             name={formatDisplayName(userData)}
-            className="h-20 w-20 md:mr-2 lg:mr-3 lg:h-16 lg:w-16"
+            className="h-20 w-20 md:mr-2 shrink-0"
           />
-          <div className="flex flex-col self-center">
+          <div className="grid grid-cols-1 self-center">
             <div className="flex flex-row items-center gap-3">
-              <h1 className="text-xl font-bold" id="users-name">
-                {formatName(userData)}
-              </h1>
+              <TooltipComponent content={formatName(userData)} side="top">
+                <h1 className="text-xl font-bold truncate" id="users-name">
+                  {formatName(userData)}
+                </h1>
+              </TooltipComponent>
               <div className="min-width-50 shrink-0 text-sm text-secondary-600">
-                <UserStatusIndicator user={userData} addPadding />
+                <UserStatusIndicator
+                  user={userData}
+                  addPadding
+                  className="pl-0"
+                />
               </div>
             </div>
-
-            <span
-              id="username"
-              className="text-sm font-light leading-relaxed text-secondary-600"
-            >
-              {userData.username}
-            </span>
+            <TooltipComponent content={userData.username} side="bottom">
+              <p
+                id="username"
+                className="text-sm font-light leading-relaxed text-secondary-600 truncate"
+              >
+                {userData.username}
+              </p>
+            </TooltipComponent>
           </div>
         </div>
       </div>

src/components/Users/UserViewDetails.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 
+import { TooltipComponent } from "@/components/ui/tooltip";
+
 import { UserBase } from "@/types/user/user";
 
 interface UserViewDetailsProps {
@@ -16,10 +18,12 @@ const LabelValue = ({
   id?: string;
 }) => (
   <div className="flex flex-col gap-1">
-    <span className="text-sm text-gray-500">{label}</span>
-    <span id={`view-${id}`} className="text-sm">
-      {value || "-"}
-    </span>
+    <p className="text-sm text-gray-500">{label}</p>
+    <TooltipComponent content={value || "-"} side="bottom">
+      <span id={`view-${id}`} className="text-sm truncate max-w-fit">
+        {value || "-"}
+      </span>
+    </TooltipComponent>
   </div>
 );