From cb2280acc17552621e41a51ae9580a3b19e97e89 Mon Sep 17 00:00:00 2001
From: Kashyap Chaturvedula <kashyapc@seas.upenn.edu>
Date: Fri, 25 Mar 2022 21:37:12 -0400
Subject: [PATCH] Updated styling for the GuidePage to fix the scrolling and
 sizing issues

---
 src/GuidePage.css | 16 ++++++++++++----
 src/GuidePage.js  | 16 ++++++++--------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/GuidePage.css b/src/GuidePage.css
index e7883be..25f1140 100644
--- a/src/GuidePage.css
+++ b/src/GuidePage.css
@@ -1,3 +1,12 @@
+.guide-container {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: hidden;
+}
+
 .guide-info {
   margin-right: -175px;
   margin-left: 35%;
@@ -20,11 +29,10 @@
   overflow-y: scroll;
   padding: 25px;
   font-style: normal;
-  font-size: 20px;
+  font-size: 15px;
   line-height: 31px;
-  max-height: 800px;
-  min-height: 800px;
-  height: auto;
+  height: 65%;
+  max-height: 675px;
 }
 
 .GuidePage-container {
diff --git a/src/GuidePage.js b/src/GuidePage.js
index 6ab793d..425bfa8 100644
--- a/src/GuidePage.js
+++ b/src/GuidePage.js
@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import './GuidePage.css';
+import { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import "./GuidePage.css";
 
 const GuidePage = (props) => {
   const path =
-    'https://raw.githubusercontent.com/pennapps/guides/main/' +
+    "https://raw.githubusercontent.com/pennapps/guides/main/" +
     props.guide +
-    '.md';
-  const [pageState, loadFile] = useState('');
+    ".md";
+  const [pageState, loadFile] = useState("");
   useEffect(() => {
     fetch(path).then((file) =>
-      file.text().then((text) => loadFile(text.slice(props.guide.length + 2))),
+      file.text().then((text) => loadFile(text.slice(props.guide.length + 2)))
     );
   }, [path, props.guide]);
   return (
-    <div>
+    <div className="guide-container">
       <nav className="guide-nav">
         <h3>PennApps Mentoring</h3>
       </nav>