fix: profile icon css

This commit is contained in:
Shusui MOYATANI
2024-01-04 17:46:49 +09:00
parent 541d036824
commit 8b3caffa9e
4 changed files with 7 additions and 11 deletions

View File

@@ -35,7 +35,7 @@ const Post: Component<PostProps> = (props) => {
<div class="flex w-full gap-1">
<button
type="button"
class="author-icon h-10 w-10 shrink-0 overflow-hidden"
class="author-icon h-10 w-10 shrink-0 overflow-hidden rounded"
onClick={(ev) => {
ev.preventDefault();
props.onShowProfile?.();
@@ -44,7 +44,7 @@ const Post: Component<PostProps> = (props) => {
<Show when={author()?.picture} keyed>
{(url) => (
<LazyLoad>
{() => <img src={url} alt="icon" class="h-full w-full rounded object-cover" />}
{() => <img src={url} alt="icon" class="h-full w-full object-cover" />}
</LazyLoad>
)}
</Show>

View File

@@ -44,13 +44,13 @@ const ReactionDisplay: Component<ReactionDisplayProps> = (props) => {
<EmojiDisplay reactionTypes={event().toReactionTypes()} />
</div>
<div class="notification-user flex gap-1 overflow-hidden">
<div class="author-icon h-5 w-5 shrink-0 overflow-hidden object-cover">
<div class="author-icon h-5 w-5 shrink-0 overflow-hidden rounded">
<Show when={profile()?.picture != null}>
<img
src={profile()?.picture}
alt="icon"
// TODO autofit
class="rounded"
class="h-full w-full object-cover"
/>
</Show>
</div>

View File

@@ -288,7 +288,7 @@ const EmojiConfig = () => {
<For each={Object.values(config().customEmojis)}>
{({ shortcode, url }) => (
<li class="flex items-center gap-2">
<img class="min-w-7 h-7 max-w-[128px]" src={url} alt={shortcode} />
<img class="h-7 min-w-7 max-w-[128px]" src={url} alt={shortcode} />
<div class="flex-1 truncate">{shortcode}</div>
<button class="h-3 w-3 shrink-0" onClick={() => removeEmoji(shortcode)}>
<XMark />

View File

@@ -287,14 +287,10 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
</Show>
<div class="mt-[-54px] flex items-end gap-4 px-4 pt-4">
<div class="flex-1 shrink-0">
<div class="h-28 w-28 rounded-lg shadow-md">
<div class="h-28 w-28 overflow-hidden rounded-lg shadow-md">
<Show when={profileQuery.isFetched && profile()?.picture} keyed>
{(pictureUrl) => (
<img
src={pictureUrl}
alt="user icon"
class="h-full w-full rounded-lg object-cover"
/>
<img src={pictureUrl} alt="user icon" class="h-full w-full object-cover" />
)}
</Show>
</div>