diff --git a/docs/imgs/lists.png b/docs/imgs/lists.png
new file mode 100644
index 00000000..fc92b6a7
Binary files /dev/null and b/docs/imgs/lists.png differ
diff --git a/docs/imgs/new_trail.png b/docs/imgs/new_trail.png
new file mode 100644
index 00000000..b442a84e
Binary files /dev/null and b/docs/imgs/new_trail.png differ
diff --git a/docs/imgs/trail_list.png b/docs/imgs/trail_list.png
new file mode 100644
index 00000000..8948cca9
Binary files /dev/null and b/docs/imgs/trail_list.png differ
diff --git a/web/src/lib/components/list/list_card.svelte b/web/src/lib/components/list/list_card.svelte
index ad668113..69bfd1fe 100644
--- a/web/src/lib/components/list/list_card.svelte
+++ b/web/src/lib/components/list/list_card.svelte
@@ -29,9 +29,9 @@
             <i class="fa fa-table-list text-5xl"></i>
         </div>
     {/if}
-    <div class="basis-full self-start">
-        <div class="flex justify-between items-center">
-            <h5 class="text-xl font-semibold">{list.name}</h5>
+    <div class="self-start min-w-0 w-full">
+        <div class="flex justify-between items-center ">
+            <h5 class="text-xl font-semibold overflow-hidden overflow-ellipsis">{list.name}</h5>
             <Dropdown items={dropdownItems} on:change></Dropdown>
         </div>
         <p class="text-gray-500 text-sm mr-8">{list.description}</p>
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
index 056fadaa..e755715b 100644
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -24,7 +24,7 @@
     import { _ } from "svelte-i18n";
 
     export let trail: Trail;
-    export let showMap: boolean = false;
+    export let mode: "overview" | "map" = "map";
     export let markers: Marker[] = [];
 
     const tabs = [
@@ -46,13 +46,13 @@
         : "/imgs/default_thumbnail.webp";
 
     onMount(async () => {
-        if (showMap) {
+        if (mode == "overview") {
             const L = (await import("leaflet")).default;
             await import("leaflet-gpx");
             await import("leaflet.awesome-markers");
 
             map = L.map("map").setView([0, 0], 2);
-            map.attributionControl.setPrefix(false)
+            map.attributionControl.setPrefix(false);
 
             L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                 attribution: "© OpenStreetMap contributors",
@@ -162,11 +162,12 @@
                     </div>
                 </div>
                 {#if $currentUser && $currentUser.id == trail.author}
-                    <TrailDropdown {trail} mode="overview"></TrailDropdown>
+                    <TrailDropdown {trail} {mode}
+                    ></TrailDropdown>
                 {/if}
             </div>
         </section>
-        {#if showMap}
+        {#if mode == "overview"}
             <section
                 class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8 border-b border-input-border"
             >
@@ -214,7 +215,7 @@
     <section class="trail-info-panel-content px-8">
         <div
             class="grid grid-cols-1 mt-4 gap-8 overflow-scroll"
-            class:md:grid-cols-[1fr_18rem]={showMap}
+            class:md:grid-cols-[1fr_18rem]={mode == "overview"}
         >
             {#if activeTab == 0}
                 <article class="text-justify whitespace-pre-line text-sm">
@@ -233,7 +234,7 @@
             {#if activeTab == 2}
                 <div
                     id="photo-gallery"
-                    class="grid grid-cols-1 {showMap
+                    class="grid grid-cols-1 {mode == "overview"
                         ? 'sm:grid-cols-2 md:grid-cols-3'
                         : ''} gap-4"
                 >
@@ -256,7 +257,7 @@
                     {/each}
                 </ul>
             {/if}
-            {#if showMap}
+            {#if mode == "overview"}
                 <div class="relative">
                     <div class="rounded-xl h-72" id="map">
                         <div class="leaflet-top leaflet-right">
diff --git a/web/src/routes/lists/+page.svelte b/web/src/routes/lists/+page.svelte
index 050ee57a..efeeaf74 100644
--- a/web/src/routes/lists/+page.svelte
+++ b/web/src/routes/lists/+page.svelte
@@ -72,7 +72,7 @@
     style="min-height: calc(100vh - 124px)"
 >
     <ul
-        class="list-list max-w-xl mx-2 md:mx-auto mt-8 rounded-xl border border-input-border p-4"
+        class="list-list mx-2 md:mx-auto mt-8 rounded-xl border border-input-border p-4 max-w-full"
     >
         <button
             class="flex w-full items-center gap-4 hover:bg-menu-item-background-hover transition-colors rounded-xl p-4 cursor-pointer"
diff --git a/web/src/routes/trail/view/[id]/+page.svelte b/web/src/routes/trail/view/[id]/+page.svelte
index 4a6bb196..b753e4e1 100644
--- a/web/src/routes/trail/view/[id]/+page.svelte
+++ b/web/src/routes/trail/view/[id]/+page.svelte
@@ -4,7 +4,7 @@
     import { _ } from "svelte-i18n";
 </script>
 
-<TrailInfoPanel trail={$trail} showMap={true}></TrailInfoPanel>
+<TrailInfoPanel trail={$trail} mode="overview"></TrailInfoPanel>
 
 <svelte:head>
     <title>{$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer</title