From 83760b66f91e96b17f9dea4c0d06c1d77e0bc6a2 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Mon, 5 Oct 2020 20:19:46 +0530
Subject: [PATCH] style(app,completion): Improve mobile layout

---
 src/App.tsx                                                 | 6 +++---
 src/components/CompletionCard/CompletionCard.tsx            | 2 +-
 .../CompletionCard/CompletionCardSourceSnippet.tsx          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5d44978..8c0e94c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,11 +21,11 @@ function App() {
   // }, [inputCode]);
 
   return (
-    <div className="flex flex-col justify-center md:flex-row">
-      <div className="flex-1 max-w-half md:max-w-xl">
+    <div className="flex flex-col md:m-auto md:flex-row md:max-w-screen-lg">
+      <div className="flex-1 md:max-w-half">
         <SourceViewer code={inputCode} onChangeCode={setInputCode} />
       </div>
-      <div className="flex-1 max-w-half md:max-w-xl">
+      <div className="flex-1 md:max-w-half">
         {/* Separator */}
         {/* <div className="w-2 mx-1 bg-gray-800"></div> */}
         <CompletionViewer
diff --git a/src/components/CompletionCard/CompletionCard.tsx b/src/components/CompletionCard/CompletionCard.tsx
index 8d970ad..795c91f 100644
--- a/src/components/CompletionCard/CompletionCard.tsx
+++ b/src/components/CompletionCard/CompletionCard.tsx
@@ -21,7 +21,7 @@ export function CompletionCardFull(props: ICompletionCardProps) {
   return (
     <CompletionCardContext.Provider value={{ completionDetail, code }}>
       <div
-        className={`px-4 py-1 my-1 rounded-md ${getCompletionClassname(
+        className={`px-4 py-2 my-1 rounded-md ${getCompletionClassname(
           completionDetail
         )}`}
       >
diff --git a/src/components/CompletionCard/CompletionCardSourceSnippet.tsx b/src/components/CompletionCard/CompletionCardSourceSnippet.tsx
index b40e98a..51b12d9 100644
--- a/src/components/CompletionCard/CompletionCardSourceSnippet.tsx
+++ b/src/components/CompletionCard/CompletionCardSourceSnippet.tsx
@@ -31,7 +31,7 @@ export function CompletionCardSourceSnippet() {
     <div className={parentClassname}>
       <div className="my-1">From source&nbsp;{directionEmojiJSX}&nbsp;</div>
       <InlineResultViewer
-        className={`px-1 my-1 rounded md:w-fit-content ${inlineCodeExtraClassName}`}
+        className={`px-1 my-1 rounded ${inlineCodeExtraClassName}`}
         code={relatedCode}
       />
     </div>