From e09a32e17f9092a2cd102379eda9f241c4156df1 Mon Sep 17 00:00:00 2001 From: Nyx Date: Sat, 10 Jan 2026 17:04:46 +0530 Subject: [PATCH 1/3] fix breadcrumb ui scaling using clip path instead --- .../buttons/BreadcrumbTrailButtons.svelte | 49 +++++++------------ 1 file changed, 19 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte index bb7855c5a0..2c286f55b6 100644 --- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte +++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte @@ -26,44 +26,33 @@ .text-button { position: relative; - &:not(:first-of-type) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - - &::before { - content: ""; - position: absolute; - top: 0; - left: -4px; - width: 0; - height: 0; - border-style: solid; - border-width: 12px 0 12px 4px; - border-color: var(--button-background-color) var(--button-background-color) var(--button-background-color) transparent; - } +&:not(:first-child) { + margin-left: -4px; } - &:not(:last-of-type) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + clip-path: polygon(0% 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 0% 100%, 4px 50%); + padding-left: 12px; + padding-right: 12px; - &::after { - content: ""; - position: absolute; - top: 0; - right: -4px; - width: 0; - height: 0; - border-style: solid; - border-width: 12px 0 12px 4px; - border-color: transparent transparent transparent var(--button-background-color); - } + &:first-of-type { + clip-path: polygon(0% 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 0% 100%); + padding-left: 8px; + padding-right: 12px; } &:last-of-type { - // Make this non-functional button not change color on hover + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 4px 50%); + padding-left: 12px; + padding-right: 8px; + pointer-events: none; } + + &:first-of-type:last-of-type { + clip-path: none; + padding-left: 8px; + padding-right: 8px; + } } } From dcb600070435f84e672e2d56ed09c1f9a9288fb7 Mon Sep 17 00:00:00 2001 From: Nyx Date: Sat, 10 Jan 2026 21:05:48 +0530 Subject: [PATCH 2/3] adjusted margin on breadcrumb element to look the same as before --- .../components/widgets/buttons/BreadcrumbTrailButtons.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte index 2c286f55b6..21478f1696 100644 --- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte +++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte @@ -26,8 +26,8 @@ .text-button { position: relative; -&:not(:first-child) { - margin-left: -4px; + &:not(:first-child) { + margin-left: 0px; } clip-path: polygon(0% 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 0% 100%, 4px 50%); From 3619882dd4ead4869992507263791388c051c94a Mon Sep 17 00:00:00 2001 From: Nyx Date: Wed, 14 Jan 2026 16:35:05 +0530 Subject: [PATCH 3/3] fixed breadcrumb ui minor edge rounding --- .../widgets/buttons/BreadcrumbTrailButtons.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte index 21478f1696..edc6715d07 100644 --- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte +++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte @@ -27,10 +27,10 @@ position: relative; &:not(:first-child) { - margin-left: 0px; + margin-left: -2px; } - clip-path: polygon(0% 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 0% 100%, 4px 50%); + clip-path: polygon(2px 0%, calc(100% - 4px) 0%, 100% 50%, calc(100% - 4px) 100%, 2px 100%, 6px 50%); padding-left: 12px; padding-right: 12px; @@ -41,7 +41,7 @@ } &:last-of-type { - clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 4px 50%); + clip-path: polygon(2px 0%, 100% 0%, 100% 100%, 2px 100%, 6px 50%); padding-left: 12px; padding-right: 8px;