From 472eee8e318fc81d143d9453357bf4754ce9ac8d Mon Sep 17 00:00:00 2001
From: Francesc Leveque <francesc.leveque@gmail.com>
Date: Mon, 25 May 2026 12:31:43 +0200
Subject: [PATCH] Stack header buttons on mobile so "View radar/portfolio" fits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The single right-aligned row of four buttons (cross-link + Save Image
+ Share Link + Dashboard) overflowed on narrow viewports — the
cross-link in particular fell off the right edge on phones.

Split the row into two semantic groups (share / navigation) and let
flex stack them on mobile, inline on sm+:

- < sm: two rows stacked, right-aligned. Share buttons on top, nav
  (cross-link + Dashboard) below.
- ≥ sm: one row, unchanged visual layout end-to-end.

Applied identically to portfolio_live.ex and radar_live.ex so both
pages keep parity.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 lib/pulse_web/live/portfolio_live.ex | 86 ++++++++++++++-------------
 lib/pulse_web/live/radar_live.ex     | 88 +++++++++++++++-------------
 2 files changed, 93 insertions(+), 81 deletions(-)

diff --git a/lib/pulse_web/live/portfolio_live.ex b/lib/pulse_web/live/portfolio_live.ex
index 537c9fe..9458f8d 100644
--- a/lib/pulse_web/live/portfolio_live.ex
+++ b/lib/pulse_web/live/portfolio_live.ex
@@ -66,46 +66,52 @@ defmodule PulseWeb.PortfolioLive do
       </div>
 
       <div :if={!@not_found && @portfolio}>
-        <%!-- Navigation --%>
-        <div class="flex items-center justify-end gap-2 mb-4">
-          <.link
-            :if={@has_radar}
-            navigate={~p"/r/#{@slug}"}
-            class="btn btn-ghost btn-sm"
-          >
-            <.icon name="hero-eye" class="size-4" /> {gettext("View radar")}
-          </.link>
-          <button
-            id="save-image-btn"
-            phx-hook="SaveImage"
-            data-filename={"#{@slug}-portfolio"}
-            data-label-default={gettext("Save Image")}
-            data-label-capturing={gettext("Capturing...")}
-            data-label-saved={gettext("Saved!")}
-            data-label-failed={gettext("Failed")}
-            class="btn btn-ghost btn-sm"
-          >
-            <.icon name="hero-camera-micro" class="size-4" />
-            <span data-label>{gettext("Save Image")}</span>
-          </button>
-          <button
-            id="share-link-btn"
-            phx-hook="ShareLink"
-            data-filename={"#{@slug}-portfolio"}
-            data-url={url(~p"/p/#{@slug}")}
-            data-title={"#{@slug}'s Portfolio · Pulse"}
-            data-text={"Check out #{@slug}'s dividend portfolio on Pulse"}
-            data-label-default={gettext("Share Link")}
-            data-label-capturing={gettext("Capturing...")}
-            data-label-copied={gettext("Copied!")}
-            class="btn btn-ghost btn-sm"
-          >
-            <.icon name="hero-share-micro" class="size-4" />
-            <span data-label>{gettext("Share Link")}</span>
-          </button>
-          <.link navigate="/" class="btn btn-ghost btn-sm">
-            <.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
-          </.link>
+        <%!-- Navigation. Two groups (share / navigation) so the header
+              wraps cleanly on narrow screens: stacked on mobile (share on
+              top, nav on bottom), inline on sm+. --%>
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 mb-4">
+          <div class="flex items-center justify-end gap-2">
+            <button
+              id="save-image-btn"
+              phx-hook="SaveImage"
+              data-filename={"#{@slug}-portfolio"}
+              data-label-default={gettext("Save Image")}
+              data-label-capturing={gettext("Capturing...")}
+              data-label-saved={gettext("Saved!")}
+              data-label-failed={gettext("Failed")}
+              class="btn btn-ghost btn-sm"
+            >
+              <.icon name="hero-camera-micro" class="size-4" />
+              <span data-label>{gettext("Save Image")}</span>
+            </button>
+            <button
+              id="share-link-btn"
+              phx-hook="ShareLink"
+              data-filename={"#{@slug}-portfolio"}
+              data-url={url(~p"/p/#{@slug}")}
+              data-title={"#{@slug}'s Portfolio · Pulse"}
+              data-text={"Check out #{@slug}'s dividend portfolio on Pulse"}
+              data-label-default={gettext("Share Link")}
+              data-label-capturing={gettext("Capturing...")}
+              data-label-copied={gettext("Copied!")}
+              class="btn btn-ghost btn-sm"
+            >
+              <.icon name="hero-share-micro" class="size-4" />
+              <span data-label>{gettext("Share Link")}</span>
+            </button>
+          </div>
+          <div class="flex items-center justify-end gap-2">
+            <.link
+              :if={@has_radar}
+              navigate={~p"/r/#{@slug}"}
+              class="btn btn-ghost btn-sm"
+            >
+              <.icon name="hero-eye" class="size-4" /> {gettext("View radar")}
+            </.link>
+            <.link navigate="/" class="btn btn-ghost btn-sm">
+              <.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
+            </.link>
+          </div>
         </div>
 
         <%!-- Capturable portfolio content --%>
diff --git a/lib/pulse_web/live/radar_live.ex b/lib/pulse_web/live/radar_live.ex
index e59485a..745f1be 100644
--- a/lib/pulse_web/live/radar_live.ex
+++ b/lib/pulse_web/live/radar_live.ex
@@ -149,47 +149,53 @@ defmodule PulseWeb.RadarLive do
       </div>
 
       <div :if={!@not_found && @radar}>
-        <%!-- Navigation: matches PortfolioLive ordering exactly. --%>
-        <div class="flex items-center justify-end gap-2 mb-4">
-          <.link
-            :if={@has_portfolio}
-            navigate={~p"/p/#{@slug}"}
-            class="btn btn-ghost btn-sm"
-          >
-            <.icon name="hero-briefcase" class="size-4" />
-            {gettext("View portfolio")}
-          </.link>
-          <button
-            id="save-image-btn"
-            phx-hook="SaveImage"
-            data-filename={"#{@slug}-radar"}
-            data-label-default={gettext("Save Image")}
-            data-label-capturing={gettext("Capturing...")}
-            data-label-saved={gettext("Saved!")}
-            data-label-failed={gettext("Failed")}
-            class="btn btn-ghost btn-sm"
-          >
-            <.icon name="hero-camera-micro" class="size-4" />
-            <span data-label>{gettext("Save Image")}</span>
-          </button>
-          <button
-            id="share-link-btn"
-            phx-hook="ShareLink"
-            data-filename={"#{@slug}-radar"}
-            data-url={url(~p"/r/#{@slug}")}
-            data-title={"#{@slug}'s Radar · Pulse"}
-            data-text={"Check out #{@slug}'s stock radar on Pulse"}
-            data-label-default={gettext("Share Link")}
-            data-label-capturing={gettext("Capturing...")}
-            data-label-copied={gettext("Copied!")}
-            class="btn btn-ghost btn-sm"
-          >
-            <.icon name="hero-share-micro" class="size-4" />
-            <span data-label>{gettext("Share Link")}</span>
-          </button>
-          <.link navigate="/" class="btn btn-ghost btn-sm">
-            <.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
-          </.link>
+        <%!-- Navigation: matches PortfolioLive ordering exactly. Two
+              groups (share / navigation) so the header wraps cleanly on
+              narrow screens: stacked on mobile, inline on sm+. --%>
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 mb-4">
+          <div class="flex items-center justify-end gap-2">
+            <button
+              id="save-image-btn"
+              phx-hook="SaveImage"
+              data-filename={"#{@slug}-radar"}
+              data-label-default={gettext("Save Image")}
+              data-label-capturing={gettext("Capturing...")}
+              data-label-saved={gettext("Saved!")}
+              data-label-failed={gettext("Failed")}
+              class="btn btn-ghost btn-sm"
+            >
+              <.icon name="hero-camera-micro" class="size-4" />
+              <span data-label>{gettext("Save Image")}</span>
+            </button>
+            <button
+              id="share-link-btn"
+              phx-hook="ShareLink"
+              data-filename={"#{@slug}-radar"}
+              data-url={url(~p"/r/#{@slug}")}
+              data-title={"#{@slug}'s Radar · Pulse"}
+              data-text={"Check out #{@slug}'s stock radar on Pulse"}
+              data-label-default={gettext("Share Link")}
+              data-label-capturing={gettext("Capturing...")}
+              data-label-copied={gettext("Copied!")}
+              class="btn btn-ghost btn-sm"
+            >
+              <.icon name="hero-share-micro" class="size-4" />
+              <span data-label>{gettext("Share Link")}</span>
+            </button>
+          </div>
+          <div class="flex items-center justify-end gap-2">
+            <.link
+              :if={@has_portfolio}
+              navigate={~p"/p/#{@slug}"}
+              class="btn btn-ghost btn-sm"
+            >
+              <.icon name="hero-briefcase" class="size-4" />
+              {gettext("View portfolio")}
+            </.link>
+            <.link navigate="/" class="btn btn-ghost btn-sm">
+              <.icon name="hero-arrow-left-micro" class="size-4" /> {gettext("Dashboard")}
+            </.link>
+          </div>
         </div>
 
         <%!-- Capturable card — id="portfolio-capture" so the SaveImage hook