From 24b4b01cd73a1f5338074dba76c242193974ebf5 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 5 Jul 2021 17:31:03 +0200 Subject: [PATCH 1/4] ACustomize scrollbar for sidebar items wrapper Signed-off-by: Philipp Hugenroth --- .../src/layout/Sidebar/Items.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index dbaa50b76e..e53cdfaa57 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -291,10 +291,21 @@ export const SidebarDivider = styled('hr')({ margin: '12px 0px', }); -export const SidebarScrollWrapper = styled('div')({ +export const SidebarScrollWrapper = styled('div')(({ theme }) => ({ flex: '0 1 auto', - overflowY: 'auto', + overflowX: 'hidden', + // 5px space to the right of the scrollbar + width: 'calc(100% - 5px)', // Display at least one item in the container // Question: Can this be a config/theme variable - if so, which? :/ minHeight: '48px', -}); + '&::-webkit-scrollbar': { + backgroundColor: theme.palette.background.default, + width: '5px', + borderRadius: '5px', + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.text.hint, + borderRadius: '5px', + }, +})); From 612e25fd7c5be2366c94f3e518837d6a571f85b3 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 5 Jul 2021 17:34:29 +0200 Subject: [PATCH 2/4] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/young-pigs-beg.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/young-pigs-beg.md diff --git a/.changeset/young-pigs-beg.md b/.changeset/young-pigs-beg.md new file mode 100644 index 0000000000..bbbc7b0f74 --- /dev/null +++ b/.changeset/young-pigs-beg.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Add custom styles for scrollbar of sidebar items wrapper to fix flaky behavior From c97e06e1c15c9ea42b76224a250714bd6afdd1ef Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 5 Jul 2021 18:01:09 +0200 Subject: [PATCH 3/4] Fix changeset spelling Signed-off-by: Philipp Hugenroth --- .changeset/young-pigs-beg.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/young-pigs-beg.md b/.changeset/young-pigs-beg.md index bbbc7b0f74..f40c02b872 100644 --- a/.changeset/young-pigs-beg.md +++ b/.changeset/young-pigs-beg.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Add custom styles for scrollbar of sidebar items wrapper to fix flaky behavior +Add custom styles to Scrollbar of the Sidebar Wrapper to fix flaky behaviour From 0b684849f37df9880621fd82e790f6acf29934c6 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 5 Jul 2021 18:06:57 +0200 Subject: [PATCH 4/4] Please - don't embarrass me - I'm not a native speaker, bot... Signed-off-by: Philipp Hugenroth --- .changeset/young-pigs-beg.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/young-pigs-beg.md b/.changeset/young-pigs-beg.md index f40c02b872..bfdf726911 100644 --- a/.changeset/young-pigs-beg.md +++ b/.changeset/young-pigs-beg.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Add custom styles to Scrollbar of the Sidebar Wrapper to fix flaky behaviour +Add custom styles to scroll bar of the sidebar wrapper to fix flaky behaviour