style(app,completion): Improve mobile layout

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

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
         )}`}
       >

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>