graham/aprs.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix map height on info page to fill entire card

Browse source 
- 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>
This commit is contained in:
Graham McIntire 2025-07-28 15:25:24 -05:00
parent 85c3b3d9e7
commit bc6fbbe3de
No known key found for this signature in database
2 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lib/aprsme_web/components/info_map_component.ex
View file

@ -19,8 +19,8 @@ defmodule AprsmeWeb.Components.InfoMapComponent do
~H""" ~H"""
<div <div
id={@id} id={@id}
class="info-map-container rounded-lg overflow-hidden shadow-md" class="info-map-container overflow-hidden h-full"
style={"height: #{@height};"} style={"height: #{@height}; min-height: 320px;"}
phx-hook="InfoMap" phx-hook="InfoMap"
data-lat={@lat} data-lat={@lat}
data-lon={@lon} data-lon={@lon}

30
lib/aprsme_web/live/info_live/show.html.heex
View file

@ -59,9 +59,9 @@
<div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4"> <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4">
<%= if @packet do %> <%= if @packet do %>
<!-- Station details --> <!-- 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 --> <!-- 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="card-body">
<div class="flex items-center mb-3"> <div class="flex items-center mb-3">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
@ -193,20 +193,18 @@
<!-- Map showing station location --> <!-- Map showing station location -->
<%= if @packet && @packet.lat && @packet.lon do %> <%= if @packet && @packet.lat && @packet.lon do %>
<div class="card bg-base-100 shadow-xl"> <div class="card bg-base-100 shadow-xl h-full">
<div class="card-body p-0"> <% {symbol_table, symbol_code} = AprsmeWeb.AprsSymbol.extract_from_packet(@packet) %>
<% {symbol_table, symbol_code} = AprsmeWeb.AprsSymbol.extract_from_packet(@packet) %> <% symbol_html = AprsmeWeb.AprsSymbol.render_marker_html(symbol_table, symbol_code, @callsign, 32) %>
<% symbol_html = AprsmeWeb.AprsSymbol.render_marker_html(symbol_table, symbol_code, @callsign, 32) %> <.info_map
<.info_map id="station-location-map"
id="station-location-map" lat={Aprsme.EncodingUtils.to_float(@packet.lat)}
lat={Aprsme.EncodingUtils.to_float(@packet.lat)} lon={Aprsme.EncodingUtils.to_float(@packet.lon)}
lon={Aprsme.EncodingUtils.to_float(@packet.lon)} callsign={@callsign}
callsign={@callsign} symbol_html={symbol_html}
symbol_html={symbol_html} height="100%"
height="280px" zoom={12}
zoom={12} />
/>
</div>
</div> </div>
<% end %> <% end %>