Some improvements

enshi/src/Components/UserCard/UserCard.tsx

@@ -1,6 +1,8 @@
 import { Avatar, Badge, Card, Flex, Separator, Text } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { userAtom } from "../../AtomStore/AtomStore";
+import { axiosLocalhost } from "../../api/axios/axios";
 
 type TUserCard = {
     username?: string;
@@ -10,6 +12,15 @@ type TUserCard = {
 export default function UserCard(props: TUserCard) {
     const user = useAtomValue(userAtom);
 
+    const { data } = useQuery({
+        queryKey: [`userCard${props.userId}`],
+        queryFn: async () => {
+            const response = await axiosLocalhost.get(`/users/${props.userId}`);
+            return response.data;
+        },
+        enabled: !!props.userId,
+    });
+
     const getInitials = (username: string): string => {
         const result = username
             .split(" ")

enshi/src/Pages/UserProfilePage/UserProfilePage.tsx

@@ -3,11 +3,11 @@ import { loremText } from "../../constants/loremText";
 
 export default function UserProfilePage() {
     return (
-        <Flex direction={"column"} className="flex-grow-[8]">
+        <Flex direction={"column"} className="flex-grow-[8] overflow-hidden">
             <ScrollArea
                 type="auto"
                 scrollbars="vertical"
-                className="flex-grow-[1] min-h-0 pr-5"
+                className="flex-grow-[1] pr-5"
             >
                 <Text>
                     <p className="text-justify">{loremText}</p>