Fixed width of AppLayout views to ensure they show the drawer when lo…

…aded on normal sized screens
webforj · Aug 24, 2023 · 3e82a49 · 3e82a49
1 parent 85978cc
commit 3e82a49
Showing 1 changed file with 43 additions and 42 deletions.
diff --git a/src/components/DocsTools/AppLayoutViewer.js b/src/components/DocsTools/AppLayoutViewer.js
@@ -1,42 +1,43 @@
-/** @jsx jsx*/
-
-import React from 'react'
-import { jsx, css } from '@emotion/react';
-
-export default function AppLayoutViewer({url, mobile}) {
-
-    const demoStyles = css`
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 4rem 0;
-        width: 100%;
-    `
-
-    const demoPreview = css`
-        position: relative;
-        width : 100%;
-        max-width: ${mobile == 'true' ? '375px' : '100%'};
-        height: ${mobile == 'true' ? '700px' : '600px'};
-        border-radius: 32px;
-        overflow: hidden;
-        box-shadow: 0 0 0 10px black, 0 3px 22px black;
-        outline: thin solid black;
-    `
-
-    const demoContent = css`
-        width: 100%;
-        height: 100%;
-        background: var(--bbj-surface-3);
-    `
-
-  return (
-    <div css={demoStyles}>
-        <div css={demoPreview}>
-            <iframe src={url} css={demoContent} loading='lazy'>
-
-            </iframe>
-        </div>
-    </div>
-  );
-}
+/** @jsx jsx*/
+
+import React from 'react'
+import { jsx, css } from '@emotion/react';
+
+export default function AppLayoutViewer({url, mobile}) {
+
+    const demoStyles = css`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 4rem 0;
+        width: 110%;
+        margin-left: -5%;
+    `
+
+    const demoPreview = css`
+        position: relative;
+        width : 100%;
+        max-width: ${mobile == 'true' ? '375px' : '100%'};
+        height: ${mobile == 'true' ? '700px' : '600px'};
+        border-radius: 32px;
+        overflow: hidden;
+        box-shadow: 0 0 0 10px black, 0 3px 22px black;
+        outline: thin solid black;
+    `
+
+    const demoContent = css`
+        width: 100%;
+        height: 100%;
+        background: var(--bbj-surface-3);
+    `
+
+  return (
+    <div css={demoStyles}>
+        <div css={demoPreview}>
+            <iframe src={url} css={demoContent} loading='lazy'>
+
+            </iframe>
+        </div>
+    </div>
+  );
+}