Almost done

1 files changed, 79 insertions, 19 deletions

diff --git a/src/client/util/ReportManager.scss b/src/client/util/ReportManager.scss
index 4ff86fd9c..b3bd998e6 100644
--- a/src/client/util/ReportManager.scss
+++ b/src/client/util/ReportManager.scss
@@ -31,7 +31,8 @@
 // Report
 
 .report-issue {
-    width: 45vw;
+    width: 450px;
+    min-width: 300px;
     padding: 16px;
     padding-top: 32px;
     display: flex;
@@ -61,10 +62,11 @@
 
     .report-selects {
         display: flex;
+        flex-direction: column;
+        align-items: stretch;
         gap: 16px;
 
         .report-select {
-            flex: 1;
             padding: 8px;
             border-color: #c6c6c6;
 
@@ -95,7 +97,7 @@
 
 .view-issues {
     width: 65vw;
-    min-width: 600px;
+    min-width: 500px;
     display: flex;
     gap: 16px;
     height: 100%;
@@ -134,6 +136,12 @@
     }
 }
 
+// video
+
+.default-video::-webkit-media-controls {
+    display: block !important;
+}
+
 // Issue
 
 .issue {
@@ -153,7 +161,6 @@
         cursor: pointer;
         font-size: 14px;
         font-weight: 400;
-        letter-spacing: 1px;
         color: #7f7f7f;
     }
 
@@ -200,26 +207,24 @@
     }
 }
 
-.files {
+.file-list {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
     font-size: 14px;
     color: #7f7f7f;
+    width: 100%;
+    overflow-x: auto;
+    list-style-type: none;
+    display: flex;
+    gap: 16px;
 
-    .file-list {
-        width: 100%;
-        list-style-type: none;
+    .file-name {
+        padding: 8px 12px;
         display: flex;
-        overflow-x: auto;
+        align-items: center;
         gap: 16px;
-        margin: 0;
-        padding: 0;
-
-        .file-name {
-            padding: 8px 12px;
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            white-space: nowrap;
-        }
+        white-space: nowrap;
     }
 }
 
@@ -257,6 +262,61 @@
     }
 }
 
+// Media previews
+
+.report-media-wrapper {
+    position: relative;
+
+    .close-btn {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        opacity: 0;
+    }
+
+    .report-media-content {
+        position: relative;
+        display: inline block;
+        cursor: pointer;
+    }
+
+    .report-media-content::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as desired */
+        opacity: 0;
+        transition: opacity 0.3s ease; /* Transition for smooth effect */
+    }
+
+    &:hover {
+        .report-media-content::after {
+            opacity: 1;
+        }
+
+        .close-btn {
+            opacity: 1;
+        }
+    }
+}
+
+.report-audio-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+@media (max-width: 1100px) {
+    .report-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 2rem;
+    }
+}
+
 // Old code
 
 // <---------------------------------------------------------------------------->