From 3e02aeb80b1bbaaca5c86cb233dfd45cfbadf8f4 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 1 Oct 2022 12:08:26 -0700
Subject: [PATCH] Minor editor CSS cleanup.

---
 src/editor.ts        |  8 ++++----
 src/scss/editor.scss | 13 ++++---------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/editor.ts b/src/editor.ts
index db7a3ac8..e9e56710 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -1,5 +1,3 @@
-// TODO: simplify submenu CSS for nested submenus (use .values for cameras)
-
 import { fireEvent, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -1389,8 +1387,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         ${this._renderOptionSetHeader('cameras')}
         ${this._expandedMenus[MENU_OPTIONS] === 'cameras'
           ? html`
-              ${cameras.map((_, index) => this._renderCamera(cameras, index, entities))}
-              ${this._renderCamera(cameras, cameras.length, entities, true)}
+              <div class="values">
+                ${cameras.map((_, index) => this._renderCamera(cameras, index, entities))}
+                ${this._renderCamera(cameras, cameras.length, entities, true)}
+              </div>
             `
           : ''}
         ${this._renderOptionSetHeader('view')}
diff --git a/src/scss/editor.scss b/src/scss/editor.scss
index 86279f8c..2ddddce6 100644
--- a/src/scss/editor.scss
+++ b/src/scss/editor.scss
@@ -72,29 +72,24 @@ div.upgrade span {
   padding-right: 15px;
 }
 
-.submenu {
-  border: 1px solid var(--divider-color);
-}
 .submenu.selected {
   border: 1px solid var(--primary-color);
 }
 
 // Nested menus should shrink width.
-.submenu .submenu {
+.submenu {
   width: calc(100% - 10px * 2);
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
 }
 
-.submenu .submenu:first-child {
+// Add a margin above a submenu unless it's another submenu.
+.submenu:first-child,
+:not(.submenu) + .submenu {
   margin-top: 10px;
 }
 
-.submenu :not(.submenu.selected) {
-  border: none;
-}
-
 .submenu .controls {
   display: inline-block;
   margin-left: auto;