[GEN-1746]: fix scrollbar issues (#1848)

odigos-io · Nov 25, 2024 · 186b890 · 186b890
1 parent 077617c
commit 186b890
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css
@@ -2,3 +2,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@100;200;300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');
+
+* {
+  scrollbar-color: black transparent;
+  scrollbar-width: thin;
+}
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -7,11 +7,10 @@ import { ApolloWrapper } from '@/lib';
 import { ThemeProviderWrapper } from '@/styles';
 
 const LAYOUT_STYLE: React.CSSProperties = {
-  margin: 0,
   position: 'fixed',
-  scrollbarWidth: 'none',
   width: '100vw',
   height: '100vh',
+  margin: 0,
   backgroundColor: '#111111',
 };
 

diff --git a/...end/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx b/...end/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx
@@ -18,14 +18,14 @@ const HorizontalScroll = styled.div`
   align-items: center;
   padding: 12px;
   border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  overflow-x: auto;
+  overflow-x: scroll;
 `;
 
 const VerticalScroll = styled.div`
   display: flex;
   flex-direction: column;
   padding: 12px;
-  overflow-y: auto;
+  overflow-y: scroll;
 `;
 
 export const SearchResults = ({ searchText, onClose }: Props) => {