From e53c9b4fa1fe80dcdfc2a7e9d5187e61416c3f09 Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Wed, 29 May 2024 02:20:06 +0900
Subject: [PATCH] style: fix

---
 src/components/EmojiDisplay.tsx                          | 4 ++--
 src/components/NotePostForm.tsx                          | 2 +-
 src/components/event/textNote/TextNoteContentDisplay.tsx | 2 +-
 src/components/utils/Copy.tsx                            | 2 +-
 src/hooks/useEmojiComplete.tsx                           | 2 +-
 src/nostr/parseTextNote.ts                               | 2 +-
 src/pages/Hello.tsx                                      | 2 +-
 src/pages/NotFound.tsx                                   | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/EmojiDisplay.tsx b/src/components/EmojiDisplay.tsx
index e5e8e4f..257419a 100644
--- a/src/components/EmojiDisplay.tsx
+++ b/src/components/EmojiDisplay.tsx
@@ -13,7 +13,7 @@ const isPlus = (r: ReactionTypes) => r.type === 'LikeDislike' && r.content === '
 const EmojiDisplay: Component<EmojiDisplayProps> = (props) => (
   <Switch fallback={<span class="truncate">{props.reactionTypes.content}</span>}>
     <Match when={isPlus(props.reactionTypes)}>
-      <span class="inline-block size-4 pt-[1px] text-r-reaction">
+      <span class="inline-block size-4 pt-px text-r-reaction">
         <HeartSolid />
       </span>
     </Match>
@@ -21,7 +21,7 @@ const EmojiDisplay: Component<EmojiDisplayProps> = (props) => (
       {({ content }) => <span class="truncate">{content}</span>}
     </Match>
     <Match when={props.reactionTypes.type === 'CustomEmoji' && props.reactionTypes} keyed>
-      {({ shortcode, url }) => <img class="h-4 max-w-[6rem]" src={url} alt={`:${shortcode}:`} />}
+      {({ shortcode, url }) => <img class="h-4 max-w-24" src={url} alt={`:${shortcode}:`} />}
     </Match>
   </Switch>
 );
diff --git a/src/components/NotePostForm.tsx b/src/components/NotePostForm.tsx
index edf47d9..beb1146 100644
--- a/src/components/NotePostForm.tsx
+++ b/src/components/NotePostForm.tsx
@@ -384,7 +384,7 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             emojiTextAreaRef(el);
           }}
           name="text"
-          class="scrollbar max-h-[40vh] min-h-[4rem] overflow-y-auto rounded-md border border-border bg-bg ring-border placeholder:text-fg-secondary focus:border-border focus:ring-primary"
+          class="scrollbar max-h-[40vh] min-h-16 overflow-y-auto rounded-md border border-border bg-bg ring-border placeholder:text-fg-secondary focus:border-border focus:ring-primary"
           rows={4}
           placeholder={placeholder(mode())}
           onInput={handleInput}
diff --git a/src/components/event/textNote/TextNoteContentDisplay.tsx b/src/components/event/textNote/TextNoteContentDisplay.tsx
index ee5003b..9875f2d 100644
--- a/src/components/event/textNote/TextNoteContentDisplay.tsx
+++ b/src/components/event/textNote/TextNoteContentDisplay.tsx
@@ -131,7 +131,7 @@ const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
           // const { imageRef, canvas } = useImageAnimation({ initialPlaying: false });
           return (
             <img
-              class="inline-block h-8 max-w-[8rem]"
+              class="inline-block h-8 max-w-32"
               src={item.url}
               alt={item.content}
               title={item.shortcode}
diff --git a/src/components/utils/Copy.tsx b/src/components/utils/Copy.tsx
index 8c6dfda..959ec9d 100644
--- a/src/components/utils/Copy.tsx
+++ b/src/components/utils/Copy.tsx
@@ -28,7 +28,7 @@ const Copy: Component<CopyProps> = (props) => {
         <ClipboardDocument />
       </button>
       <Show when={showPopup()}>
-        <div class="absolute left-[-2.5rem] top-[-1.5rem] rounded bg-primary p-1 text-xs font-bold text-primary-fg shadow">
+        <div class="absolute -left-10 -top-6 rounded bg-primary p-1 text-xs font-bold text-primary-fg shadow">
           Copied!
         </div>
       </Show>
diff --git a/src/hooks/useEmojiComplete.tsx b/src/hooks/useEmojiComplete.tsx
index b5090f1..3bae201 100644
--- a/src/hooks/useEmojiComplete.tsx
+++ b/src/hooks/useEmojiComplete.tsx
@@ -27,7 +27,7 @@ const useEmojiComplete = () => {
           template: (config: CustomEmojiConfig) => {
             const e = (
               <div class="flex gap-1 border-b border-border px-2 py-1">
-                <img class="h-6 max-w-[3rem]" src={config.url} alt={config.shortcode} />
+                <img class="h-6 max-w-12" src={config.url} alt={config.shortcode} />
                 <div>{config.shortcode}</div>
               </div>
             ) as HTMLElement;
diff --git a/src/nostr/parseTextNote.ts b/src/nostr/parseTextNote.ts
index b9ee616..924ce14 100644
--- a/src/nostr/parseTextNote.ts
+++ b/src/nostr/parseTextNote.ts
@@ -101,7 +101,7 @@ const parseTextNote = (textNoteContent: string) => {
     ...textNoteContent.matchAll(mentionRegex),
     ...textNoteContent.matchAll(hashTagRegex),
     ...textNoteContent.matchAll(customEmojiRegex),
-  ].sort((a, b) => (a.index as number) - (b.index as number));
+  ].sort((a, b) => a.index - b.index);
   let pos = 0;
   const result: ParsedTextNote = [];
 
diff --git a/src/pages/Hello.tsx b/src/pages/Hello.tsx
index 694bfa0..7d28615 100644
--- a/src/pages/Hello.tsx
+++ b/src/pages/Hello.tsx
@@ -51,7 +51,7 @@ const Hello: Component = () => {
   });
 
   return (
-    <div class="mx-auto flex max-w-[640px] flex-col items-center p-4 text-fg">
+    <div class="mx-auto flex max-w-screen-sm flex-col items-center p-4 text-fg">
       <div class="flex flex-col items-center gap-4 rounded p-4">
         <img src={resolveAsset('images/rabbit_256.png')} width="96" alt="logo" height="96" />
         <h1 class="text-5xl font-black text-primary">Rabbit</h1>
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 1bc7308..e11b2cc 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -6,7 +6,7 @@ const NotFound: Component = () => {
   const i18n = useTranslation();
 
   return (
-    <div class="container mx-auto max-w-[640px] py-10">
+    <div class="container mx-auto max-w-screen-sm py-10">
       <h1 class="text-4xl font-bold text-fg">{i18n.t('notFound.title')}</h1>
       <p class="pt-4">
         <a class="text-link underline" href="/">