Minor pointer fixes.

src/card.ts

@@ -211,9 +211,12 @@ class FrigateCard extends LitElement {
       // If there's nothing to render...
       (menuStyle === 'none' && statusBarStyle === 'none') ||
       // ... or the position I'm rendering does not contain the menu/status bar
+      (position === 'overlay' &&
+        menuStyle === 'outside' &&
+        statusBarStyle === 'outside') ||
       (position !== 'overlay' &&
-        menuPosition !== position &&
+        (menuStyle !== 'outside' || menuPosition !== position) &&
-        statusBarPosition !== position)
+        (statusBarStyle !== 'outside' || statusBarPosition !== position))
     ) {
       // ... then there's nothing to do.
       return;
@@ -230,16 +233,18 @@ class FrigateCard extends LitElement {
         ((statusBarStyle === 'outside' && kind === 'outerlay') ||
           (statusBarStyle !== 'outside' && kind === 'overlay'));
 
-      // As an exception, to improve the visual flow, if the menu is being
+
-      // rendered on the bottom, render the status bar first.
+      // Complex logic to try to always put the menu in the right-looking place.
+      const renderMenuFirst =
+        menuPosition === 'left' ||
+        menuPosition === 'right' ||
+        (menuPosition === 'bottom' && menuStyle === 'hidden' && statusBarStyle !== 'popup') ||
+        (menuPosition === 'top' && (menuStyle !== 'hidden' || statusBarStyle === 'popup'));
+
       return html`
-        ${shouldRenderMenu && menuPosition !== 'bottom'
+        ${shouldRenderMenu && renderMenuFirst ? this._renderMenu(menuPosition) : ''}
-          ? this._renderMenu(menuPosition)
-          : ''}
         ${shouldRenderStatusBar ? this._renderStatusBar(statusBarPosition) : ''}
-        ${shouldRenderMenu && menuPosition === 'bottom'
+        ${shouldRenderMenu && !renderMenuFirst ? this._renderMenu(menuPosition) : ''}
-          ? this._renderMenu(menuPosition)
-          : ''}
       `;
     };
 

src/components/viewer.ts

@@ -505,7 +505,7 @@ export class FrigateCardViewerCarousel extends LitElement {
     return html` <div class="embla__slide">
       <frigate-card-viewer-provider
         .hass=${this.hass}
-        .view=${view}
+        .viewManagerEpoch=${this.viewManagerEpoch}
         .media=${media}
         .viewerConfig=${this.viewerConfig}
         .resolvedMediaCache=${this.resolvedMediaCache}
@@ -724,10 +724,7 @@ export class FrigateCardViewerProvider
     return null;
   }
 
-  /**
+  protected async _switchToRelatedClipView(): Promise<void> {
-   * Dispatch a clip view that matches the current (snapshot) query.
-   */
-  protected async _dispatchRelatedClipView(): Promise<void> {
     const view = this.viewManagerEpoch?.manager.getView();
     if (
       !this.hass ||
@@ -912,7 +909,7 @@ export class FrigateCardViewerProvider
             title="${this.media.getTitle() ?? ''}"
             @click=${() => {
               if (this.viewerConfig?.snapshot_click_plays_clip) {
-                this._dispatchRelatedClipView();
+                this._switchToRelatedClipView();
               }
             }}
             @load=${(ev: Event) => {

src/scss/status.scss

@@ -13,6 +13,14 @@
   transition: opacity 1s;
 }
 
+/*******************************************************
+ * Non-hover styles should not interact with the pointer
+ *******************************************************/
+ 
+:host(:not([data-style*='hover'])) {
+  pointer-events: none;
+}
+
 /***************
  * Outside style
  ***************/
@@ -32,7 +40,6 @@
 }
 :host([data-style='popup'][hide]) {
   opacity: 0;
-  pointer-events: none;
 }
 
 /*********************