From aaf4c6a2c77d9306a2491c13b46486266fdf3ff7 Mon Sep 17 00:00:00 2001
From: Willem van den Ende <willem@qwan.eu>
Date: Fri, 15 May 2026 16:12:43 +0100
Subject: [PATCH] refactor(microprints): move expand/collapse button above
 microprint

- Button is now on top of the card, matching qwan-tracker layout
- Microprint SVG shown when collapsed, source viewer when expanded
- Fixes DOM confusion from duplicate source-viewer IDs by only
  rendering one source_viewer at a time
---
 app/lib/firehose_web/live/microprints_live.ex | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/lib/firehose_web/live/microprints_live.ex b/app/lib/firehose_web/live/microprints_live.ex
index b43b49c..7eaeeb2 100644
--- a/app/lib/firehose_web/live/microprints_live.ex
+++ b/app/lib/firehose_web/live/microprints_live.ex
@@ -55,19 +55,10 @@ defmodule FirehoseWeb.MicroprintsLive do
               </h3>
 
               <%= if microprint do %>
-                <.microprint
-                  microprint={microprint}
-                  width={200}
-                  max_height={100}
-                  clickable={true}
-                  file_path={path}
-                  highlighted_line={@highlighted_line}
-                />
-
                 <button
                   phx-click="toggle_expand"
                   phx-value-path={path}
-                  class="btn btn-xs btn-ghost mt-2 w-full"
+                  class="btn btn-xs btn-ghost w-full"
                 >
                   <%= if @expanded_path == path do %>
                     Collapse
@@ -82,6 +73,15 @@ defmodule FirehoseWeb.MicroprintsLive do
                     highlighted_line={@highlighted_line}
                     language="elixir"
                   />
+                <% else %>
+                  <.microprint
+                    microprint={microprint}
+                    width={200}
+                    max_height={100}
+                    clickable={true}
+                    file_path={path}
+                    highlighted_line={@highlighted_line}
+                  />
                 <% end %>
               <% else %>
                 <div class="text-xs text-red-500 mt-1">