fix: Prevent gallery auto-scrolling from scrolling entire browser (#1824)

- Closes #1814

src/components/gallery.ts

@@ -12,6 +12,7 @@ import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import throttle from 'lodash-es/throttle';
 import { CameraManager, ExtendedMediaQueryResult } from '../camera-manager/manager.js';
 import { EventQuery, MediaQuery, RecordingQuery } from '../camera-manager/types';
+import { ViewManagerEpoch } from '../card-controller/view/types.js';
 import {
   CardWideConfig,
   frigateCardConfigDefaults,
@@ -23,6 +24,7 @@ import galleryStyle from '../scss/gallery.scss';
 import { ExtendedHomeAssistant } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { errorToConsole, sleep } from '../utils/basic';
+import { scrollIntoView } from '../utils/scroll.js';
 import { ViewMedia } from '../view/media';
 import { EventMediaQueries, RecordingMediaQueries } from '../view/media-queries';
 import { MediaQueriesClassifier } from '../view/media-queries-classifier';
@@ -32,7 +34,6 @@ import { renderMessage, renderProgressIndicator } from './message.js';
 import './surround-basic';
 import './thumbnail.js';
 import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
-import { ViewManagerEpoch } from '../card-controller/view/types.js';
 
 const GALLERY_MEDIA_FILTER_MENU_ICONS = {
   closed: 'mdi:filter-cog-outline',
@@ -484,7 +485,8 @@ export class FrigateCardGalleryCore extends LitElement {
         // ... and there is a thumbnail rendered that is selected.
         this._refSelected.value
       ) {
-        this._refSelected.value.scrollIntoView({
+        scrollIntoView(this._refSelected.value, {
+          boundary: this,
           block: 'center',
         });
       }

src/utils/scroll.ts

@@ -0,0 +1,13 @@
+import { compute as computeScroll, Options } from 'compute-scroll-into-view';
+
+// Alternative to the stock element.scrollIntoView that suppports limiting
+// scrolling to a boundary, rather than the entire browser root.
+//
+// See: https://github.com/dermotduffy/frigate-hass-card/issues/1814
+// See: https://github.com/w3c/csswg-drafts/issues/9452
+export const scrollIntoView = (element: HTMLElement, options: Options) => {
+  computeScroll(element, options).forEach(({ el, top, left }) => {
+    el.scrollTop = top;
+    el.scrollLeft = left;
+  });
+};