PTViewer improvements

apps/showcase/assets/styles/layout/_doc.scss

@@ -432,3 +432,46 @@
         }
     }
 }
+
+.doc-ptviewerwrapper {
+    display: flex;
+    flex-direction: row;
+    padding: 0 !important;
+
+    .doc-ptviewer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-color: var(--p-content-border-color);
+        border-width: 0 1px 0 0;
+        padding: 1rem;
+        width: 75%;
+    }
+
+    .doc-ptoptions {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        padding: .5rem;
+        width: 25%;
+        max-height: 720px;
+        overflow-y: auto;
+
+        .doc-ptoption {
+            display: flex;
+            flex-direction: column;
+            padding: .5rem;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--p-content-hover-background);
+            }
+
+            .doc-ptoption-text {
+                color: var(--p-text-muted-color);
+                font-size: 0.875rem;
+                line-height: 1.25rem;
+            }
+        }
+    }
+}

apps/showcase/assets/styles/layout/_responsive.scss

@@ -13,7 +13,7 @@
 }
 
 @media screen and (max-width: 1199px) {
-    .layout-topbar-inner {   
+    .layout-topbar-inner {
         padding-left: 2rem;
         padding-right: 2rem;
 
@@ -128,6 +128,20 @@
     .DocSearch-Container {
         position: fixed !important;
     }
+
+    .doc-ptviewerwrapper {
+        flex-direction: column;
+
+        .doc-ptviewer {
+            width: 100%;
+            border-width: 0 0 1px 0;
+        }
+
+        .doc-ptoptions {
+            width: 100%;
+            padding: 1rem;
+        }
+    }
 }
 
 @media screen and (max-width: 575px) {
@@ -174,4 +188,4 @@
             display: none;
         }
     }
-}
+}