From cdb3c2041d5fbaea1ad97712a5884a044e853d20 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 9 May 2021 16:35:55 +0700
Subject: [PATCH] Tweak layout

---
 client/index.css                     | 16 +++++++++-------
 client/placeholders/BrowserFrame.tsx | 12 ++++--------
 client/placeholders/browserFrame.css | 14 +-------------
 3 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/client/index.css b/client/index.css
index d9a8c6a..942a095 100644
--- a/client/index.css
+++ b/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;
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index 6dda299..acae7c8 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/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>
+        </>
     );
 };
 
diff --git a/client/placeholders/browserFrame.css b/client/placeholders/browserFrame.css
index ad0f019..48201d0 100644
--- a/client/placeholders/browserFrame.css
+++ b/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;
 }
\ No newline at end of file