fix: mobile preview display

Author: 0x4007

static/style/inverted-style.css

@@ -359,6 +359,14 @@
     right: 0;
     background-color: #00ffff;
   }
+  @media screen and (max-width: 319px) {
+    .preview.active{
+      transform: translateX(0);
+    }
+    #issues-container.preview-active{
+      transform: translateX(0);
+    }
+  }
   @media screen and (max-width: 896px) {
     .full {
       display: none !important;
@@ -383,6 +391,8 @@
     #toolbar > button {
       padding: 12px 16px;
     }
+
+
   }
   @media screen and (max-width: 1280px) {
     body {
@@ -464,7 +474,7 @@
     word-break: break-all;
   }
   .preview-body-inner {
-    width: calc(100% - 48px);
+    /* width: calc(100% - 48px); */
     max-width: 640px;
     overflow: scroll;
   }

static/style/style.css

@@ -359,6 +359,7 @@
     right: 0;
     background-color: #0ff;
   }
+
   @media screen and (max-width: 896px) {
     .full {
       display: none !important;
@@ -391,10 +392,10 @@
     .preview.active {
       position: fixed;
       right: 0;
-      transform: translateX(0);
+      transform: translateX(0) !important;
     }
     #issues-container.preview-active {
-      transform: translateX(0);
+      transform: translateX(0) !important;
     }
   }
   #toolbar > button {
@@ -464,7 +465,7 @@
     word-break: break-all;
   }
   .preview-body-inner {
-    width: calc(100% - 48px);
+    /* width: calc(100% - 48px); */
     max-width: 640px;
     overflow: scroll;
   }
@@ -493,7 +494,7 @@
     transform: translateX(0%);
     flex-wrap: wrap;
     overflow: scroll;
-    max-height: calc(100vh - 130px);
+    max-height: calc(100vh - 71px);
     pointer-events: none;
   }
   .close-preview svg {