Space out sidebar

src/components/ha-sidebar.ts

@@ -149,11 +149,7 @@ class HaSidebar extends LitElement {
           : ""}
         <span class="title">Home Assistant</span>
       </div>
-      <div class="wrapper">
+      <paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
-        <paper-listbox
-          attr-for-selected="data-panel"
-          .selected=${hass.panelUrl}
-        >
         <a
           aria-role="option"
           href="${computeUrl(this._defaultPage)}"
@@ -167,7 +163,6 @@ class HaSidebar extends LitElement {
         </a>
 
         ${beforeSpacer.map((panel) => renderPanel(hass, panel))}
-
         <div class="spacer" disabled></div>
 
         ${afterSpacer.map((panel) => renderPanel(hass, panel))}
@@ -222,10 +217,7 @@ class HaSidebar extends LitElement {
           aria-label=${hass.localize("panel.profile")}
         >
           <paper-icon-item>
-              <ha-user-badge
+            <ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge>
-                slot="item-icon"
-                .user=${hass.user}
-              ></ha-user-badge>
 
             <span class="item-text">
               ${hass.user ? hass.user.name : ""}
@@ -234,7 +226,6 @@ class HaSidebar extends LitElement {
         </a>
         <div disabled class="bottom-spacer sticky-el"></div>
       </paper-listbox>
-      </div>
     `;
   }
 
@@ -333,11 +324,6 @@ class HaSidebar extends LitElement {
         width: 256px;
       }
 
-      .wrapper {
-        overflow-y: auto;
-        height: calc(100% - 65px);
-      }
-
       .menu {
         box-sizing: border-box;
         height: 65px;
@@ -375,6 +361,8 @@ class HaSidebar extends LitElement {
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
+        height: calc(100% - 65px);
+        overflow-y: auto;
       }
 
       paper-listbox > a {