From 3024cde1b1c8556f266a66df3394000774ed2bf6 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 2 May 2024 21:34:47 +0300
Subject: [PATCH] Fix overscroll behavior

---
 .vscode/settings.json                                       | 1 +
 rsconcept/frontend/README.md                                | 2 +-
 rsconcept/frontend/src/app/ApplicationLayout.tsx            | 2 +-
 .../frontend/src/components/select/SubstitutionsPicker.tsx  | 2 +-
 rsconcept/frontend/src/components/ui/Modal.tsx              | 2 +-
 rsconcept/frontend/src/components/ui/Tooltip.tsx            | 2 +-
 .../frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx  | 2 +-
 .../pages/RSFormPage/EditorRSExpression/ParsingResult.tsx   | 2 +-
 .../pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx    | 2 +-
 .../src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx     | 2 +-
 .../pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx | 2 +-
 rsconcept/frontend/src/styling/overrides.css                | 1 +
 rsconcept/frontend/src/styling/styles.css                   | 1 +
 rsconcept/frontend/src/utils/codemirror.ts                  | 6 +++---
 14 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6c125ef7..0e407911 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -79,6 +79,7 @@
     "NPRO",
     "NUMR",
     "Opencorpora",
+    "overscroll",
     "passwordreset",
     "perfectivity",
     "PNCT",
diff --git a/rsconcept/frontend/README.md b/rsconcept/frontend/README.md
index 5ef803e0..681d51b4 100644
--- a/rsconcept/frontend/README.md
+++ b/rsconcept/frontend/README.md
@@ -12,7 +12,7 @@ Styling conventions
   - outer layout: fixed bottom-1/2 left-0 -translate-x-1/2
   - rectangle: mt-3 min-w-fit min-w-10 flex-grow shrink-0
   - inner layout: px-3 py-2 flex flex-col gap-3 justify-between items-center
-  - overflow behavior: overflow-scroll
+  - overflow behavior: overflow-scroll overscroll-contain
   - border: borer-2 outline-none shadow-md
   - colors: clr-controls
   - text: text-start text-sm font-semibold whitespace-nowrap
diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index a6325a39..4d6eee2a 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@@ -23,7 +23,7 @@ function ApplicationLayout() {
 
         <div
           id={globals.main_scroll}
-          className='overflow-y-auto overscroll-none min-w-fit'
+          className='cc-scroll-y min-w-fit'
           style={{
             maxHeight: viewportHeight,
             overflowY: showScroll ? 'scroll' : 'auto'
diff --git a/rsconcept/frontend/src/components/select/SubstitutionsPicker.tsx b/rsconcept/frontend/src/components/select/SubstitutionsPicker.tsx
index 4f5704ae..0cb7356f 100644
--- a/rsconcept/frontend/src/components/select/SubstitutionsPicker.tsx
+++ b/rsconcept/frontend/src/components/select/SubstitutionsPicker.tsx
@@ -252,7 +252,7 @@ function SubstitutionsPicker({
         dense
         noHeader
         noFooter
-        className='w-full overflow-y-auto text-sm border select-none'
+        className='w-full text-sm border select-none cc-scroll-y'
         rows={rows}
         contentHeight='1.3rem'
         data={items}
diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index a8b86137..13c285c3 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -84,7 +84,7 @@ function Modal({
         {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
         <div
-          className={clsx('overflow-auto', className)}
+          className={clsx('overflow-auto overscroll-contain', className)}
           style={{
             maxHeight: 'calc(100vh - 8rem)',
             maxWidth: 'calc(100vw - 2rem)'
diff --git a/rsconcept/frontend/src/components/ui/Tooltip.tsx b/rsconcept/frontend/src/components/ui/Tooltip.tsx
index 50400f34..cd0d4c42 100644
--- a/rsconcept/frontend/src/components/ui/Tooltip.tsx
+++ b/rsconcept/frontend/src/components/ui/Tooltip.tsx
@@ -32,7 +32,7 @@ function Tooltip({
       delayShow={1000}
       delayHide={100}
       opacity={0.97}
-      className={clsx('overflow-auto sm:overflow-hidden', 'border shadow-md', layer, className)}
+      className={clsx('overflow-auto sm:overflow-hidden overscroll-contain', 'border shadow-md', layer, className)}
       classNameArrow={layer}
       style={{ ...{ paddingTop: '2px', paddingBottom: '2px' }, ...style }}
       variant={darkMode ? 'dark' : 'light'}
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx
index a9b7e407..6bb3575e 100644
--- a/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx
@@ -18,7 +18,7 @@ function ConstituentsList({ list, schema, title, prefix }: ConstituentsListProps
           {title}: <b>{list.length}</b>
         </p>
       ) : null}
-      <div className={clsx('h-[9rem]', 'px-3', 'overflow-y-auto', 'border', 'whitespace-nowrap')}>
+      <div className={clsx('h-[9rem]', 'px-3', 'cc-scroll-y', 'border', 'whitespace-nowrap')}>
         {list.map(id => {
           const cst = schema.cstByID.get(id);
           return cst ? <p key={`${prefix}${cst.id}`}>{labelConstituenta(cst)}</p> : null;
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
index af6cc1d7..0fcd5070 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
@@ -18,7 +18,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
 
   return (
     <motion.div
-      className='dense border text-sm overflow-y-auto'
+      className='text-sm border dense cc-scroll-y'
       initial={false}
       animate={isOpen ? 'open' : 'closed'}
       variants={animateParseResults}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
index df05dd9c..4bf595aa 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
@@ -360,7 +360,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
           <Overlay
             layer='z-tooltip'
             position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
-            className={clsx('w-[25rem]', 'px-3', 'overflow-y-auto', 'border shadow-md', 'clr-app')}
+            className={clsx('w-[25rem]', 'px-3', 'cc-scroll-y', 'border shadow-md', 'clr-app')}
           >
             <InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
           </Overlay>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
index 9985e720..812fed0f 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
@@ -85,7 +85,7 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
           'border-x border-b rounded-b-md',
           'clr-input',
           'text-sm',
-          'overflow-y-auto'
+          'cc-scroll-y'
         )}
         style={{ maxHeight: calculateHeight(windowSize.isSmall ? '12.rem + 2px' : '16.4rem + 2px') }}
         initial={false}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
index f5cb96e0..d7fe6ef2 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
@@ -129,7 +129,7 @@ function ConstituentsTable({ items, activeID, onOpenEdit, maxHeight, denseThresh
     <DataTable
       dense
       noFooter
-      className='text-sm select-none cc-scroll-y overscroll-none'
+      className='text-sm select-none cc-scroll-y'
       style={{ maxHeight: maxHeight }}
       data={items}
       columns={columns}
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index d625f562..d4f24f21 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -10,6 +10,7 @@
 .cm-editor {
   resize: vertical;
   overflow-y: auto;
+  overscroll-behavior-y: contain;
   border-color: var(--cl-bg-40);
   .dark & {
     border-color: var(--cd-bg-40);
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index 1cdddb0c..a0776362 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -223,6 +223,7 @@
 
   .cc-scroll-y {
     overflow-y: auto;
+    overscroll-behavior-y: contain;
     scroll-snap-type: y mandatory;
   }
 
diff --git a/rsconcept/frontend/src/utils/codemirror.ts b/rsconcept/frontend/src/utils/codemirror.ts
index 3f9c6613..dd37191b 100644
--- a/rsconcept/frontend/src/utils/codemirror.ts
+++ b/rsconcept/frontend/src/utils/codemirror.ts
@@ -133,7 +133,7 @@ export function domTooltipConstituenta(cst?: IConstituenta) {
     'dense',
     'p-2',
     'border shadow-md',
-    'overflow-y-auto',
+    'cc-scroll-y',
     'text-sm font-main'
   );
 
@@ -200,7 +200,7 @@ export function domTooltipEntityReference(ref: IEntityReference, cst: IConstitue
     'dense',
     'p-2 flex flex-col',
     'border shadow-md',
-    'overflow-y-auto',
+    'cc-scroll-y',
     'text-sm',
     'select-none cursor-auto'
   );
@@ -247,7 +247,7 @@ export function domTooltipSyntacticReference(ref: ISyntacticReference, masterRef
     'dense',
     'p-2 flex flex-col',
     'border shadow-md',
-    'overflow-y-auto',
+    'cc-scroll-y',
     'text-sm',
     'select-none cursor-auto'
   );