diff --git a/frontend/package.json b/frontend/package.json
index 6ad52fe..bff30b7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,7 +36,16 @@
   },
   "prettier": {
     "plugins": [
+      "prettier-plugin-svelte",
       "prettier-plugin-tailwindcss"
+    ],
+    "overrides": [
+      {
+        "files": "*.svelte",
+        "options": {
+          "parser": "svelte"
+        }
+      }
     ]
   }
 }
diff --git a/frontend/src/lib/nav/Nav.svelte b/frontend/src/lib/nav/Nav.svelte
index ed2698f..d08aa6b 100644
--- a/frontend/src/lib/nav/Nav.svelte
+++ b/frontend/src/lib/nav/Nav.svelte
@@ -14,22 +14,28 @@
   $: dumpName = generateDumpName(params.dumpUrl);
 </script>
 
-<nav class="flex justify-between m-2">
+<nav class="m-2 flex justify-between">
   <ol
-    class="flex items-center mb-3 text-sm text-neutral-500 dark:text-neutral-300 [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200 [&_.active-breadcrumb]:font-bold sm:mb-0"
+    class="mb-3 flex items-center overflow-x-hidden text-sm text-neutral-500 dark:text-neutral-300 sm:mb-0 [&_.active-breadcrumb]:font-bold [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200"
     class:active-breadcrumb={kind === "dump"}
   >
     <NavItem href={inject(routes.Dump, params)} active={kind === "dump"}
       >{dumpName}</NavItem
     >
     {#if "portal" in params}
-      <ChevronRight class="w-5 h-5 text-neutral-400" fill="currentColor" />
+      <ChevronRight
+        class="h-5 w-5 shrink-0 text-neutral-400"
+        fill="currentColor"
+      />
       <NavItem href={inject(routes.Portal, params)} active={kind === "portal"}>
         {params.portal}
       </NavItem>
     {/if}
     {#if "id" in params}
-      <ChevronRight class="w-5 h-5 text-neutral-400" fill="currentColor" />
+      <ChevronRight
+        class="h-5 w-5 shrink-0 text-neutral-400"
+        fill="currentColor"
+      />
       <NavItem
         href={inject(routes.Dataset, params)}
         active={kind === "dataset"}
diff --git a/frontend/src/lib/nav/NavItem.svelte b/frontend/src/lib/nav/NavItem.svelte
index 3faf8f9..956f2b4 100644
--- a/frontend/src/lib/nav/NavItem.svelte
+++ b/frontend/src/lib/nav/NavItem.svelte
@@ -3,12 +3,12 @@
   export let href: string;
 </script>
 
-<li class="flex items-center h-full">
+<li class="min-w-0">
   <a
     {href}
-    class="inline-flex items-center px-2 py-1.5 space-x-1.5 rounded-md hover:text-neutral-900 hover:bg-neutral-100 dark:hover:text-gray-100 dark:hover:bg-gray-800"
+    class="block w-full space-x-1.5 overflow-hidden text-ellipsis whitespace-nowrap rounded-md px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-gray-800 dark:hover:text-gray-100"
     class:active-breadcrumb={active}
   >
-    <span><slot /></span>
+    <slot />
   </a>
 </li>