From 2f0861b12946cbe21f05f7eca074b7533e0ff36f Mon Sep 17 00:00:00 2001
From: Martin Wittlinger <wittlinger.martin@gmail.com>
Date: Sat, 13 Jan 2024 13:53:36 +0100
Subject: [PATCH] style: Adjust layout proportions and update scrollbar styles

The Grid item proportions in PageLayout.tsx got adjusted to provide more space for main content. Simultaneously, specific custom styles to the webkit scrollbar were added in index.tsx. These changes will improve readability and overall UI look.
---
 frontend/src/index.tsx            | 14 ++++++++++++++
 frontend/src/pages/PageLayout.tsx |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 293464b9c..9699e0136 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -97,6 +97,20 @@ const themeOptions: ThemeOptions = {
     fontWeightMedium: 500,
   },
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        '*::-webkit-scrollbar': {
+          width: '5px',
+        },
+        '*::-webkit-scrollbar-track': {
+          background: '#E4EFEF',
+        },
+        '*::-webkit-scrollbar-thumb': {
+          background: '#1D388F61',
+          borderRadius: '2px',
+        },
+      },
+    },
     MuiCard: {
       styleOverrides: {
         root: {
diff --git a/frontend/src/pages/PageLayout.tsx b/frontend/src/pages/PageLayout.tsx
index 3dc54cf73..e3558894f 100644
--- a/frontend/src/pages/PageLayout.tsx
+++ b/frontend/src/pages/PageLayout.tsx
@@ -15,10 +15,10 @@ export default function PageLayout({ children }: PageLayoutProps) {
         justifyContent="flex-start" // added this
         style={{ height: 'calc(100%) ', flexWrap: 'nowrap' }}
       >
-        <Grid item xs={2.5}>
+        <Grid item xs={2}>
           <Sidebar />
         </Grid>
-        <Grid item xs={9} style={{ overflow: 'auto' }}>
+        <Grid item xs={10} style={{ overflow: 'auto' }}>
           {children}
         </Grid>
       </Grid>