From 8b3caffa9ec8fc9c006917dbb72e22211c6143d6 Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Thu, 4 Jan 2024 17:46:49 +0900
Subject: [PATCH] fix: profile icon css

---
 src/components/Post.tsx                 | 4 ++--
 src/components/event/Reaction.tsx       | 4 ++--
 src/components/modal/Config.tsx         | 2 +-
 src/components/modal/ProfileDisplay.tsx | 8 ++------
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 59240da..1bb0860 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -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>
diff --git a/src/components/event/Reaction.tsx b/src/components/event/Reaction.tsx
index 6c21540..88b8c5d 100644
--- a/src/components/event/Reaction.tsx
+++ b/src/components/event/Reaction.tsx
@@ -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>
diff --git a/src/components/modal/Config.tsx b/src/components/modal/Config.tsx
index 49c78dd..212427a 100644
--- a/src/components/modal/Config.tsx
+++ b/src/components/modal/Config.tsx
@@ -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 />
diff --git a/src/components/modal/ProfileDisplay.tsx b/src/components/modal/ProfileDisplay.tsx
index f3d538e..838d1d9 100644
--- a/src/components/modal/ProfileDisplay.tsx
+++ b/src/components/modal/ProfileDisplay.tsx
@@ -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>