Fix conflict view not being scrollable

Author: silvanocerza

src/views/conflicts-resolution/split-view/actions-gutter.tsx

@@ -175,7 +175,6 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
       style={{
         width: "100%",
         height: "100%",
-        overflow: "hidden",
         position: "relative",
         backgroundColor: "var(--background-secondary)",
       }}

src/views/conflicts-resolution/split-view/diff-view.tsx

@@ -36,13 +36,11 @@ const DiffView: React.FC<DiffViewProps> = ({
   return (
     <div
       style={{
-        width: "100%",
         height: "100%",
         display: "flex",
-        overflow: "hidden",
       }}
     >
-      <div style={{ flex: 1, overflow: "hidden" }}>
+      <div style={{ flex: 1 }}>
         <EditorPane
           content={remoteText}
           highlightPluginSpec={{
@@ -142,7 +140,7 @@ const DiffView: React.FC<DiffViewProps> = ({
           }}
         />
       </div>
-      <div style={{ flex: 1, overflow: "hidden" }}>
+      <div style={{ flex: 1 }}>
         <EditorPane
           content={localText}
           highlightPluginSpec={{

src/views/conflicts-resolution/split-view/split-view.tsx

@@ -46,9 +46,9 @@ const SplitView = ({
     <React.StrictMode>
       <div
         style={{
-          height: "100%",
           display: "flex",
           flexDirection: "column",
+          height: "100%",
           justifyContent: "center",
         }}
       >
@@ -88,21 +88,28 @@ const SplitView = ({
               currentFile={currentFile?.filePath || ""}
               setCurrentFileIndex={setCurrentFileIndex}
             />
-            <DiffView
-              remoteText={currentFile?.remoteContent || ""}
-              localText={currentFile?.localContent || ""}
-              onRemoteTextChange={(content: string) => {
-                const tempFiles = [...files];
-                tempFiles[currentFileIndex].remoteContent = content;
-                setFiles(tempFiles);
-              }}
-              onLocalTextChange={(content: string) => {
-                const tempFiles = [...files];
-                tempFiles[currentFileIndex].localContent = content;
-                setFiles(tempFiles);
+            <div
+              style={{
+                overflow: "auto",
+                flex: 1,
               }}
-              onConflictResolved={onConflictResolved}
-            />
+            >
+              <DiffView
+                remoteText={currentFile?.remoteContent || ""}
+                localText={currentFile?.localContent || ""}
+                onRemoteTextChange={(content: string) => {
+                  const tempFiles = [...files];
+                  tempFiles[currentFileIndex].remoteContent = content;
+                  setFiles(tempFiles);
+                }}
+                onLocalTextChange={(content: string) => {
+                  const tempFiles = [...files];
+                  tempFiles[currentFileIndex].localContent = content;
+                  setFiles(tempFiles);
+                }}
+                onConflictResolved={onConflictResolved}
+              />
+            </div>
           </>
         )}
       </div>

src/views/conflicts-resolution/unified-view/diff-view.tsx

@@ -183,7 +183,15 @@ const DiffView: React.FC<DiffViewProps> = ({
   }, [initialRemoteText, initialLocalText]);
 
   return (
-    <div style={{ width: "100%", height: "100%", overflow: "hidden" }}>
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}
+    >
       <CodeMirror
         value={doc}
         height="100%"

src/views/conflicts-resolution/unified-view/unified-view.tsx

@@ -42,6 +42,8 @@ const UnifiedView = ({
           paddingTop: "var(--size-4-4)",
           paddingBottom: "var(--size-4-4)",
           borderBottom: "1px solid var(--background-modifier-border)",
+          display: "flex",
+          flexDirection: "column",
         }}
       >
         <div
@@ -67,7 +69,14 @@ const UnifiedView = ({
 
   return (
     <React.StrictMode>
-      <div>
+      <div
+        style={{
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "auto",
+        }}
+      >
         {files.length === 0 ? (
           <div
             style={{

styles.css

@@ -4,4 +4,6 @@
 
 .padless-conflicts-view-container {
     padding: 0;
+    height: 100%;
+    width: 100%;
 }