fix disappearing hr

.idea/workspace.xml

@@ -3,7 +3,6 @@
   <component name="ChangeListManager">
     <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/UptimeCard.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeCard.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" afterDir="false" />
@@ -35,10 +34,11 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">
+  <component name="PropertiesComponent"><![CDATA[{
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/components" />
+  "keyToString": {
-    <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
+    "ts.external.directory.path": "/home/nickorlow/programmming/personal/nws-site/node_modules/typescript/lib"
-  </component>
+  }
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/components" />
@@ -68,6 +68,7 @@
       <workItem from="1668047509596" duration="7310000" />
       <workItem from="1673378530233" duration="327000" />
       <workItem from="1673538703809" duration="6147000" />
+      <workItem from="1674698447115" duration="249000" />
     </task>
     <servers />
   </component>

src/components/UptimeCard.css

@@ -40,3 +40,7 @@
 .stat-bad {
    color: #921111
 }
+
+hr {
+    height: 1.1px;
+}

src/components/UptimeComparisonCard.tsx

@@ -36,22 +36,22 @@ export default function UptimeComparisonCard(props: {uptime: UptimeRecord, isSer
                 <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
                    <h4 className={"uptime-lnk"} onClick={()=>setModalOpen(true)}>{props.uptime.name}</h4>
                 </div>
-                <hr/>
+                <hr className={"  w-100"}/>
                 <p className={"fw-bold d-lg-none"}>Uptime (Last Month)</p>
                 <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
                     <p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p>
                 </div>
-                <hr className={"d-lg-block d-none"}/>
+                <hr className={"d-lg-block d-none  w-100"}/>
                 <p className={"fw-bold d-lg-none"}>Uptime ({new Date().getFullYear()} YTD)</p>
                 <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
                     <p  className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p>
                 </div>
-                <hr className={"d-lg-block d-none"}/>
+                <hr className={"d-lg-block d-none  w-100"}/>
                 <p className={"fw-bold d-lg-none"}>Avg Response Time (24hr)</p>
                 <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
                     <p  className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p>
                 </div>
-                <hr className={"d-lg-block d-none"}/>
+                <hr className={"d-lg-block d-none  w-100"} />
                 <p className={"fw-bold d-lg-none"}>Current Status</p>
             <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
 

src/components/UptimeLabelCard.tsx

@@ -11,22 +11,21 @@ export default function UptimeLabelCard() {
             <div style={{height: 25, margin: 0}}>
                 <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Service Name</p>
             </div>
-                <hr/>
+                <hr className={"w-100"}/>
             <div style={{height: 25, margin: 0}}>
                 <p className={"fw-bold"}  style={{fontSize: ".9em"}}>Uptime (Last Month)</p>
             </div>
 
-                <hr/>
+            <hr className={"w-100"}/>
             <div style={{height: 25, margin: 0}}>
                 <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Uptime ({new Date().getFullYear()} YTD)</p>
             </div>
-
+            <hr className={"w-100"}/>
-                <hr/>
             <div style={{height: 25, margin: 0}}>
                 <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Avg Response Time (24hr)</p>
             </div>
 
-                <hr/>
+            <hr className={"w-100"}/>
             <div style={{height: 25, margin: 0}}>
                 <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Current Status</p>
             </div>