From 0bfa2902dc8093bbb9cb231b9af925e87c1a0799 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Mon, 23 Jan 2023 19:34:13 +0200
Subject: [PATCH] refactor(client): cleanup right section of breadcrumbs
 (#49102)

* refactor(client): remove extra code with right section of breadcrumbs

* refactor: the breadcrumbs selectors for readiablity

* clear more extra css code

* clean change log

* Clean change log
---
 client/src/components/layouts/rtl-layout.css  | 16 ----------
 .../Challenges/components/challenge-title.css | 30 +++++++------------
 2 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/client/src/components/layouts/rtl-layout.css b/client/src/components/layouts/rtl-layout.css
index 5c6d1e82b23..fe181b311c0 100644
--- a/client/src/components/layouts/rtl-layout.css
+++ b/client/src/components/layouts/rtl-layout.css
@@ -9,22 +9,6 @@ Increase the spacing in paragraphs
 /* 
 breadcrumbs section
 */
-[dir='rtl'] .breadcrumb-left::after {
-  content: '';
-  display: none;
-}
-
-[dir='rtl'] .breadcrumb-left::before {
-  background-color: var(--secondary-background);
-  content: '';
-  border-top: calc(1.375rem / 2) solid transparent;
-  border-bottom: calc(1.2rem / 2) solid transparent;
-  border-right: calc(1.1rem / 2) solid var(--quaternary-background);
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-}
 
 [dir='rtl'] .challenge-title-breadcrumbs ol {
   padding-right: 0;
diff --git a/client/src/templates/Challenges/components/challenge-title.css b/client/src/templates/Challenges/components/challenge-title.css
index 6008b159f2f..f018b9d5d59 100644
--- a/client/src/templates/Challenges/components/challenge-title.css
+++ b/client/src/templates/Challenges/components/challenge-title.css
@@ -49,10 +49,10 @@
   text-decoration: underline;
 }
 
-.breadcrumb-left {
+.breadcrumb-left,
+.breadcrumb-right {
   text-decoration: none;
-  min-width: 3rem;
-  display: inline-block;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
@@ -60,10 +60,13 @@
   white-space: nowrap;
   flex-grow: 1;
   flex-shrink: 2;
+  padding: 0;
+}
+
+.breadcrumb-left {
+  min-width: 3rem;
   background-color: var(--quaternary-background);
-  padding-block: 0;
-  padding-inline: 0 0.57rem;
-  position: relative;
+  margin-inline-end: 0.57rem;
 }
 
 .breadcrumb-left:after {
@@ -71,25 +74,12 @@
   content: '';
   border-top: calc(1.375rem / 2) solid transparent;
   border-bottom: calc(1.2rem / 2) solid transparent;
-  border-left: calc(1.1rem / 2) solid var(--quaternary-background);
-  position: absolute;
-  top: 0;
-  right: 0;
+  border-inline-start: calc(1.1rem / 2) solid var(--quaternary-background);
   height: 100%;
 }
 
 .breadcrumb-right {
-  text-decoration: none;
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
   min-width: 50px;
-  flex-grow: 2;
-  flex-shrink: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0;
 }
 
 .breadcrumb-rule {