From dd8b8b5cb9ed70fa729be3ebd5daa0d3d8a5ce0a Mon Sep 17 00:00:00 2001
From: Silversthorn <nakor.silverton@gmail.com>
Date: Wed, 2 Aug 2023 19:26:39 +0200
Subject: [PATCH] Better Display for InApp Documentation

---
 app/frontend/templates/panel/wiki.html | 64 +++++++++++++++-----------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/app/frontend/templates/panel/wiki.html b/app/frontend/templates/panel/wiki.html
index 3550cba4..4e54d60f 100644
--- a/app/frontend/templates/panel/wiki.html
+++ b/app/frontend/templates/panel/wiki.html
@@ -7,8 +7,8 @@
 
 {% block content %}
 
-<div class="content-wrapper">
-
+<!-- Desktop View -->
+<div class="d-none d-sm-block content-wrapper">
     <!-- Page Title Header Starts-->
     <div class="row page-title-header">
         <div class="col-12">
@@ -16,35 +16,45 @@
                 <h4 class="page-title">{{ translate('sidebar', 'documentation', data['lang']) }}</h4>
             </div>
         </div>
-
     </div>
-    <div class="row">
-        <div class="col-md-12 grid-margin">
-            <iframe src="https://docs.craftycontrol.com/" width=100% height=1100px title="crafty's docs"></iframe>
+    <div class="row iframe-row">
+        <div class="col-12 iframe-col">
+            <div class="iframe-wrapper">
+                <iframe title="crafty's docs" src="https://docs.craftycontrol.com/" class="iframe-item"></iframe>
+            </div>
         </div>
-
-
     </div>
-    <!-- content-wrapper ends -->
-    <style>
-        .popover-body {
-            color: white !important;
-            ;
-        }
+</div>
+<!-- Mobile View -->
+<div class="d-sm-none content-wrapper mobile-content-wrapper">
+    <iframe title="crafty's docs" src="https://docs.craftycontrol.com/" class="iframe-item"></iframe>
+</div>
+<!-- content-wrapper ends -->
+<style>
+    .iframe-item {
+        height: 100%;
+        width: 100%;
+        border: none;
+    }
 
-        #desc_id {
-            -ms-overflow-style: none;
-            /* for Internet Explorer, Edge */
-            scrollbar-width: none;
-            /* for Firefox */
-            overflow-y: scroll;
-        }
+    .iframe-wrapper {
+        height: 100%;
+    }
 
-        #desc_id::-webkit-scrollbar {
-            display: none;
-            /* for Chrome, Safari, and Opera */
-        }
-    </style>
+    .iframe-col {
+        height: 100%;
+    }
+
+    .iframe-row {
+        height: 100%;
+        max-height: calc(100% - 63px);
+        padding-bottom: 1rem;
+    }
+
+    .mobile-content-wrapper {
+        padding: 0;
+    }
+</style>
 
 
-    {% end %}
\ No newline at end of file
+{% end %}
\ No newline at end of file