fix: update avatar_group component to increase limit and enhance styling

- Increased the default limit of displayed avatars in the `avatar_group` component from 3 to 4.
- Improved avatar styling by adding a ring effect for better visual distinction.
- Updated usage in `BountyLive` to reflect the new default limit and styling adjustments.

Author: zcesur

lib/algora_web/components/ui/avatar.ex

@@ -54,21 +54,21 @@ defmodule AlgoraWeb.Components.UI.Avatar do
   attr :class, :string, default: nil
   attr :rest, :global
   attr :srcs, :list, default: []
-  attr :limit, :integer, default: 3
+  attr :limit, :integer, default: 4
 
   def avatar_group(assigns) do
     ~H"""
     <div class="relative flex -space-x-1">
       <%= for src <- @srcs |> Enum.take(@limit) do %>
-        <.avatar class={@class}>
+        <.avatar class={classes(["ring-4 ring-background", @class])}>
           <.avatar_image src={src} />
           <.avatar_fallback>
             {Algora.Util.initials(src)}
           </.avatar_fallback>
         </.avatar>
       <% end %>
       <%= if length(@srcs) > @limit do %>
-        <.avatar class={@class}>
+        <.avatar class={classes(["ring-4 ring-background", @class])}>
           <.avatar_fallback>
             +{length(@srcs) - @limit}
           </.avatar_fallback>

lib/algora_web/live/bounty_live.ex

@@ -472,11 +472,7 @@ defmodule AlgoraWeb.BountyLive do
               Contributor chat
             </h2>
 
-            <.avatar_group
-              srcs={Enum.map(@participants, & &1.user.avatar_url)}
-              limit={4}
-              class="ring-4 ring-background"
-            />
+            <.avatar_group srcs={Enum.map(@participants, & &1.user.avatar_url)} />
           </div>
         </div>