DBC22-2282: Fix for timestamps on camera images offset

bcgov · Jun 5, 2024 · 8c447b0 · 8c447b0
1 parent 0d84a62
commit 8c447b0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/frontend/src/Components/map/panels/mapPopup.scss b/src/frontend/src/Components/map/panels/mapPopup.scss
@@ -36,22 +36,22 @@
       }
     }
 
-    .clip {
-      margin-bottom: -18px;  /* for allowing overlap at bottom of cam image */
-    }
-
     &__image {
+      position: relative;
+
       img {
         width: 100%;
       }
 
       .timestamp {
         background-color: $Black;
-        position: relative;
+        position: absolute;
+        bottom: 0;
         padding: 0 10px;
         display: flex;
         color: $White;
         align-items: baseline;
+        width: 100%;
 
         p {
           color: $White;

diff --git a/src/frontend/src/pages/CameraDetailsPage.scss b/src/frontend/src/pages/CameraDetailsPage.scss
@@ -249,10 +249,9 @@
       & > .tab-pane {
 
         .image-wrap {
-          padding-bottom: 1rem;
+          position: relative;
 
           .card-img-box {
-            margin-bottom: -16px;
 
             &.unavailable {
               background-color: $Surface-status-red;
@@ -390,7 +389,9 @@
             padding: 0 10px;
             display: flex;
             justify-content: space-between;
-            position: relative;
+            position: absolute;
+            bottom: 0;
+            width: 100%;
 
             p {
               color: $White;