Fix overscroll behavior

.vscode/settings.json

@@ -79,6 +79,7 @@
     "NPRO",
     "NUMR",
     "Opencorpora",
+    "overscroll",
     "passwordreset",
     "perfectivity",
     "PNCT",

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

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'

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}

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)'

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'}

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;

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}

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>

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}

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}

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);

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;
   }
 

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'
   );