From d82b87355244878b4a25289c85a3fac83c50aa4c Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@architools.local>
Date: Wed, 25 Mar 2026 11:06:48 +0200
Subject: [PATCH] fix(portal): mobile toolbar as fixed viewport element +
 layout fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selection toolbar:
- Moved OUTSIDE map container div to a fixed viewport position
  (bottom-4, z-[110]). iOS Safari clips absolute elements inside
  calc(100vh) containers — fixed positioning solves this.
- Only shown when UAT selected and has data.

Mobile top layout:
- UAT card takes full width (right-2 not right-[140px])
- Basemap switcher at top-[52px] left-2 on mobile (below UAT card)
- Desktop: unchanged (top-right offset from zoom controls)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/(portal)/portal/page.tsx | 36 +++++++++++++++++---------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/app/(portal)/portal/page.tsx b/src/app/(portal)/portal/page.tsx
index 60f9452..59e091b 100644
--- a/src/app/(portal)/portal/page.tsx
+++ b/src/app/(portal)/portal/page.tsx
@@ -1528,7 +1528,7 @@ function HartaContent() {
               />
 
               {/* Top-left: UAT info + change button (responsive) */}
-              <div className="absolute top-2 left-2 right-[140px] sm:right-auto z-10 flex flex-col gap-2">
+              <div className="absolute top-2 left-2 right-2 sm:right-auto z-10 flex flex-col gap-2">
                 <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg px-2 sm:px-3 py-1.5 sm:py-2 flex items-center gap-2">
                   <div className="min-w-0">
                     <p className="text-xs sm:text-sm font-semibold truncate">{selectedUat?.name}</p>
@@ -1556,9 +1556,9 @@ function HartaContent() {
                 </div>
               </div>
 
-              {/* Top-right: basemap switcher + simple feature info (offset to avoid zoom controls) */}
-              {/* On mobile (< sm), drops below the UAT card via top-14 */}
-              <div className="absolute top-14 sm:top-2 right-2 sm:right-12 z-10 flex flex-col items-end gap-2">
+              {/* Basemap switcher + feature info */}
+              {/* Mobile: below UAT card. Desktop: top-right offset from zoom controls */}
+              <div className="absolute top-[52px] left-2 sm:top-2 sm:left-auto sm:right-12 z-10 flex flex-col items-start sm:items-end gap-2">
                 <PortalBasemapSwitcher value={basemap} onChange={setBasemap} />
                 {clickedFeature && selectionMode === "off" && (
                   <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg w-56 sm:w-64 overflow-hidden">
@@ -1616,19 +1616,21 @@ function HartaContent() {
                 )}
               </div>
 
-              {/* Bottom: selection toolbar — centered, above attribution */}
-              <div className="absolute bottom-3 sm:bottom-8 left-1/2 -translate-x-1/2 sm:left-3 sm:translate-x-0 z-30">
-                <SelectionToolbar
-                  selectedFeatures={selectedFeatures}
-                  selectionMode={selectionMode}
-                  onSelectionModeChange={handleSelectionModeChange}
-                  hideEnrichment
-                  onClearSelection={() => {
-                    mapHandleRef.current?.clearSelection();
-                    setSelectedFeatures([]);
-                  }}
-                />
-              </div>
+            </div>
+          )}
+          {/* Selection toolbar — FIXED at bottom of viewport (always visible when map shown) */}
+          {selectedSiruta && !hasNoData && (
+            <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[110]">
+              <SelectionToolbar
+                selectedFeatures={selectedFeatures}
+                selectionMode={selectionMode}
+                onSelectionModeChange={handleSelectionModeChange}
+                hideEnrichment
+                onClearSelection={() => {
+                  mapHandleRef.current?.clearSelection();
+                  setSelectedFeatures([]);
+                }}
+              />
             </div>
           )}
         </>