From 1ab20739cc51aa8d90b122bf021b6d9c313eff86 Mon Sep 17 00:00:00 2001
From: Nicholas Orlowsky <nickorlow@nickorlow.com>
Date: Mon, 23 Jan 2023 20:51:30 -0600
Subject: [PATCH] some mobile fixes

---
 .idea/workspace.xml                     |  7 ++-----
 src/App.css                             |  9 +++++++++
 src/components/UptimeComparisonCard.tsx | 10 +++++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 7c0808c..98cd7be 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,12 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/HomePage.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/HomePage.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/UptimeCard.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeCard.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/src/App.css b/src/App.css
index 34b6d90..f0c0fc3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -58,6 +58,15 @@ p {
   padding-bottom: 5px;
 }
 
+
+@media only screen
+  and (max-width:  992px) {
+  .nws-card-md {
+    border-radius: 20px;
+    background-color: #eee;
+    padding: .75rem;
+  }
+}
 .nws-card {
   border-radius: 20px;
   background-color: #eee;
diff --git a/src/components/UptimeComparisonCard.tsx b/src/components/UptimeComparisonCard.tsx
index 3cb2e26..aa4529c 100644
--- a/src/components/UptimeComparisonCard.tsx
+++ b/src/components/UptimeComparisonCard.tsx
@@ -32,20 +32,20 @@ function getResponseTimeClass(respTime: number) {
 export default function UptimeComparisonCard(props: {uptime: UptimeRecord, isService: boolean}) {
     const [isModalOpen, setModalOpen] = useState(false);
     return(
-        <div className={"col-12 col-md-2 mb-2 p-0 m-0 text-center"}>
-                <div style={{height: 25, margin: 0}}>
+        <div className={"col-12 col-md-2 mb-2 p-0 m-0 text-center nws-card-md"}>
+                <div style={{height: 25, margin: 0}} className={"pt-2 pt-md-0"}>
                    <h4 className={"uptime-lnk"} onClick={()=>setModalOpen(true)}>{props.uptime.name}</h4>
                 </div>
                 <hr/>
                 <p className={"fw-bold d-md-none"}>Uptime (Last Month)</p>
                 <p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p>
-                <hr/>
+                <hr className={"d-md-block d-none"}/>
                 <p className={"fw-bold d-md-none"}>Uptime ({new Date().getFullYear()} YTD)</p>
                 <p  className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p>
-                <hr/>
+                <hr className={"d-md-block d-none"}/>
                 <p className={"fw-bold d-md-none"}>Avg Response Time (24hr)</p>
                 <p  className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p>
-                <hr/>
+                <hr className={"d-md-block d-none"}/>
                 <p className={"fw-bold d-md-none"}>Current Status</p>
                 <div className={`p-1 d-flex justify-content-start w-100`}>
                     <p className={`fw-bold severity-label w-100