From 6f9538053ca8155a9c42bfd7af20a3cfd3bbe8ac Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Mon, 22 Jun 2026 00:56:57 +0200
Subject: [PATCH] feat(map): mobile fullscreen button on trip page map
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Button in bottom-right of #trip-map (z-index:1000), hidden ≥769px.
Attribution moved to bottom-left to free the corner. Clicking toggles
.is-fullscreen on .home-map-col (position:fixed, 100dvh), locks body
scroll, and calls tripMap.resize() for MapLibre to re-render.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/css/style.css            | 12 ++++++++++
 themes/intotheeast/templates/trip.html.twig | 25 +++++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index be87c9d..0f709ec 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -929,10 +929,22 @@ body::after {
 }
 
 .home-map {
+    position: relative;
     width: 100%;
     height: 100%;
 }
 
+.home-map-col.is-fullscreen {
+    position: fixed !important;
+    inset: 0;
+    z-index: 9999;
+    height: 100dvh !important;
+}
+
+.home-map-col.is-fullscreen .home-map {
+    height: 100dvh;
+}
+
 .home-feed-col {
     padding: var(--space-8) var(--space-8);
 }
diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index e1bcb8e..0a56b72 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -105,7 +105,14 @@
 
 <div class="home-layout">
     <div class="home-map-col">
-        <div class="home-map" id="trip-map"></div>
+        <div class="home-map" id="trip-map">
+            <button class="feed-map-fullscreen-btn" id="trip-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>
     </div>
 
     <div class="home-feed-col">
@@ -251,8 +258,10 @@ var tripMap = new maplibregl.Map({
     container: 'trip-map',
     style: MapUtils.MAP_STYLE,
     center: [20, 20],
-    zoom: 2
+    zoom: 2,
+    attributionControl: false
 });
+tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
 
 tripMap.on('load', function () {
     if (TRIP_ENTRIES.length === 0) {
@@ -300,6 +309,18 @@ tripMap.on('load', function () {
 });
 setTimeout(function () { tripMap.resize(); }, 100);
 
+(function() {
+    var fsBtn = document.getElementById('trip-map-fullscreen');
+    var mapCol = document.querySelector('.home-map-col');
+    if (!fsBtn || !mapCol) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapCol.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { tripMap.resize(); }, 50);
+    });
+})();
+
 (function() {
     var filterBtns = document.querySelectorAll('.trip-filter-btn');
     var cards = document.querySelectorAll('[data-type]');