fix: Menu should render over drawer (#1589)

src/scss/card.scss

@@ -48,7 +48,9 @@ frigate-card-loading {
 
 div.main {
   position: relative;
-  overflow: auto;
+
+  // Some elements (such as submenus) may need to extend beyond the card boundary.
+  overflow: visible;
   width: 100%;
   height: 100%;
   margin: auto;
@@ -185,15 +187,20 @@ web-dialog::part(dialog) {
  * Overlay styles
  ****************/
 frigate-card-overlay {
-  z-index: 10;
+  // Higher than the drawer (menu renders over drawer).
+  z-index: 20;
 }
 
 /*******************
  * Menu hover styles
  *******************/
 
+frigate-card-menu {
+  // z-index is within the overlay stacking context.
+  z-index: 1;
+}
+
 frigate-card-menu[data-style*='hover'] {
-  z-index: 20;
   transition: opacity 0.5s ease;
   opacity: 0;
 }

src/scss/drawer-inject.scss

@@ -25,6 +25,10 @@
 
   // Don't let the drawer exceed 90% of the full width of the relative parent.
   max-width: 90%;
+
+  // Drawer renders behind the menu/status-bar overlay (otherwise the drawer
+  // controls render on top of menu items)
+  z-index: 10;
 }
 
 :host([location='right']) #d {