made it sticky

src/App.css

@@ -4,4 +4,5 @@
   padding: 2rem;
   text-align: center;
   cursor: default;
+  overflow: visible;
 }

src/Component/CodeRepo/CodeRepo.css

@@ -9,14 +9,11 @@
     display: flex;
     align-items: baseline;
     justify-content: baseline;
-
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
 }
 
 .file-manager {
-    position: relative;
+    position: sticky;
+    top: 0;
     width: 20%;
     min-height: inherit;
     padding: 10px 20px;
@@ -37,9 +34,29 @@
     flex-wrap: wrap;
 }
 
+.code div {
+    position: sticky;
+    top: 0;
+}
+
+.code-name{
+    z-index: 10;
+    width: 100%;
+    background-color: #242425;
+    padding: 5px;
+}
+
 .coding {
     position: sticky;
-    width: 95%;
+    min-width: 95%;
+    max-width: 95%;
+    border-radius: 4px;
+}
+
+.coding code {
+    position: sticky;
+    min-width: 95%;
+    max-width: 95%;
     border-radius: 4px;
 }
 
@@ -70,12 +87,20 @@
     padding-left: 15px;
 }
 
-@media screen and (max-wdth: 900px) {
+@media screen and (max-width: 900px) {
     .repo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         flex-wrap: wrap;
     }
 
-    .file-manage {
-        width: 80%;
+    .file-manager {
+        min-width: 80%;
+        position: relative;
+    }
+
+    .code {
+        border-left: none;
     }
 }

src/Component/CodeRepo/CodeRepo.tsx

@@ -5,8 +5,10 @@ import "./CodeRepo.css";
 
 const filePath = ["Code/_.cpp", "Code/___.cpp", "Code/README.md"];
 
+const defaultFile = 1;
+
 const CodeRepo = () => {
-  const [selectedIndex, setSelectedIndex] = useState<number>(3);
+  const [selectedIndex, setSelectedIndex] = useState<number>(defaultFile);
   const [selectedCode, setSelectedCode] = useState<string>("");
 
   const getCode = async (index: number) => {
@@ -23,7 +25,7 @@ const CodeRepo = () => {
   };
 
   useEffect(() => {
-    getCode(3);
+    getCode(defaultFile);
   }, []);
 
   const updateSelection = (index: number) => {
@@ -63,10 +65,12 @@ const CodeRepo = () => {
           </div>
         </div>
         <div className="code">
-          CODE:{" "}
-          {filePath[selectedIndex - 1].substring(
-            filePath[selectedIndex - 1].lastIndexOf("/") + 1
-          )}
+          <div className="code-name">
+            CODE:{" "}
+            {filePath[selectedIndex - 1].substring(
+              filePath[selectedIndex - 1].lastIndexOf("/") + 1
+            )}
+          </div>
           <SyntaxHighlighter
             language="cpp"
             style={codeStyle}

src/index.css

@@ -26,4 +26,6 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  overflow: visible;
 }