From 5fe3e8eee155e4b02130dbaa25f276efb8ce73b3 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sun, 20 Apr 2025 09:47:19 +0100
Subject: [PATCH] Render musicbrainz_id form input with monospace font

---
 lib/music_library_web/components/core_components.ex | 4 +++-
 lib/music_library_web/components/form_component.ex  | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/music_library_web/components/core_components.ex b/lib/music_library_web/components/core_components.ex
index 8fc8bb7e..f62ac220 100644
--- a/lib/music_library_web/components/core_components.ex
+++ b/lib/music_library_web/components/core_components.ex
@@ -293,6 +293,7 @@ defmodule MusicLibraryWeb.CoreComponents do
   attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
   attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
   attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
+  attr :input_class, :string, default: nil
 
   attr :rest, :global,
     include:
@@ -405,7 +406,8 @@ defmodule MusicLibraryWeb.CoreComponents do
           "ring-zinc-200 dark:ring-zinc-400",
           "placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
           @errors == [] && "border-zinc-300 focus:border-zinc-400",
-          @errors != [] && "border-rose-400 focus:border-rose-400"
+          @errors != [] && "border-rose-400 focus:border-rose-400",
+          @input_class
         ]}
         {@rest}
       />
diff --git a/lib/music_library_web/components/form_component.ex b/lib/music_library_web/components/form_component.ex
index a21729f1..1ea361c2 100644
--- a/lib/music_library_web/components/form_component.ex
+++ b/lib/music_library_web/components/form_component.ex
@@ -49,7 +49,12 @@ defmodule MusicLibraryWeb.FormComponent do
             options={formats_with_labels()}
           />
         </div>
-        <.input field={@form[:musicbrainz_id]} type="text" label={gettext("MusicBrainz ID")} />
+        <.input
+          input_class="font-mono"
+          field={@form[:musicbrainz_id]}
+          type="text"
+          label={gettext("MusicBrainz ID")}
+        />
         <div class="sm:columns-2">
           <.input field={@form[:release]} type="text" label={gettext("Release")} />
           <.input