Improve userpanel CSS

Author: singiamtel

src/UI/components/UserDetails.tsx

@@ -11,17 +11,17 @@ interface UserDetailsProps {
 
 export function UserDetails(props: Readonly<HTMLAttributes<HTMLDivElement> & UserDetailsProps>) {
     return (
-        <div className="flex flex-row items-center">
-            <div className={cn('w-12 h-12 rounded-full overflow-hidden mr-2 bg-gray-251 dark:bg-gray-250 border-gray-351 dark:border-gray-700', props.border && 'border-2', props.className)}>
+        <div className="flex overflow-hidden">
+            <div className={cn('flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-2 bg-gray-251 dark:bg-gray-250 border-gray-351 dark:border-gray-700', props.border && 'border-2', props.className)}>
                 <img
                     src={props.avatar ?
                         Sprites.getAvatar(props.avatar) :
                         Sprites.getAvatar(167)}
-                    className="w-10 h-10 m-auto scale-[1.2]"
+                    className="w-10 h-10 object-cover m-auto scale-[1.2]"
                     alt={`${props.user}'s avatar (${props.avatar})`}
                 />
             </div>
-            <div className="flex flex-row justify-center items-center">
+            <div className="h-full truncate m-auto">
                 <Username user={props.user} bold />
             </div>
         </div>

src/UI/components/single/TrainerCard/TrainerCard.tsx

@@ -53,7 +53,7 @@ export default function TrainerCard(
     return (
         <div
             ref={forwardRef}
-            className="fixed bg-gray-601 dark:bg-gray-600 rounded-lg p-5 w-[400px] min-h-[150px] shadow-sm shadow-black z-10"
+            className="fixed bg-gray-601 dark:bg-gray-600 rounded-lg p-5 w-[400px] min-h-[150px] shadow-sm shadow-black z-20"
             style={{
                 left: clamp(position.x, margin, window.innerWidth - 500 - margin),
                 top: clamp(position.y, margin, window.innerHeight - 300 - margin),