From 055676d9494a253e24044297fea21325eef450e1 Mon Sep 17 00:00:00 2001
From: ambar <ambar.lee@gmail.com>
Date: Fri, 26 Apr 2024 09:59:19 +0800
Subject: [PATCH] fix: fix overflow style in preview

---
 example/console-only.ts |  3 +++
 example/values.ts       | 22 ++++++++++++++++++++++
 src/preview.tsx         | 19 ++++++-------------
 3 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 example/console-only.ts
 create mode 100644 example/values.ts

diff --git a/example/console-only.ts b/example/console-only.ts
new file mode 100644
index 0000000..22102e7
--- /dev/null
+++ b/example/console-only.ts
@@ -0,0 +1,3 @@
+{
+  console.info(1)
+}
diff --git a/example/values.ts b/example/values.ts
new file mode 100644
index 0000000..ba1cf17
--- /dev/null
+++ b/example/values.ts
@@ -0,0 +1,22 @@
+// Circular
+let obj: Record<any, any> = {a: 1, obj: null}
+obj.obj = obj
+obj
+
+// Date
+new Date()
+
+// RegExp
+;/r/gi
+
+// BigInt
+3n
+
+// Symbol
+Symbol('foo')
+
+// overflow test
+'xy'.repeat(200)
+
+// overflow test
+console.info('xy'.repeat(200))
diff --git a/src/preview.tsx b/src/preview.tsx
index 5c6c91a..2db6597 100644
--- a/src/preview.tsx
+++ b/src/preview.tsx
@@ -281,7 +281,10 @@ const App = () => {
     <div
       css={{
         display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
+        gridTemplateColumns: 'auto',
+        '&:has(>[data-console])': {
+          gridTemplateColumns: '1fr 1fr',
+        },
         height: '100%',
         fontFamily: 'var(--vscode-editor-font-family)',
         fontSize: 'var(--vscode-editor-font-size)',
@@ -297,17 +300,6 @@ const App = () => {
           background: inherit;
         }
       `}</style>
-      {/* <div>
-        <vscode-radio-group>
-          <label slot="label">Build Target</label>
-          <vscode-radio value="web" checked>
-            web
-          </vscode-radio>
-          <vscode-radio value="node">
-            node
-          </vscode-radio>
-        </vscode-radio-group>
-      </div> */}
       <pre
         css={{
           width: '100%',
@@ -319,13 +311,14 @@ const App = () => {
           boxSizing: 'border-box',
           fontFamily: 'inherit',
           fontSize: 'inherit',
+          overflowX: 'auto',
         }}
       >
         {content}
       </pre>
       {/* TODO: filter console calls in preview, which returns `undefined` */}
       {logs?.length > 0 && (
-        <StyledConsole logs={logs} shouldDecode={!isBrowser} />
+        <StyledConsole data-console logs={logs} shouldDecode={!isBrowser} />
       )}
     </div>
   )