From 4f524fcf14b045e95fd14a1e4ee40e1e6a7d07e4 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Fri, 31 Jan 2020 18:17:20 +0100
Subject: [PATCH] Fix breadcrumb component ellipsis

Added overflow: hidden on the main element of the oc-breadcrumb to make
sure that it can ellipsize its content in responsive mode.
---
 src/elements/OcBreadcrumb.vue       | 8 +++++---
 src/styles/theme/oc-breadcrumb.scss | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/elements/OcBreadcrumb.vue b/src/elements/OcBreadcrumb.vue
index 1c96d96e9..6af276c37 100644
--- a/src/elements/OcBreadcrumb.vue
+++ b/src/elements/OcBreadcrumb.vue
@@ -38,7 +38,7 @@
  *
  *  - text: mandatory element, holds the text which is to be displayed in the breadcrumb
  *  - to: optional element, the vue router link
- *  -
+ *
  */
 export default {
   name: "oc-breadcrumb",
@@ -80,7 +80,9 @@ export default {
 <docs>
 ```vue
 <template>
-  <oc-breadcrumb :items="items" home></oc-breadcrumb>
+  <section>
+    <oc-breadcrumb :items="items" home></oc-breadcrumb>
+  </section>
 </template>
 <script>
   export default {
@@ -90,7 +92,7 @@ export default {
           {text:'First folder',to:{path:'folder'}},
           {text:'Subfolder', onClick:() => alert('Breadcrumb clicked!')},
           {text:'Deep',to:{path:'folder'}},
-          {text:'Deeper'},
+          {text:'Deeper ellipsize in responsive mode'},
         ]
       }
     }
diff --git a/src/styles/theme/oc-breadcrumb.scss b/src/styles/theme/oc-breadcrumb.scss
index 69698a9ee..120a9eaae 100644
--- a/src/styles/theme/oc-breadcrumb.scss
+++ b/src/styles/theme/oc-breadcrumb.scss
@@ -4,6 +4,8 @@
 // ========================================================================
 
 .oc-breadcrumb {
+  @extend .uk-overflow-hidden;
+
   &-list {
     @extend .uk-visible\@s;
     @extend .uk-breadcrumb;