fix: Menu linear gradient is the wrong direction on left/right menus (#1553)

* fix: Menu linear gradient is the wrong direction on left/right menus

Also changes the gallery scrolling logic to center the selected element vs top aligned.

* Formatting fix

src/components/gallery.ts

@@ -485,7 +485,9 @@ export class FrigateCardGalleryCore extends LitElement {
         // ... and there is a thumbnail rendered that is selected.
         this._refSelected.value
       ) {
-        this._refSelected.value.scrollIntoView();
+        this._refSelected.value.scrollIntoView({
+          block: 'center',
+        });
       }
     });
   }

src/scss/menu.scss

@@ -125,7 +125,6 @@ div.opposing {
 :host([data-style*='hover']),
 :host([data-style='hidden'][expanded]) {
   overflow: visible;
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
 }
 
 :host([data-style='overlay'][data-position='top']),
@@ -136,6 +135,9 @@ div.opposing {
 :host([data-style='hidden'][data-position='bottom'][expanded]) {
   width: 100%;
   height: auto;
+
+  // Linear fade left to right.
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
 }
 
 :host([data-style='overlay'][data-position='left']),
@@ -146,4 +148,7 @@ div.opposing {
 :host([data-style='hidden'][data-position='right'][expanded]) {
   width: auto;
   height: 100%;
+
+  // Linear fade top to bottom.
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
 }