From b3240baf8c0f4c77ee8e372924162ebb0e496b41 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Thu, 26 Jan 2023 12:07:44 +1000
Subject: [PATCH] ellipsis on overflow

---
 resources/js/components/SMBreadcrumbs.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/resources/js/components/SMBreadcrumbs.vue b/resources/js/components/SMBreadcrumbs.vue
index eaa8214..40d2fe6 100644
--- a/resources/js/components/SMBreadcrumbs.vue
+++ b/resources/js/components/SMBreadcrumbs.vue
@@ -105,6 +105,7 @@ const breadcrumbs = computed(() => {
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
+    padding: 0 1rem 0 0;
     list-style-type: none;
     font-size: 75%;
     color: $secondary-color-dark;
@@ -118,6 +119,13 @@ const breadcrumbs = computed(() => {
         display: flex;
         align-items: center;
         margin: 0;
+        overflow: hidden;
+
+        span {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
 
         &:not(:last-child):after {
             display: inline-block;