From bc6fbbe3deb16bf5a0983179476bb4973aecebcc Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 28 Jul 2025 15:25:24 -0500
Subject: [PATCH] Fix map height on info page to fill entire card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set map height to 100% instead of fixed 280px
- Removed card-body padding to eliminate gap
- Added h-full class to ensure cards fill available height
- Added min-height of 320px for better UX
- Removed redundant styling from map container

The map now properly fills the entire card height and matches
the position information card height on larger screens.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/info_map_component.ex          |  4 +--
 lib/aprsme_web/live/info_live/show.html.heex  | 30 +++++++++----------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/lib/aprsme_web/components/info_map_component.ex b/lib/aprsme_web/components/info_map_component.ex
index 1ced708..15f9406 100644
--- a/lib/aprsme_web/components/info_map_component.ex
+++ b/lib/aprsme_web/components/info_map_component.ex
@@ -19,8 +19,8 @@ defmodule AprsmeWeb.Components.InfoMapComponent do
     ~H"""
     <div
       id={@id}
-      class="info-map-container rounded-lg overflow-hidden shadow-md"
-      style={"height: #{@height};"}
+      class="info-map-container overflow-hidden h-full"
+      style={"height: #{@height}; min-height: 320px;"}
       phx-hook="InfoMap"
       data-lat={@lat}
       data-lon={@lon}
diff --git a/lib/aprsme_web/live/info_live/show.html.heex b/lib/aprsme_web/live/info_live/show.html.heex
index 5ce8700..f3a31f9 100644
--- a/lib/aprsme_web/live/info_live/show.html.heex
+++ b/lib/aprsme_web/live/info_live/show.html.heex
@@ -59,9 +59,9 @@
   <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4">
     <%= if @packet do %>
       <!-- Station details -->
-      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 mb-6">
+      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 mb-6 lg:grid-rows-1">
         <!-- Position information -->
-        <div class="card bg-base-100 shadow-xl">
+        <div class="card bg-base-100 shadow-xl h-full">
           <div class="card-body">
             <div class="flex items-center mb-3">
               <div class="flex-shrink-0">
@@ -193,20 +193,18 @@
         
 <!-- Map showing station location -->
         <%= if @packet && @packet.lat && @packet.lon do %>
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body p-0">
-              <% {symbol_table, symbol_code} = AprsmeWeb.AprsSymbol.extract_from_packet(@packet) %>
-              <% symbol_html = AprsmeWeb.AprsSymbol.render_marker_html(symbol_table, symbol_code, @callsign, 32) %>
-              <.info_map
-                id="station-location-map"
-                lat={Aprsme.EncodingUtils.to_float(@packet.lat)}
-                lon={Aprsme.EncodingUtils.to_float(@packet.lon)}
-                callsign={@callsign}
-                symbol_html={symbol_html}
-                height="280px"
-                zoom={12}
-              />
-            </div>
+          <div class="card bg-base-100 shadow-xl h-full">
+            <% {symbol_table, symbol_code} = AprsmeWeb.AprsSymbol.extract_from_packet(@packet) %>
+            <% symbol_html = AprsmeWeb.AprsSymbol.render_marker_html(symbol_table, symbol_code, @callsign, 32) %>
+            <.info_map
+              id="station-location-map"
+              lat={Aprsme.EncodingUtils.to_float(@packet.lat)}
+              lon={Aprsme.EncodingUtils.to_float(@packet.lon)}
+              callsign={@callsign}
+              symbol_html={symbol_html}
+              height="100%"
+              zoom={12}
+            />
           </div>
         <% end %>