Add git api calls on frontend

frontend/src/App.scss

@@ -6,13 +6,25 @@ $navbar-height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 $padding;
-  height: $navbar-height;
 }
 
 .sidebar {
-  overflow-y: auto;
+  overflow: auto;
   padding: $padding;
+
+  .file-tree-container {
+    width: 100%;
+
+    &>div {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+}
+
+.page-content {
+  padding: 0 $padding;
 }
 
 .main-content {
@@ -25,7 +37,7 @@ $navbar-height: 64px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $padding;
+  padding: 0 $padding;
 
   .breadcrumbs-container {
     flex-grow: 1;
@@ -50,6 +62,7 @@ $navbar-height: 64px;
 .setting-group {
   margin-bottom: 1rem;
 }
+
 .setting-item {
   display: flex;
   justify-content: space-between;
@@ -64,7 +77,8 @@ $navbar-height: 64px;
   flex-direction: column;
 }
 
-.editor-container, .markdown-preview {
+.editor-container,
+.markdown-preview {
   flex-grow: 1;
   overflow-y: auto;
   padding: $padding;
@@ -72,7 +86,7 @@ $navbar-height: 64px;
 
 .editor-container {
   height: 100%;
-  
+
   .cm-editor {
     height: 100%;
   }
@@ -82,6 +96,10 @@ $navbar-height: 64px;
   }
 }
 
+.tree {
+  padding-top: $padding;
+}
+
 // Geist UI Tree component customization
 :global {
   .file-tree {