···

       
255
       
255
       
 
       
            {(prefixItem, index) => (

     

       
256
       
256
       
 
       
              <button

     

       
257
       
257
       
 
       
                type="button"

     

       
258
       
258
       
-
       
                class={`flex items-center rounded-lg p-2 ${

     

       
258
       
258
       
+
       
                class={`flex items-center rounded-md p-2 ${

     

       
259
       
259
       
 
       
                  index() === selectedIndex() ?

     

       
260
       
260
       
 
       
                    "bg-neutral-200 dark:bg-neutral-700"

     

       
261
       
261
       
 
       
                  : "hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     
···

       
280
       
280
       
 
       
              const adjustedIndex = getPrefixSuggestions().length + index();

     

       
281
       
281
       
 
       
              return (

     

       
282
       
282
       
 
       
                <A

     

       
283
       
283
       
-
       
                  class={`flex items-center gap-2 rounded-lg p-2 ${

     

       
283
       
283
       
+
       
                  class={`flex items-center gap-2 rounded-md p-2 ${

     

       
284
       
284
       
 
       
                    adjustedIndex === selectedIndex() ?

     

       
285
       
285
       
 
       
                      "bg-neutral-200 dark:bg-neutral-700"

     

       
286
       
286
       
 
       
                    : "hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     
···

       
290
       
290
       
 
       
                >

     

       
291
       
291
       
 
       
                  <img

     

       
292
       
292
       
 
       
                    src={actor.avatar?.replace("img/avatar/", "img/avatar_thumbnail/")}

     

       
293
       
293
       
-
       
                    class="size-8 rounded-full"

     

       
293
       
293
       
+
       
                    class="size-9 rounded-full"

     

       
294
       
294
       
 
       
                  />

     

       
295
       
295
       
-
       
                  <span>{actor.handle}</span>

     

       
295
       
295
       
+
       
                  <div class="flex flex-col">

     

       
296
       
296
       
+
       
                    <Show when={actor.displayName}>

     

       
297
       
297
       
+
       
                      <span class="text-sm font-medium">{actor.displayName}</span>

     

       
298
       
298
       
+
       
                    </Show>

     

       
299
       
299
       
+
       
                    <span class="text-xs text-neutral-600 dark:text-neutral-400">

     

       
300
       
300
       
+
       
                      @{actor.handle}

     

       
301
       
301
       
+
       
                    </span>

     

       
302
       
302
       
+
       
                  </div>

     

       
296
       
303
       
 
       
                </A>

     

       
297
       
304
       
 
       
              );

     

       
298
       
305
       
 
       
            }}