adds more docs images

Former-commit-id: ca85fb52f051dee5c3402265c1da8e4ab5cbe29b

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="self-start min-w-0 w-full">
         <div class="flex justify-between items-center ">
-            <h5 class="text-xl font-semibold">{list.name}</h5>
+            <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>

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">

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"

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