From 3270ab6aefc77d76194c2c418d7810b92a1b1ed7 Mon Sep 17 00:00:00 2001
From: minORC <min@openroad.ca>
Date: Fri, 10 May 2024 15:11:19 -0700
Subject: [PATCH] DBC22-2152: Fix camera direction buttons layout on mobile
 (#435)

---
 src/frontend/src/pages/CameraDetailsPage.js   |  9 +++++---
 src/frontend/src/pages/CameraDetailsPage.scss | 23 +++++++++++++++----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/pages/CameraDetailsPage.js b/src/frontend/src/pages/CameraDetailsPage.js
index 0ce75563f..f73e0fdeb 100644
--- a/src/frontend/src/pages/CameraDetailsPage.js
+++ b/src/frontend/src/pages/CameraDetailsPage.js
@@ -384,9 +384,12 @@ export default function CameraDetailsPage() {
                         <img className="colocated-camera-icon" src={colocatedCamIcon} role="presentation" alt="colocated cameras icon" />
                         <span>Direction</span>
                       </span>
-                      {camera.camGroup.map((cam) =>
-                        <Button aria-label={getCameraOrientation(cam.orientation)} className={'camera-direction-btn' + ((camera.orientation == cam.orientation) ? ' current' : '') } key={cam.id} onClick={() => setCamera(cam)}>{cam.orientation}</Button>
-                      )}
+
+                      <div className="camera-orientations-group">
+                        {camera.camGroup.map((cam) =>
+                          <Button aria-label={getCameraOrientation(cam.orientation)} className={'camera-direction-btn' + ((camera.orientation == cam.orientation) ? ' current' : '') } key={cam.id} onClick={() => setCamera(cam)}>{cam.orientation}</Button>
+                        )}
+                      </div>
                     </div>
 
                     <div className="replay-div">
diff --git a/src/frontend/src/pages/CameraDetailsPage.scss b/src/frontend/src/pages/CameraDetailsPage.scss
index e57252d48..57c92ec69 100644
--- a/src/frontend/src/pages/CameraDetailsPage.scss
+++ b/src/frontend/src/pages/CameraDetailsPage.scss
@@ -2,6 +2,7 @@
 
 .camera-page {
   position: relative;
+  overflow-x: hidden;
 
   .network-error, .server-error {
     @media (max-width: 768px) {
@@ -209,8 +210,7 @@
         align-items: flex-start;
 
         @media (min-width: 576px) {
-          flex-grow: 1;
-          display: block;
+          flex-direction: row;
         }
 
         .btn.camera-direction-btn {
@@ -419,6 +419,7 @@
       flex-direction: row;
       align-items: flex-start;
       margin-top: 0.5rem;
+      position: relative;
 
       @media (min-width: 576px) {
         justify-content: space-between;
@@ -441,19 +442,33 @@
       .replay-the-day {
         .form-switch {
           display: flex;
+          flex-direction: column;
           align-items: center;
           margin-bottom: 0;
           padding-left: 0;
 
+          @media (min-width: 576px) {
+            flex-direction: row;
+          }
+
           .form-check-input, .form-check-label {
             cursor: pointer;
           }
 
           .form-check-input {
             height: 20px;
-            margin: 0;
-            margin-left: 8px;
+            margin-top: 10px;
+            margin-left: 0;
             order: 2;
+            position: absolute;
+            top: 30px;
+            left: 0;
+
+            @media (min-width: 576px) {
+              margin-top: 0;
+              margin-left: 8px;
+              position: static;
+            }
           }
 
           .form-check-label {