From 989755d33cfa06c6c7debcc7d8532e32088ecf42 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 23:44:09 +0200
Subject: [PATCH] feat(map): mobile fullscreen button for feed mini-map
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Button in the bottom-right corner of the map, hidden ≥769px. Clicking
it toggles .is-fullscreen on .feed-map-wrap (position:fixed, full
viewport), locks body scroll, and calls feedMap.resize() so MapLibre
re-renders at the new size. Icon swaps between expand SVG and ✕.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/css/style.css              | 46 +++++++++++++++++++
 .../intotheeast/templates/dailies.html.twig   | 22 ++++++++-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 2300bd5..8aa1aa4 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -653,6 +653,7 @@ body::after {
 }
 
 .feed-map {
+    position: relative;
     height: 240px;
     width: 100%;
 }
@@ -661,6 +662,51 @@ body::after {
     .feed-map { height: 300px; }
 }
 
+.feed-map-fullscreen-btn {
+    position: absolute;
+    bottom: var(--space-2);
+    right: var(--space-2);
+    width: 2rem;
+    height: 2rem;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-ink);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    box-shadow: var(--shadow-sm);
+    transition: background 0.15s;
+}
+
+.feed-map-fullscreen-btn:hover { background: rgba(255, 255, 255, 1); }
+
+.feed-map-fs-close { display: none; font-size: 1rem; line-height: 1; }
+
+@media (min-width: 769px) {
+    .feed-map-fullscreen-btn { display: none; }
+}
+
+.feed-map-wrap.is-fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+}
+
+.feed-map-wrap.is-fullscreen .feed-map {
+    height: 100dvh;
+}
+
+.feed-map-wrap.is-fullscreen .feed-map-link { display: none; }
+
+.feed-map-wrap.is-fullscreen .feed-map-fs-open { display: none; }
+.feed-map-wrap.is-fullscreen .feed-map-fs-close { display: block; }
+
 .feed-map-link {
     display: block;
     text-align: right;
diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig
index 8834324..2dd9f19 100644
--- a/themes/intotheeast/templates/dailies.html.twig
+++ b/themes/intotheeast/templates/dailies.html.twig
@@ -37,7 +37,14 @@
 
 {% if map_entries|length > 0 %}
 <div class="feed-map-wrap">
-    <div class="feed-map" id="feed-map"></div>
+    <div class="feed-map" id="feed-map">
+        <button class="feed-map-fullscreen-btn" id="feed-map-fullscreen" aria-label="Expand map">
+            <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
+            </svg>
+            <span class="feed-map-fs-close" aria-hidden="true">✕</span>
+        </button>
+    </div>
     <a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
 </div>
 
@@ -86,6 +93,19 @@ feedMap.on('load', function () {
     MapUtils.addJourneySegments(feedMap, segments, 'feed-journey');
 });
 </script>
+<script>
+(function() {
+    var fsBtn = document.getElementById('feed-map-fullscreen');
+    var mapWrap = document.querySelector('.feed-map-wrap');
+    if (!fsBtn || !mapWrap) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapWrap.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { typeof feedMap !== 'undefined' && feedMap.resize(); }, 50);
+    });
+})();
+</script>
 {% endif %}
 
 <div class="feed-sort-bar">