From 5eb7ccd837db480155ee2f816016ac545845c994 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Tue, 17 Mar 2026 14:10:31 +0000
Subject: [PATCH] Fix overlapping buttons in chat

---
 lib/music_library_web/components/chat.ex | 29 ++++++++++++++++++++----
 priv/gettext/default.pot                 |  1 +
 priv/gettext/en/LC_MESSAGES/default.po   |  1 +
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/lib/music_library_web/components/chat.ex b/lib/music_library_web/components/chat.ex
index 6aa4662c..d1e758fc 100644
--- a/lib/music_library_web/components/chat.ex
+++ b/lib/music_library_web/components/chat.ex
@@ -67,6 +67,7 @@ defmodule MusicLibraryWeb.Components.Chat do
         id={@sheet_id}
         placement="right"
         class="w-md sm:min-w-lg lg:min-w-2xl flex flex-col h-full"
+        hide_close_button
       >
         <%= if @view == :list do %>
           {render_list_view(assigns)}
@@ -102,10 +103,20 @@ defmodule MusicLibraryWeb.Components.Chat do
       <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
         {gettext("Chat history")}
       </h2>
-      <.button size="sm" variant="soft" phx-click="new_chat" phx-target={@myself}>
-        <.icon name="hero-plus" class="icon" data-slot="icon" />
-        {gettext("New chat")}
-      </.button>
+      <div class="flex items-center gap-2">
+        <.button size="sm" variant="soft" phx-click="new_chat" phx-target={@myself}>
+          <.icon name="hero-plus" class="icon" data-slot="icon" />
+          {gettext("New chat")}
+        </.button>
+        <.button
+          size="icon-sm"
+          variant="ghost"
+          phx-click={Fluxon.close_dialog(@sheet_id)}
+          aria-label={gettext("Close")}
+        >
+          <.icon name="hero-x-mark" class="icon" />
+        </.button>
+      </div>
     </div>
 
     <div class="flex-1 overflow-y-auto py-4">
@@ -157,7 +168,7 @@ defmodule MusicLibraryWeb.Components.Chat do
   defp render_active_view(assigns) do
     ~H"""
     <div class="flex items-center gap-2 pb-4 border-b border-zinc-200 dark:border-zinc-700">
-      <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+      <h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 flex-1">
         {gettext("Chat about %{title}", title: @title)}
       </h2>
       <.button
@@ -180,6 +191,14 @@ defmodule MusicLibraryWeb.Components.Chat do
       >
         <.icon name="hero-plus" class="icon" />
       </.button>
+      <.button
+        size="icon-sm"
+        variant="ghost"
+        phx-click={Fluxon.close_dialog(@sheet_id)}
+        aria-label={gettext("Close")}
+      >
+        <.icon name="hero-x-mark" class="icon" />
+      </.button>
     </div>
 
     <div
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 8f6ec71d..8aa07404 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -1053,6 +1053,7 @@ msgid_plural "%{count} results"
 msgstr[0] ""
 msgstr[1] ""
 
+#: lib/music_library_web/components/chat.ex
 #: lib/music_library_web/components/search_components.ex
 #, elixir-autogen, elixir-format
 msgid "Close"
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index d0126504..646a1e2e 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -1053,6 +1053,7 @@ msgid_plural "%{count} results"
 msgstr[0] ""
 msgstr[1] ""
 
+#: lib/music_library_web/components/chat.ex
 #: lib/music_library_web/components/search_components.ex
 #, elixir-autogen, elixir-format
 msgid "Close"