feat(completion): Comp SourceSnippet - add compact layout for one-line related code

src/components/CompletionCard/CompletionCardSourceSnippet.tsx

@@ -8,18 +8,31 @@ import { getCodeTextFromCompletion } from "./utils";
 export function CompletionCardSourceSnippet() {
   const { completionDetail, code } = useCompletionCardContext();
 
+  const relatedCode = getCodeTextFromCompletion(code, completionDetail);
+
+  const hasNewline = relatedCode.includes("\n");
+
+  const directionEmojiJSX = hasNewline ? (
+    <span role="img" aria-label="See below">
+      ⤵️
+    </span>
+  ) : (
+    <span role="img" aria-label="See to the right" className="pr-1">
+      👉
+    </span>
+  );
+
+  const parentClassname = hasNewline ? "" : "flex flex-row items-center";
+  const inlineCodeExtraClassName = hasNewline
+    ? "py-2 lg:pl-3 lg:pr-8 lg:py-3"
+    : "";
+
   return (
-    <div className="">
+    <div className={parentClassname}>
-      <div className="my-1">
+      <div className="my-1">From source&nbsp;{directionEmojiJSX}&nbsp;</div>
-        From source&nbsp;
-        <span role="img" aria-label="See below">
-          ⤵️
-        </span>
-        &nbsp;
-      </div>
       <InlineResultViewer
-        className="px-1 py-1 my-1 rounded md:w-fit-content"
+        className={`px-1 my-1 rounded md:w-fit-content ${inlineCodeExtraClassName}`}
-        code={getCodeTextFromCompletion(code, completionDetail)}
+        code={relatedCode}
       />
     </div>
   );