fix: fix overflow style in preview

ambar · Apr 26, 2024 · 055676d · 055676d
1 parent 691d998
commit 055676d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/example/console-only.ts b/example/console-only.ts
@@ -0,0 +1,3 @@
+{
+  console.info(1)
+}
diff --git a/example/values.ts 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
@@ -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>
   )