style: fix

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>
 );

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}

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}

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>

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;

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 = [];
 

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>

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="/">