mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 06:03:22 +00:00
avatar overflow fix?
This commit is contained in:
parent
44cd19840d
commit
cf819ffcd3
@ -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,20 +60,18 @@ const MyAvatar: React.FC<Props> = (props) => {
|
||||
} ${props.showTooltip ? 'tooltip' : ''} ${isActive ? activity : ''}`}
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<div>
|
||||
<Show when={hasPic}>
|
||||
<ProxyImg
|
||||
className="object-cover rounded-full"
|
||||
src={picture || ''}
|
||||
width={width}
|
||||
square={true}
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={!hasPic}>
|
||||
<img width={width} className="max-w-full rounded-full" src={avatar || ''} />
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={hasPic}>
|
||||
<ProxyImg
|
||||
className="object-cover rounded-full"
|
||||
src={picture || ''}
|
||||
width={width}
|
||||
square={true}
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={!hasPic}>
|
||||
<img width={width} className="max-w-full rounded-full" src={avatar || ''} />
|
||||
</Show>
|
||||
<Show when={props.showTooltip && name}>
|
||||
<span className="tooltiptext">{name}</span>
|
||||
</Show>
|
||||
|
@ -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}>
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user