From 141c45027f2846ad6235a61358e0d41f8cfbab94 Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camscode.com>
Date: Tue, 14 Jun 2022 21:20:02 -0400
Subject: [PATCH] Bai - Fixed content overflow on mobile

---
 src/components/Bai.js      | 11 +++++++----
 src/components/css/App.css |  9 +++++----
 src/components/css/Bai.css |  7 ++++++-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/Bai.js b/src/components/Bai.js
index 3d56f67..5c473b6 100644
--- a/src/components/Bai.js
+++ b/src/components/Bai.js
@@ -91,10 +91,13 @@ class Bai extends React.Component {
     return (
         <div className="Bai">
             {content}
-            <h1>About</h1>
-            <p> You can find the source, dataset and model created for BAI on github at 
-                <a href="https://www.github.com/RaspberryProgramming/BAI"> https://www.github.com/RaspberryProgramming/BAI</a>
-            </p>
+            <div className="about">
+              <h1>About</h1>
+              <p>
+                You can find the source, dataset and model created for BAI on github at 
+              </p>
+              <a href="https://www.github.com/RaspberryProgramming/BAI"> https://www.github.com/RaspberryProgramming/BAI</a>
+            </div>
         </div>
     );
   }
diff --git a/src/components/css/App.css b/src/components/css/App.css
index bb99752..7168d8c 100644
--- a/src/components/css/App.css
+++ b/src/components/css/App.css
@@ -2,6 +2,10 @@
     box-sizing: border-box;
 }
 
+a {
+    overflow-wrap: anywhere;
+}
+
 a:link {
     color: #FFFFFF;
     text-decoration: none;
@@ -69,10 +73,7 @@ html, body {
 }
 
 @media only screen and (max-width: 600px) {
-    .App {
-        flex-direction: column-reverse;
-    }
     .App .app-content {
-        margin-bottom: 5.5rem;
+        margin-bottom: 4rem;
     }
 }
\ No newline at end of file
diff --git a/src/components/css/Bai.css b/src/components/css/Bai.css
index e773b8e..2133efa 100644
--- a/src/components/css/Bai.css
+++ b/src/components/css/Bai.css
@@ -3,13 +3,18 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 10%;
+    padding: 2rem;
 }
 
 .Bai * {
     margin-top: 5px;
 }
 
+.Bai .about {
+    display: flex;
+    flex-direction: column;
+}
+
 .Bai h1 {
     margin-left: auto;
     margin-right: auto;