avatar overflow fix?

src/js/components/user/Avatar.tsx

@@ -51,8 +51,8 @@ const MyAvatar: React.FC<Props> = (props) => {
   return (
     <div
       style={{
-        maxWidth: `${width}px`,
-        maxHeight: `${width}px`,
+        width: `${width}px`,
+        height: `${width}px`,
         cursor: props.onClick ? 'pointer' : undefined,
       }}
       className={`inline-flex flex-col flex-shrink-0 items-center justify-center relative select-none ${
@@ -60,7 +60,6 @@ const MyAvatar: React.FC<Props> = (props) => {
       } ${props.showTooltip ? 'tooltip' : ''} ${isActive ? activity : ''}`}
       onClick={props.onClick}
     >
-      <div>
       <Show when={hasPic}>
         <ProxyImg
           className="object-cover rounded-full"
@@ -73,7 +72,6 @@ const MyAvatar: React.FC<Props> = (props) => {
       <Show when={!hasPic}>
         <img width={width} className="max-w-full rounded-full" src={avatar || ''} />
       </Show>
-      </div>
       <Show when={props.showTooltip && name}>
         <span className="tooltiptext">{name}</span>
       </Show>

src/js/components/user/ProfileCard.tsx

@@ -162,7 +162,9 @@ const ProfileCard = (props: { hexPub: string; npub: string }) => {
     <div key={`${hexPub}details`}>
       <div className="mb-2 mx-2 md:px-4 md:mx-0 flex flex-col gap-2">
         <div className="flex flex-row">
-          <div className="-mt-24">{profilePicture}</div>
+          <div className="-mt-24" style={{ 'max-width': '136px' }}>
+            {profilePicture}
+          </div>
           <div className="flex-1 justify-end items-center flex gap-2">
             <div onClick={onClickHandler}>
               <Show when={isMyProfile}>

src/js/components/user/ProfilePicture.tsx

@@ -21,11 +21,11 @@ const ProfilePicture = ({ picture, onError }: Props) => {
   }
 
   return (
-    <div className="rounded-full border-4 border-black bg-black">
+    <div className="rounded-full aspect-square border-4 border-black bg-black">
       <ProxyImg
         width={128}
         square={true}
-        className="rounded-full cursor-pointer"
+        className="rounded-full w-full h-full cursor-pointer object-cover"
         src={picture}
         onError={onError}
         onClick={handleClick}