From 1615819bce1c8dd676cd7edf36ce7671957414e5 Mon Sep 17 00:00:00 2001
From: Charlie Holtz <charlieholtz@gmail.com>
Date: Mon, 12 Aug 2024 12:07:39 -0700
Subject: [PATCH] PR from melty/wider/bigger-diff-viewer (#49)

* bot changes

* bot changes

* bot changes

* bot changes

* human changes

* bot changes

* bot changes

* bot changes
---
 webview-ui/src/App.tsx                   |  8 ++++----
 webview-ui/src/components/DiffViewer.tsx | 10 ++++------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
index 7ac78bc0..098dcb48 100644
--- a/webview-ui/src/App.tsx
+++ b/webview-ui/src/App.tsx
@@ -46,11 +46,11 @@ function JouleComponent({
 
     return (
         <div
-            className={`grid grid-cols-12 gap-6 mb-2 p-3 rounded ${
-                joule.author === "human" ? "bg-gray-50 " : "bg-white"
+            className={`flex flex-col md:flex-row gap-6 mb-2 p-3 rounded ${
+                joule.author === "human" ? "bg-gray-50" : "bg-white"
             }`}
         >
-            <div className="text-xs prose col-span-5">
+            <div className="text-xs prose md:w-2/5 flex-shrink-0">
                 <ReactMarkdown
                     components={{
                         code({ node, className, children, ...props }) {
@@ -89,7 +89,7 @@ function JouleComponent({
                 </ReactMarkdown>
                 {isPartial && <span className="animate-pulse">▋</span>}
             </div>
-            <div className="overflow-y-auto col-span-7 text-xs">
+            <div className="md:w-3/5 text-xs">
                 {diffHtml && !isPartial && <DiffViewer diff={diffHtml} />}
             </div>
         </div>
diff --git a/webview-ui/src/components/DiffViewer.tsx b/webview-ui/src/components/DiffViewer.tsx
index 5b9fa775..4814245d 100644
--- a/webview-ui/src/components/DiffViewer.tsx
+++ b/webview-ui/src/components/DiffViewer.tsx
@@ -50,9 +50,7 @@ const dummyDiff =
 
 const Diff2HtmlComponent: React.FC<Diff2HtmlProps> = ({ diff }) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [outputFormat, setOutputFormat] = useState<"unified" | "side-by-side">(
-    "side-by-side"
-  );
+  const [outputFormat, setOutputFormat] = useState<"unified" | "side-by-side">("side-by-side");
 
   useEffect(() => {
     if (containerRef.current) {
@@ -79,8 +77,8 @@ const Diff2HtmlComponent: React.FC<Diff2HtmlProps> = ({ diff }) => {
   }, [diff, outputFormat]);
 
   return (
-    <div className="overflow-y-scroll relative max-h-96">
-      <div className="flex justify-end items-center space-x-2">
+    <div className="sticky top-0 overflow-y-auto max-h-[calc(100vh-200px)]">
+      <div className="flex justify-end items-center space-x-2 mb-2">
         <Switch
           onClick={() =>
             setOutputFormat(
@@ -93,7 +91,7 @@ const Diff2HtmlComponent: React.FC<Diff2HtmlProps> = ({ diff }) => {
           Unified
         </Label>
       </div>
-      <div ref={containerRef} />
+      <div ref={containerRef} className="overflow-x-auto" />
     </div>
   );
 };