fix: breadcrumb navigation css

open-craft · Nov 6, 2023 · ffaa7e6 · ffaa7e6
1 parent 1c025f0
commit ffaa7e6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -20,12 +20,7 @@ const CourseBreadcrumb = ({
         <li className="col-auto p-0 mx-2 text-primary-500 text-truncate text-nowrap" role="presentation" aria-hidden>/</li>
       )}
 
-      <li style={{
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-      }}
-      >
+      <li className="reactive-crumbs">
         { getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff
           ? (
             <Link

diff --git a/src/index.scss b/src/index.scss
@@ -356,6 +356,18 @@
   }
 }
 
+.reactive-crumbs {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:active {
+    overflow: visible;
+  }
+}
+
 .raised-card {
   border: 0 !important;
   box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2) !important;