fix: Support auto full-screen in iframe (#245)

casbin · Jul 20, 2024 · fa2535d · fa2535d
1 parent 0751482
commit fa2535d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -322,3 +322,21 @@ html[data-theme="dark"] .theme-doc-sidebar-container div[title="Expand sidebar"]
     --ifm-spacing-horizontal: 1rem;
   }
 }
+
+.editor-container {
+  height: calc(100vh - var(--ifm-navbar-height));
+  overflow: hidden;
+}
+
+.editor-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+.comments-container {
+  width: 60vw;
+  margin: 0 auto;
+  padding-top: 20px;
+}
diff --git a/src/pages/editor.js b/src/pages/editor.js
@@ -5,16 +5,14 @@ import Giscus from "@giscus/react";
 function Editor() {
   return (
     <Layout title="Editor" description="Casbin Online Editor">
-      <div>
+      <div className="editor-container">
         <iframe
           src="https://editor.casbin.org/"
-          style={{width: "100%", height: "850px", display: "block"}}
+          className="editor-iframe"
           title="Casbin-editor"
-          scrolling="no"
         />
       </div>
-      <br />
-      <div style={{width: "60vw", margin: "0 auto"}}>
+      <div className="comments-container">
         <Giscus
           id="comments"
           repo="casbin/casbin"