[#69800] contain editor overscroll

This helps when both the editor and page are scrollable and the page can be accidentally scrolled when the editor is scrolled to the bottom.
antmicro · Dec 4, 2024 · e1a3972 · e1a3972
1 parent 57542bd
commit e1a3972
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 0 deletions.
diff --git a/src/components/CodeMirror.jsx b/src/components/CodeMirror.jsx
@@ -22,6 +22,7 @@ const CodeEditor = styled.div`
   height: 100%;
   scrollbar-width: thin;
   overflow-y: auto;
+  overscroll-behavior: contain;
   color: black;
   position: relative;
   box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.15);

diff --git a/src/components/Diff.jsx b/src/components/Diff.jsx
@@ -13,10 +13,12 @@ const DiffContainer = styled.div`
   height: 100%;
   scrollbar-width: thin;
   overflow-y: auto;
+  overscroll-behavior: contain;
 `;
 
 const MergeViewCodeEditor = styled(CodeEditor)`
   overflow-y: visible;
+  overscroll-behavior: contain;
   display: block;
 `;
 

diff --git a/src/components/Preview.js b/src/components/Preview.js
@@ -14,6 +14,7 @@ const Preview = styled.div`
   word-wrap: break-word;
   position: relative;
   overflow-y: auto;
+  overscroll-behavior: contain;
   scrollbar-width: thin;
 
   @media print {

diff --git a/src/components/Resolved.jsx b/src/components/Resolved.jsx
@@ -14,6 +14,7 @@ const ResolvedWrapper = styled.div`
   border-radius: var(--border-radius);
   color: var(--gray-900);
   overflow-y: auto;
+  overscroll-behavior: contain;
 
   & h1 {
     font-size: 20px;