style: enhance dropdown component and improve text truncation

- Added a class attribute to the dropdown for better styling control.
- Implemented text truncation for user names and context names to improve layout consistency and prevent overflow in the UI.

Author: zcesur

lib/algora_web/components/core_components.ex

@@ -210,7 +210,7 @@ defmodule AlgoraWeb.CoreComponents do
 
   def context_selector(assigns) do
     ~H"""
-    <.dropdown id="dashboard-dropdown">
+    <.dropdown id="dashboard-dropdown" class={@class}>
       <:img src={@current_context.avatar_url} alt={@current_context.handle} />
       <:title>{@current_context.name}</:title>
 
@@ -222,9 +222,9 @@ defmodule AlgoraWeb.CoreComponents do
               {Algora.Util.initials(@current_user.name)}
             </.avatar_fallback>
           </.avatar>
-          <div>
-            <div class="font-semibold">{@current_user.name}</div>
-            <div class="text-sm text-gray-500">
+          <div class="truncate">
+            <div class="font-semibold truncate">{@current_user.name}</div>
+            <div class="text-sm text-gray-500 truncate">
               Solver dashboard
             </div>
           </div>
@@ -238,9 +238,9 @@ defmodule AlgoraWeb.CoreComponents do
               {Algora.Util.initials(@current_user.name)}
             </.avatar_fallback>
           </.avatar>
-          <div>
-            <div class="font-semibold">{@current_user.name}</div>
-            <div class="text-sm text-gray-500">
+          <div class="truncate">
+            <div class="font-semibold truncate">{@current_user.name}</div>
+            <div class="text-sm text-gray-500 truncate">
               Bounty board
             </div>
           </div>
@@ -262,9 +262,9 @@ defmodule AlgoraWeb.CoreComponents do
               {Algora.Util.initials(ctx.name)}
             </.avatar_fallback>
           </.avatar>
-          <div>
-            <div class="font-semibold">{ctx.name}</div>
-            <div :if={ctx.handle} class="text-sm text-gray-500">@{ctx.handle}</div>
+          <div class="truncate">
+            <div class="font-semibold truncate">{ctx.name}</div>
+            <div :if={ctx.handle} class="text-sm text-gray-500 truncate">@{ctx.handle}</div>
           </div>
         </div>
       </:link>

lib/algora_web/components/layouts/user.html.heex

@@ -256,6 +256,7 @@
             current_user={@current_user}
             current_context={@current_context}
             all_contexts={@all_contexts}
+            class="w-[12rem]"
           />
         <% else %>
           <.link