Refactor StatusBar component and adjust CSS for improved layout and styling

Frontend/src/components/StatusBar.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const StatusBar = ({ togglePanel, panelVisible }) => {
   return (
-    <div className="status-bar">
+    <div className="status-bar ">
       {/* Left Section of the Status Bar */}
       <div className="status-bar-left">
         {/* Branch Indicator */}

Frontend/src/index.css

@@ -57,12 +57,12 @@ body {
   display: flex;
   flex-direction: column;
   background-color: var(--vscode-activityBar-background);
-  z-index: 10;
-  width: 50px;
-  height: 100%;
-  position: fixed; /* Change to fixed to avoid layout issues */
+  z-index: 10; /* Lower z-index than the StatusBar */
+  position: fixed;
   top: 0;
   left: 0;
+  height: calc(100% - 22px); /* Subtract the height of the StatusBar */
+  width: 50px;
 }
 
 .activity-bar button {
@@ -404,7 +404,7 @@ body {
   flex: 1;
   overflow: auto;
   font-family: "Consolas", "Courier New", monospace;
-  font-size: 13px;
+  font-size: 10px;
   padding: 8px;
   padding: 10px;
   font-family: 'Consolas', 'Courier New', monospace;