From 8e9e21c93bf4cbacfb1b06bb3e7b1902eb901fa7 Mon Sep 17 00:00:00 2001
From: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
Date: Wed, 9 Aug 2023 05:26:34 -0400
Subject: [PATCH] unwrap camera stream view on medium sized screens on camera
 view

---
 .../src/components/cameras/CamerasView.vue    | 50 ++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 3823813ae2..6d93f1ee9a 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -82,19 +82,22 @@ const fpsTooLow = computed<boolean>(() => {
       </div>
     </v-card-title>
     <div
-      style="display: flex; flex-direction: column; gap: 12px; align-items: center"
-      class="pb-4"
+      class="stream-container pb-4"
     >
-      <photon-camera-stream
-        v-show="value.includes(0)"
-        stream-type="Raw"
-        style="max-width: 100%"
-      />
-      <photon-camera-stream
-        v-show="value.includes(1)"
-        stream-type="Processed"
-        style="max-width: 100%"
-      />
+      <div class="stream">
+        <photon-camera-stream
+          v-show="value.includes(0)"
+          stream-type="Raw"
+          style="max-width: 100%"
+        />
+      </div>
+      <div class="stream">
+        <photon-camera-stream
+          v-show="value.includes(1)"
+          stream-type="Processed"
+          style="max-width: 100%"
+        />
+      </div>
     </div>
     <v-divider />
     <div class="pt-4">
@@ -143,4 +146,27 @@ th {
   width: 80px;
   text-align: center;
 }
+
+.stream-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.stream {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+@media only screen and (min-width: 512px) and (max-width: 960px) {
+  .stream-container {
+    flex-wrap: nowrap;
+  }
+
+  .stream {
+    width: 50%;
+  }
+}
 </style>