From fa19555622f609242fb5efbe109a211f04aaaa09 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Sun, 23 Apr 2023 15:53:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96space=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E4=B8=8A=E4=B8=8B=E9=97=B4=E8=B7=9D;=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=B2=99=E7=9B=92=E7=9A=84=E9=AB=98=E5=BA=A6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/sandbox/index.js | 8 +++++++-
 src/space/index.js   | 6 ++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/sandbox/index.js b/src/sandbox/index.js
index f34c934..dcd5300 100644
--- a/src/sandbox/index.js
+++ b/src/sandbox/index.js
@@ -195,6 +195,12 @@ class Sandbox extends Component {
     }
   }
 
+  contentLoaded(ev) {
+    let elem = ev.target
+    let body = elem.contentWindow.document.body
+    elem.style.height = body.clientHeight + 'px'
+  }
+
   mounted() {
     //
     this.#cache.preview.panel = this.$refs.preview
@@ -228,7 +234,7 @@ class Sandbox extends Component {
         ></wc-icon>
       </header>
       <div class="content">
-        <iframe ref="preview"></iframe>
+        <iframe ref="preview" @load=${this.contentLoaded}></iframe>
         <slot name="javascript"></slot>
         <slot name="html"></slot>
         <slot name="css"></slot>
diff --git a/src/space/index.js b/src/space/index.js
index 22efad4..0e91287 100644
--- a/src/space/index.js
+++ b/src/space/index.js
@@ -8,6 +8,8 @@ import { css, html, Component } from '@bd/core'
 
 class Space extends Component {
   static styles = css`
+    @use 'sass:math';
+
     :host {
       display: block;
     }
@@ -16,7 +18,7 @@ class Space extends Component {
       flex-wrap: wrap;
       align-items: center;
       width: 100%;
-      padding: 12px 0;
+      padding: 6px 0;
       gap: 12px;
     }
     :host([vertical]) {
@@ -41,7 +43,7 @@ class Space extends Component {
     @loop $k, $v in $gaps {
       :host([gap='#{$k}']) {
         .container {
-          padding: $v 0;
+          padding: math.div($v, 2) 0;
           gap: $v;
         }
       }