feat: Refactor map image handling and styling for improved responsiveness and consistency

Author: frasermolyneux

src/XtremeIdiots.Portal.Web/Helpers/MapImageTagHelper.cs

@@ -28,12 +28,9 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
 
         output.Attributes.SetAttribute("src", src);
         output.Attributes.SetAttribute("alt", Map ?? "map");
-        var style = "border: 5px solid #021a40; display: block; margin: auto;";
-        output.Attributes.SetAttribute("style", style);
-        if (!string.IsNullOrWhiteSpace(CssClass))
-        {
-            output.Attributes.SetAttribute("class", CssClass);
-        }
+
+        var cssClass = string.IsNullOrWhiteSpace(CssClass) ? "map-image" : $"map-image {CssClass}";
+        output.Attributes.SetAttribute("class", cssClass);
         // Add client-side fallback in case the resolved image 404s at runtime.
         output.Attributes.SetAttribute("onerror", "this.onerror=null;this.src='/images/noimage.jpg';");
         output.TagMode = TagMode.SelfClosing;

src/XtremeIdiots.Portal.Web/Styles/features/_maps.scss

@@ -14,10 +14,12 @@
 }
 
 .map-image {
-    border: 5px solid $map-border-color;
+    border: 2px solid $map-border-color;
     display: block;
     margin: 0 auto;
-    max-width: 200px;
+    width: 100%;
+    object-fit: cover;
+    aspect-ratio: 4 / 3;
 }
 
 .vote-stats {

src/XtremeIdiots.Portal.Web/Styles/layout/_wrapper.scss

@@ -16,7 +16,7 @@
 }
 
 .wrapper-content {
-    padding: $content-padding;
+    padding: 10px $content-padding $content-padding;
 }
 
 .alerts-container {
@@ -30,6 +30,6 @@ main {
 
 @include media-lg {
     .wrapper-content {
-        padding: $content-padding * 1.5;
+        padding: 15px ($content-padding * 1.5) ($content-padding * 1.5);
     }
 }

src/XtremeIdiots.Portal.Web/Views/MapRotations/AssignmentStatus.cshtml

@@ -349,7 +349,7 @@
                                     if (mapDto != null)
                                     {
                                         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-6 mb-2 text-center">
-                                            <img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="map-image img-fluid rounded" alt="Map image for @mapDto.MapName" loading="lazy" style="max-height: 80px; object-fit: cover; width: 100%;" />
+                                            <img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="map-image img-fluid rounded" alt="Map image for @mapDto.MapName" loading="lazy" />
                                             <small class="text-muted d-block">#@(i + 1)</small>
                                             <small class="fw-bold">@mapDto.MapName</small>
                                         </div>

src/XtremeIdiots.Portal.Web/Views/MapRotations/Details.cshtml

@@ -66,18 +66,18 @@
                         }
                         else
                         {
-                            <div class="row">
+                            <div class="row g-2">
                                 @{ var sortedMaps = Model.Rotation.MapRotationMaps?.OrderBy(m => m.SortOrder).ToList() ?? []; }
                                 @for (var i = 0; i < sortedMaps.Count; i++)
                                 {
                                     var rotationMap = sortedMaps[i];
                                     var mapDto = Model.Maps.FirstOrDefault(m => m.MapId == rotationMap.MapId);
                                     if (mapDto != null)
                                     {
-                                        <div class="col-md-3 col-sm-4 col-6 mb-3 text-center">
-                                            <img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="map-image img-fluid" alt="Map image for @mapDto.MapName" loading="lazy" />
-                                            <small class="text-muted">#@(i + 1)</small>
-                                            <h6 class="mb-0">@mapDto.MapName</h6>
+                                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-6 mb-2 text-center">
+                                            <img src="@(mapDto.MapImageUri ?? "/images/noimage.jpg")" class="map-image img-fluid rounded" alt="Map image for @mapDto.MapName" loading="lazy" />
+                                            <small class="text-muted d-block">#@(i + 1)</small>
+                                            <small class="fw-bold">@mapDto.MapName</small>
                                         </div>
                                     }
                                 }

src/XtremeIdiots.Portal.Web/wwwroot/js/map-rotation-editor.js

@@ -46,7 +46,7 @@
 
                 $card.append('<span class="map-rotation-drag-handle me-2" title="Drag to reorder"><i class="fa-solid fa-grip-vertical"></i></span>');
                 $card.append('<span class="badge bg-secondary me-2" style="min-width:28px;">' + (index + 1) + '</span>');
-                $card.append($('<img>').attr('src', map.imageUrl || '/images/noimage.jpg').attr('alt', map.text).css({ width: '48px', height: '32px', objectFit: 'cover', borderRadius: '4px' }).addClass('me-2'));
+                $card.append($('<img>').attr('src', map.imageUrl || '/images/noimage.jpg').attr('alt', map.text).css({ width: '80px', height: '60px', objectFit: 'cover', borderRadius: '4px' }).addClass('me-2'));
                 $card.append($('<span>').addClass('flex-grow-1').text(map.text));
 
                 const $removeBtn = $('<button type="button" class="btn btn-outline-danger btn-sm ms-2"><i class="fa-solid fa-times"></i></button>');