From 9acd935d7d86ba108801ad097de9c818763843be Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Thu, 9 Jan 2025 20:36:10 +0100
Subject: [PATCH] mobile repsonsiveness improvements

---
 .../lib/components/trail/trail_card.svelte    |  6 ++---
 .../lib/components/trail/trail_list.svelte    |  2 +-
 web/src/routes/lists/edit/[id]/+page.svelte   |  4 ++++
 web/src/routes/map/trail/[id]/+page.svelte    | 13 ++++++++--
 web/src/routes/profile/[id]/+layout.svelte    |  8 ++++---
 web/src/routes/profile/[id]/+page.svelte      |  2 +-
 .../routes/profile/[id]/stats/+page.svelte    | 12 +++++-----
 web/src/routes/trail/edit/[id]/+page.svelte   | 24 ++++++++++---------
 8 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/web/src/lib/components/trail/trail_card.svelte b/web/src/lib/components/trail/trail_card.svelte
index b4c4ce77..23d9d23d 100644
--- a/web/src/lib/components/trail/trail_card.svelte
+++ b/web/src/lib/components/trail/trail_card.svelte
@@ -26,9 +26,9 @@
 </script>
 
 <div
-    class="trail-card relative rounded-2xl border border-input-border {fullWidth
-        ? 'min-w-72'
-        : 'w-72'} cursor-pointer"
+    class="trail-card relative rounded-2xl border border-input-border min-w-72 {fullWidth
+        ? ''
+        : 'lg:w-72'} cursor-pointer"
     on:mouseenter
     on:mouseleave
     role="listitem"
diff --git a/web/src/lib/components/trail/trail_list.svelte b/web/src/lib/components/trail/trail_list.svelte
index 0f484d4a..15955d76 100644
--- a/web/src/lib/components/trail/trail_list.svelte
+++ b/web/src/lib/components/trail/trail_list.svelte
@@ -101,7 +101,7 @@
 </script>
 
 <div class="min-w-0">
-    <div class="flex items-end flex-wrap md:flex-nowrap gap-x-6 gap-y-2 mx-4">
+    <div class="flex items-end flex-wrap lg:flex-nowrap gap-x-6 gap-y-2 mx-4">
         <div class="basis-full order-1 md:order-none">
             <Pagination
                 page={pagination.page}
diff --git a/web/src/routes/lists/edit/[id]/+page.svelte b/web/src/routes/lists/edit/[id]/+page.svelte
index b47c9af3..eeb8d815 100644
--- a/web/src/routes/lists/edit/[id]/+page.svelte
+++ b/web/src/routes/lists/edit/[id]/+page.svelte
@@ -458,6 +458,10 @@
 ></ConfirmModal>
 
 <style>
+    #trail-map {
+        height: calc(50vh);
+    }
+
     @media only screen and (min-width: 768px) {
         #trail-map,
         #list-form {
diff --git a/web/src/routes/map/trail/[id]/+page.svelte b/web/src/routes/map/trail/[id]/+page.svelte
index e21ec5c4..5a2901c8 100644
--- a/web/src/routes/map/trail/[id]/+page.svelte
+++ b/web/src/routes/map/trail/[id]/+page.svelte
@@ -13,13 +13,22 @@
     <title>{$trail.name} | {$_("map")} | wanderer</title>
 </svelte:head>
 <main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
-    <TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
+    <div class="hidden md:block">
+        <TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
+    </div>
     <div id="trail-details" class="sticky top-[62px]">
-        <MapWithElevationMaplibre trails={[$trail]} bind:markers showTerrain={true}></MapWithElevationMaplibre>
+        <MapWithElevationMaplibre
+            trails={[$trail]}
+            bind:markers
+            showTerrain={true}
+        ></MapWithElevationMaplibre>
     </div>
 </main>
 
 <style>
+    #trail-details {
+        height: calc(100vh);
+    }
     @media only screen and (min-width: 768px) {
         #trail-details {
             height: calc(100vh - 124px);
diff --git a/web/src/routes/profile/[id]/+layout.svelte b/web/src/routes/profile/[id]/+layout.svelte
index f6f7ba19..6b225742 100644
--- a/web/src/routes/profile/[id]/+layout.svelte
+++ b/web/src/routes/profile/[id]/+layout.svelte
@@ -48,9 +48,9 @@
 </script>
 
 <div
-    class="grid grid-cols-1 lg:grid-cols-[356px_minmax(0,_1fr)] gap-4 max-w-6xl mx-auto items-start"
+    class="grid grid-cols-1 md:grid-cols-[356px_minmax(0,_1fr)] gap-6 max-w-6xl mx-auto items-start"
 >
-    <div class="border border-input-border rounded-xl sticky top-8">
+    <div class="border border-input-border rounded-xl md:sticky top-8 md:ml-6">
         {#if data.user}
             <div class="flex items-center gap-x-6 px-6 my-6">
                 <img
@@ -133,5 +133,7 @@
             ></ProfileShareModal>
         {/if}
     </div>
-    <slot></slot>
+    <div class="md:mr-6">
+        <slot></slot>
+    </div>
 </div>
diff --git a/web/src/routes/profile/[id]/+page.svelte b/web/src/routes/profile/[id]/+page.svelte
index 60ce1739..10894bd9 100644
--- a/web/src/routes/profile/[id]/+page.svelte
+++ b/web/src/routes/profile/[id]/+page.svelte
@@ -41,7 +41,7 @@
     <title>{$_("profile")} | wanderer</title>
 </svelte:head>
 
-<div class="mx-8 space-y-6">
+<div class="space-y-6">
     <div class="space-y-4">
         <h4 class="text-xl font-semibold">
             {$_("about")}
diff --git a/web/src/routes/profile/[id]/stats/+page.svelte b/web/src/routes/profile/[id]/stats/+page.svelte
index eb4e69f6..06023067 100644
--- a/web/src/routes/profile/[id]/stats/+page.svelte
+++ b/web/src/routes/profile/[id]/stats/+page.svelte
@@ -225,9 +225,9 @@
     <title>{$_("profile")} | wanderer</title>
 </svelte:head>
 
-<div class="grid grid-cols-1 sm:grid-cols-[272px_minmax(0,_1fr)] lg:grid-cols-[320px_minmax(0,_1fr)] gap-y-4 max-w-6xl mx-auto">
+<div class="grid grid-cols-1 lg:grid-cols-[320px_minmax(0,_1fr)] gap-y-4 max-w-6xl mx-auto">
     <div
-        class="flex flex-wrap md:flex-nowrap col-start-1 sm:col-start-2 gap-x-4 justify-end"
+        class="flex flex-wrap lg:flex-nowrap col-start-1 lg:col-start-2 gap-x-4 justify-end"
     >
         <MultiSelect
             on:change={(e) => updateFilterCategory(e.detail)}
@@ -246,7 +246,7 @@
             label={$_("before")}
         ></Datepicker>
     </div>
-    <div class="space-y-4 grow-0 sm:mr-4">
+    <div class="space-y-4 grow-0 lg:mr-4">
         <div class="border border-input-border rounded-xl p-6">
             <Calendar
                 on:click={(e) => handleDateClick(e.detail)}
@@ -274,7 +274,7 @@
         </div>
     </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div
             class="flex flex-col items-center gap-4 border border-input-border rounded-xl p-6"
         >
@@ -340,7 +340,7 @@
         </div>
 
         <div
-            class="h-full sm:col-span-2 space-y-2 border border-input-border rounded-xl p-6"
+            class="h-full lg:col-span-2 space-y-2 border border-input-border rounded-xl p-6"
         >
             <div class="flex justify-between">
                 <span class="text-gray-500 font-semibold text-lg"
@@ -383,7 +383,7 @@
     </div>
 
     <div
-        class="col-span-1 sm:col-span-2 border border-input-border rounded-xl p-6 space-y-6"
+        class="col-span-1 lg:col-span-2 border border-input-border rounded-xl p-6 space-y-6"
     >
         <span class="text-gray-500 font-semibold text-lg"
             ><i class="fa fa-table mr-3"></i>{$_("all-activities")}</span
diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte
index 184dd142..8350a0fe 100644
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/web/src/routes/trail/edit/[id]/+page.svelte
@@ -899,14 +899,16 @@
                 ></Select>
             </div>
         {/if}
-        <MapWithElevationMaplibre
-            trails={mapTrail}
-            drawing={drawingActive}
-            showTerrain={true}
-            onMarkerDragEnd={moveMarker}
-            bind:map
-            on:click={(e) => handleMapClick(e.detail)}
-        ></MapWithElevationMaplibre>
+        <div id="trail-map">
+            <MapWithElevationMaplibre
+                trails={mapTrail}
+                drawing={drawingActive}
+                showTerrain={true}
+                onMarkerDragEnd={moveMarker}
+                bind:map
+                on:click={(e) => handleMapClick(e.detail)}
+            ></MapWithElevationMaplibre>
+        </div>
     </div>
 </main>
 <WaypointModal
@@ -922,11 +924,11 @@
 ></ListSelectModal>
 
 <style>
-    #map {
-        height: calc(400px);
+    #trail-map {
+        height: calc(50vh);
     }
     @media only screen and (min-width: 768px) {
-        #map,
+        #trail-map,
         form {
             height: calc(100vh - 124px);
         }