DBC22-1181: fix for friendly time tooltip clipping off at edges

bcgov · Nov 15, 2023 · 641bc80 · 641bc80
1 parent d0dcb91
commit 641bc80
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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.">