PR from melty/wider/bigger-diff-viewer (meltylabs#49)

* bot changes * bot changes * bot changes * bot changes * human changes * bot changes * bot changes * bot changes
Louis454545 · Aug 12, 2024 · 1615819 · 1615819
1 parent d92dd04
commit 1615819
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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>
   );
 };