From 095ee3d213140dc091ba17a9971d0bc783a2348d Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 16 Sep 2024 11:23:41 +0300
Subject: [PATCH] PTViewer improvements

---
 apps/showcase/assets/styles/layout/_doc.scss  | 43 +++++++++++++++++++
 .../assets/styles/layout/_responsive.scss     | 18 +++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/apps/showcase/assets/styles/layout/_doc.scss b/apps/showcase/assets/styles/layout/_doc.scss
index bdd532c67..55dea0f82 100644
--- a/apps/showcase/assets/styles/layout/_doc.scss
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/apps/showcase/assets/styles/layout/_responsive.scss b/apps/showcase/assets/styles/layout/_responsive.scss
index c63712e8f..6f34ce658 100644
--- a/apps/showcase/assets/styles/layout/_responsive.scss
+++ b/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;
         }
     }
-}
\ No newline at end of file
+}