From 53679215a46aad950aa492fefe57a45a9e5823c6 Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Thu, 31 Aug 2023 09:41:09 -0300
Subject: [PATCH] mejorar scroll en crumbs largos

---
 src/views/Page.svelte | 40 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/views/Page.svelte b/src/views/Page.svelte
index 6eb8691..eb774a9 100644
--- a/src/views/Page.svelte
+++ b/src/views/Page.svelte
@@ -10,6 +10,7 @@
   import { pageStore } from "../lib/makeYdocStore";
   import { derived } from "svelte/store";
   import { getTitle } from "../lib/getTitle";
+  import { onMount, tick } from "svelte";
 
   export let worldId: string;
   export let pageId: string;
@@ -52,6 +53,24 @@
       })
       .catch((error) => (state = { error }));
   }
+
+  let breadcrumbsEl: HTMLDivElement;
+  const crumbsScrollToEnd = async () => {
+    await tick();
+    breadcrumbsEl?.scroll({
+      left: breadcrumbsEl.scrollWidth,
+      behavior: "smooth",
+    });
+  };
+
+  onMount(() => {
+    crumbsScrollToEnd();
+  });
+  $: {
+    $crumbsTitles;
+    $pageBreadcrumbs;
+    crumbsScrollToEnd();
+  }
 </script>
 
 <nav>
@@ -69,22 +88,28 @@
 
   <!-- https://devdojo.com/pines/docs/breadcrumbs -->
   <div
-    class="flex justify-between rounded-md border border-neutral-200/60 px-3.5 py-1"
+    class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1"
+    bind:this={breadcrumbsEl}
   >
     <ol
       class="inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
     >
       {#each $pageBreadcrumbs as crumb, index}
-        <li>
+        <li
+          class:anchor-none={index !== $pageBreadcrumbs.length - 1}
+          class:anchor-auto={index === $pageBreadcrumbs.length - 1}
+        >
           <a
             href={inject(routes.Page, { worldId, pageId: crumb })}
-            class="inline-flex items-center py-1 font-normal hover:text-neutral-900 focus:outline-none"
+            class="inline-flex items-center text-ellipsis whitespace-nowrap py-1 font-normal hover:text-neutral-900 focus:outline-none"
             class:active-breadcrumb={crumb === pageId}
             >{$crumbsTitles[index] || crumb}</a
           >
         </li>
         {#if index !== $pageBreadcrumbs.length - 1}
-          <ChevronRight class="h-5 w-5 fill-current text-gray-400/70" />
+          <ChevronRight
+            class="anchor-none h-5 w-5 fill-current text-gray-400/70"
+          />
         {/if}
       {/each}
     </ol>
@@ -102,4 +127,11 @@
   nav a {
     color: inherit;
   }
+
+  .anchor-none {
+    overflow-anchor: none;
+  }
+  .anchor-auto {
+    overflow-anchor: auto;
+  }
 </style>