fix: Fix curved corners (again) (#1595)

dermotduffy · Sep 29, 2024 · ff6dbba · ff6dbba
1 parent 6565584
commit ff6dbba
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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);
 }