Properly truncate breadcrumbs

superfly · Aug 16, 2024 · 938866e · 938866e
1 parent f65d071
commit 938866e
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/partials/_breadcrumbs.html.erb b/partials/_breadcrumbs.html.erb
@@ -1,5 +1,5 @@
 <nav aria-label="Breadcrumb" class="mb-11 flex items-center space-x-2 text-sm font-[550] text-gray-500">
-  <a href="/docs/" class="hover:text-violet-600 transition-colors">Docs</a>
+  <a href="/docs/" class="hover:text-violet-600 transition-colors truncate">Docs</a>
   <% 
     segments = current_page.request_path.split('/').drop(2)
     segments.each_with_index do |segment, index|
@@ -11,14 +11,14 @@
               end
       is_last = index == segments.size - 1
   %>
-    <span class="flex items-center">
-      <svg class="w-4 h-4 text-gray-500/50" fill="currentColor" viewBox="0 0 20 20">
+    <span class="flex items-center truncate">
+      <svg class="w-4 h-4 text-gray-500/50 shrink-0" fill="currentColor" viewBox="0 0 20 20">
         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
       </svg>
       <% if is_last %>
-        <span class="ml-2 text-navy-950"><%= title %></span>
+        <span class="ml-2 text-navy-950 truncate"><%= title %></span>
       <% else %>
-        <a href="<%= path %>" class="ml-2 hover:text-violet-600 transition-colors"><%= title %></a>
+        <a href="<%= path %>" class="ml-2 hover:text-violet-600 transition-colors truncate"><%= title %></a>
       <% end %>
     </span>
   <% end %>