openvibers/openvibe.chat Commits

Phones: at the end of the chat feed, a finger drag carries on into the page (#255)

OP OpenVibers committed 15 days ago · dbdfff0059 · 2 files, +2 −2

The room feed (#oc-feed) kept overscroll-behavior: contain, so once it was
scrolled to its end a drag moved nothing: the one scroll trap left on the
network (fleet scan, 10-30). It keeps its box, now at most 60% of the
screen (svh), and hands the drag to the page at its end; the feed view's
smaller box does the same.

Changes

ddiff --git a/public/web/chat.css b/public/web/chat.css
iindex 8f4821a..5e6ba85 100644
---- a/public/web/chat.css
++++ b/public/web/chat.css
@@@ -36,7 +36,7 @@ h1 { font-size: 1.6rem; line-height: 1.25; margin: .3em 0 .2em; }
  .oc-notice { padding: 8px 12px; border-left: 4px solid var(--oc-accent); background: var(--oc-panel); border-radius: 0 8px 8px 0; }
  .oc-notice.oc-error { border-color: var(--oc-red); }
  .oc-notice.oc-ok { border-color: var(--oc-ok); }
--.oc-feed { list-style: none; margin: 12px 0; padding: 8px 4px; background: var(--oc-panel); border: 1px solid var(--oc-line); border-radius: 12px; max-height: min(64vh, 720px); overflow-y: auto; overscroll-behavior: contain; }
++.oc-feed { list-style: none; margin: 12px 0; padding: 8px 4px; background: var(--oc-panel); border: 1px solid var(--oc-line); border-radius: 12px; max-height: min(60vh, 720px); max-height: min(60svh, 720px); overflow-y: auto; overscroll-behavior-y: auto; } /* at its end a finger drag carries on into the page (Shared docs/kit.md "Scrolling on touch screens") */
  .oc-msg { padding: 5px 10px; border-radius: 8px; line-height: 1.45; }
  .oc-msg:hover { background: var(--oc-panel-2); }
  .oc-compact .oc-msg { padding: 1px 10px; }
ddiff --git a/public/web/feed-view.css b/public/web/feed-view.css
iindex 58787b7..65328b5 100644
---- a/public/web/feed-view.css
++++ b/public/web/feed-view.css
@@@ -15,7 +15,7 @@
  .fv-chev { color: var(--fv-muted); transition: transform .15s; }
  .fv-folded .fv-chev { transform: rotate(-90deg); }
  .fv-folded .fv-body { display: none; }
--.fv-body { border-top: 1px solid var(--fv-line); max-height: 260px; overflow-y: auto; padding: 8px 12px 10px; overscroll-behavior: contain; }
++.fv-body { border-top: 1px solid var(--fv-line); max-height: 260px; overflow-y: auto; padding: 8px 12px 10px; overscroll-behavior-y: auto; }
  .fv-turns, .fv-steps { list-style: none; margin: 0; padding: 0; }
  .fv-turn { padding: 4px 0; }
  .fv-turn + .fv-turn { border-top: 1px dashed color-mix(in srgb, var(--fv-line) 70%, transparent); }