From 9c960410519e8f564f22e39586926e9c44d19d10 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Mon, 9 Dec 2024 20:47:09 +0000
Subject: [PATCH] fix(mapper): attempt fixing missing basemap download buttons
 on mobile

---
 src/mapper/src/lib/components/offline/basemaps.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/mapper/src/lib/components/offline/basemaps.svelte b/src/mapper/src/lib/components/offline/basemaps.svelte
index efd381bc08..32f76e15a5 100644
--- a/src/mapper/src/lib/components/offline/basemaps.svelte
+++ b/src/mapper/src/lib/components/offline/basemaps.svelte
@@ -7,6 +7,7 @@
     // TODO should raise an issue in hotosm/ui about this / test further
 	import '@shoelace-style/shoelace/dist/components/select/select.js';
 	import '@shoelace-style/shoelace/dist/components/option/option.js';
+	import '@shoelace-style/shoelace/dist/components/button/button.js';
 
     import type { Basemap } from '$lib/utils/basemaps';
     import { getProjectBasemapStore } from '$store/common.svelte.ts';
@@ -38,7 +39,7 @@
     </div>
 
     <!-- Basemap selector -->
-    <div class="flex justify-center w-full max-w-sm">
+    <div class="flex justify-center w-full sm:max-w-sm">
         {#if basemapsAvailable}
             <!-- Note here we cannot two way bind:var to the web-component,
             so use event instead -->
@@ -79,7 +80,7 @@
             role="button"
             tabindex="0"
             size="small"
-            class="secondary w-full max-w-[200px]"
+            class="secondary w-full sm:max-w-[200px]"
         >
             <hot-icon slot="prefix" name="download" class="!text-[1rem] text-[#b91c1c] cursor-pointer duration-200"
             ></hot-icon>
@@ -94,7 +95,7 @@
             role="button"
             tabindex="0"
             size="small"
-            class="secondary w-full max-w-[200px]"
+            class="secondary w-full sm:max-w-[200px]"
         >
             <hot-icon slot="prefix" name="download" class="!text-[1rem] text-[#b91c1c] cursor-pointer duration-200"
             ></hot-icon>
@@ -111,7 +112,7 @@
             role="button"
             tabindex="0"
             size="small"
-            class="secondary w-full max-w-[200px]"
+            class="secondary w-full sm:max-w-[200px]"
         >
             <hot-icon slot="prefix" name="download" class="!text-[1rem] text-[#b91c1c] cursor-pointer duration-200"
             ></hot-icon>