From 641bc802847bb039d48b2d707a2ad0b6a705e258 Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Fri, 10 Nov 2023 15:32:59 -0800
Subject: [PATCH] DBC22-1181: fix for friendly time tooltip clipping off at
 edges

---
 src/frontend/src/Components/FriendlyTime.scss | 42 +++++++------------
 .../src/Components/cameras/WebcamCard.scss    | 37 ++++++++++++++++
 src/frontend/src/pages/CamerasPage.js         |  2 +-
 3 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/Components/FriendlyTime.scss b/src/frontend/src/Components/FriendlyTime.scss
index 7ab952a3e..2f2809111 100644
--- a/src/frontend/src/Components/FriendlyTime.scss
+++ b/src/frontend/src/Components/FriendlyTime.scss
@@ -4,8 +4,10 @@
   text-decoration: underline;
   cursor: pointer;
   position: relative;
+  width: fit-content;
 
   &__tooltip {
+    font-size: 0.75rem;
     visibility: hidden;
     word-wrap: break-word;
     background-color: $Grey90;
@@ -17,38 +19,22 @@
     white-space: nowrap;
     z-index: 1;
     position: absolute;
-    top: 0;
-    left: -10px;
-    transform: translate(-100%, -25%);
-    margin-right: 7px;
-
-    @media (min-width: 576px) {
-      top: 100%;
-      left: 50%;
-      transform: translate(-50%, 0);
-      margin-top: 7px;
-    }
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    margin-top: 7px;
 
     &:before {
       content: "";
-      border-top: 7px solid transparent;
-      border-bottom: 7px solid transparent;
-      border-left: 7px solid $Grey90;
+      border-right: 7px solid transparent;
+      border-left: 7px solid transparent;
+      border-bottom: 7px solid $Grey90;
       position: absolute;
-      top: 7px;
-      left: 100%;
-      transform: translate(0, 25%);
-
-      @media (min-width: 576px) {
-        border-right: 7px solid transparent;
-        border-left: 7px solid transparent;
-        border-bottom: 7px solid $Grey90;
-        top: initial;
-        left: 50%;
-        bottom: 100%;
-        transform: translate(-50%, 0);
-        margin-left: 7px;
-      }
+      top: initial;
+      left: 50%;
+      bottom: 100%;
+      transform: translate(-50%, 0);
+      margin-left: 7px;
     }
 
     &.showTooltip {
diff --git a/src/frontend/src/Components/cameras/WebcamCard.scss b/src/frontend/src/Components/cameras/WebcamCard.scss
index 0cd4b9b5e..bbcdadb3a 100644
--- a/src/frontend/src/Components/cameras/WebcamCard.scss
+++ b/src/frontend/src/Components/cameras/WebcamCard.scss
@@ -120,6 +120,43 @@
         }
         margin-right: 10px;
       }
+
+      .friendly-time__tooltip {
+        top: 0;
+        left: -10px;
+        transform: translate(-100%, -25%);
+        margin-right: 7px;
+
+        @media (min-width: 576px) {
+          top: 100%;
+          left: 50%;
+          transform: translate(-50%, 0);
+          margin-top: 7px;
+        }
+
+        &:before {
+          content: "";
+          border-top: 7px solid transparent;
+          border-bottom: 7px solid transparent;
+          border-left: 7px solid $Grey90;
+          position: absolute;
+          top: 7px;
+          left: 100%;
+          transform: translate(0, 25%);
+          margin-left: 0;
+    
+          @media (min-width: 576px) {
+            border-right: 7px solid transparent;
+            border-left: 7px solid transparent;
+            border-bottom: 7px solid $Grey90;
+            top: initial;
+            left: 50%;
+            bottom: 100%;
+            transform: translate(-50%, 0);
+            margin-left: 7px;
+          }
+        }
+      }
     }
   }
 
diff --git a/src/frontend/src/pages/CamerasPage.js b/src/frontend/src/pages/CamerasPage.js
index 8a158731b..66bd7446f 100644
--- a/src/frontend/src/pages/CamerasPage.js
+++ b/src/frontend/src/pages/CamerasPage.js
@@ -8,7 +8,7 @@ import Footer from '../Footer.js';
 
 export default function CameraPage() {
   return (
-    <div className="camera-page">
+    <div className="cameras-page">
       <PageHeader
         title="Cameras"
         description="Search by camera name to filter results or scroll to view all cameras sorted by highway.">