Tweak layout

client/index.css

@@ -41,19 +41,18 @@ a {
     max-width: 80rem;
     padding: 0 1rem;
 }
-.content {
-    display: flex;
-    margin: 4rem 0;
-}
 .main {
     flex: 1;
+    overflow: hidden;
+    padding: 4rem 0;
 }
 .sidebar {
     display: none;
+    padding: 4rem 0;
 }
 
 /* Sidebar */
-.sidebar__inner {
+.sidebar__inner {    
     position: sticky;
     top: 1rem;
 }
@@ -100,11 +99,11 @@ pre {
     color: #FFF;
     font-family: "Source Code Pro", monospace;
     font-size: 1rem;
-    height: 100%;
     line-height: 1.5;
     margin: 0px;
-    overflow: auto;
+    overflow-x: auto;
     padding: 1rem;
+    white-space: pre;
 }
 
 .token.tag,
@@ -157,6 +156,9 @@ pre {
 
 /* Responsive */
 @media (min-width: 640px) {
+    .content {
+        display: flex;
+    }
     .sidebar {
         display: block;
         flex: 0 0 8rem;

client/placeholders/BrowserFrame.tsx

@@ -15,17 +15,13 @@ interface BrowserFrameProps {
 
 const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
     return (
-        <div className="demo">
-            <div className="demo__html">
-                <SampleCode fullHeight={true} lang="html" code={html} />
-            </div>
-            <div className="demo__css">
-                <SampleCode fullHeight={true} lang="css" code={css} />
-            </div>
+        <>
+            <SampleCode fullHeight={true} lang="html" code={html} />
+            <SampleCode fullHeight={true} lang="css" code={css} />
             <div className="demo__live">
                 {children}
             </div>
-        </div>
+        </>
     );
 };
 

client/placeholders/browserFrame.css

@@ -3,20 +3,8 @@
  * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-.demo {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 0.5rem;
-    overflow: hidden;
-}
-
 .demo__live {
+    border: 1px solid rgba(0, 0, 0, 0.2);
     height: 32rem;
     overflow: auto;
-}
-
-.demo__css,
-.demo__html {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
-    height: 16rem;
-    overflow: auto;
 }