From ff6dbba9f35401bbc8095bc8970af790e6813fc4 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 29 Sep 2024 13:37:39 -0700
Subject: [PATCH] fix: Fix curved corners (again) (#1595)

---
 src/card.ts           |  2 +-
 src/scss/card.scss    | 13 +++++++++----
 src/scss/overlay.scss | 23 +++++++++++++++--------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 88222fc0..c8a65072 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -377,8 +377,8 @@ class FrigateCard extends LitElement {
             </frigate-card-loading>`
           : ''}
         ${this._renderMenuStatusContainer('top')}
+        ${this._renderMenuStatusContainer('overlay')}
         <div ${ref(this._refMain)} class="${classMap(mainClasses)}">
-          ${this._renderMenuStatusContainer('overlay')}
           <frigate-card-views
             ${ref(this._refViews)}
             .hass=${this._hass}
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 71e5e0e1..12e0a913 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -49,8 +49,9 @@ frigate-card-loading {
 div.main {
   position: relative;
 
-  // Some elements (such as submenus) may need to extend beyond the card boundary.
-  overflow: visible;
+  // Required to keep curved corners on the card.
+  overflow: auto;
+
   width: 100%;
   height: 100%;
   margin: auto;
@@ -173,12 +174,16 @@ web-dialog::part(dialog) {
  * "Outside" style for menu/status bar
  *************************************/
 
-.outerlay[data-position='top'] {
+// Style is set on the children themselves, to avoid the need for the parent
+// outlay to prevent overflow (which needs to be enabled to menu items to be
+// visible). See similar approach in overlay.scss for overlay.
+
+.outerlay[data-position='top'] > *:first-child {
   border-top-left-radius: var(--ha-card-border-radius, 4px);
   border-top-right-radius: var(--ha-card-border-radius, 4px);
 }
 
-.outerlay[data-position='bottom'] {
+.outerlay[data-position='bottom'] > *:last-child {
   border-bottom-left-radius: var(--ha-card-border-radius, 4px);
   border-bottom-right-radius: var(--ha-card-border-radius, 4px);
 }
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
index 5c5a63aa..0b31ee64 100644
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -60,19 +60,26 @@ slot[name='right'] {
  * Match rounded corners to card
  *******************************/
 
-slot[name='top'],
-slot[name='left'] {
+// Style is set on the children themselves, to avoid the need for the parent
+// outlay to prevent overflow (which needs to be enabled to menu items to be
+// visible). See similar approach in card.scss for outerlay.
+
+::slotted([slot='top']:first-child),
+::slotted([slot='left']:first-child) {
   border-top-left-radius: var(--ha-card-border-radius, 4px);
 }
-slot[name='top'],
-slot[name='right'] {
+
+::slotted([slot='top']:first-child),
+::slotted([slot='right']:first-child) {
   border-top-right-radius: var(--ha-card-border-radius, 4px);
 }
-slot[name='bottom'],
-slot[name='left'] {
+
+::slotted([slot='bottom']:last-child),
+::slotted([slot='left']:last-child) {
   border-bottom-left-radius: var(--ha-card-border-radius, 4px);
 }
-slot[name='bottom'],
-slot[name='right'] {
+
+::slotted([slot='bottom']:last-child),
+::slotted([slot='right']:last-child) {
   border-bottom-right-radius: var(--ha-card-border-radius, 4px);
 }