From a8770ec61a30bd8bf3ac3199a5df85caf0b1d738 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 26 Mar 2022 08:27:30 -0700
Subject: [PATCH] Ensure drawer content is hidden.

---
 src/scss/drawer-inject.scss | 6 +++---
 src/scss/drawer.scss        | 8 ++++----
 src/scss/surround.scss      | 4 ++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/scss/drawer-inject.scss b/src/scss/drawer-inject.scss
index 92ac13ae..830ca6a8 100644
--- a/src/scss/drawer-inject.scss
+++ b/src/scss/drawer-inject.scss
@@ -20,19 +20,19 @@
 }
 
 #d {
-  // Adding for control, may not need this?
+  // Need to allow drawer controls to be visible.
   overflow: visible;
   visibility: visible;
 }
 
-:host([location='right']) #d {
+:host([location=right]) #d {
   // Position to the right.
   left: unset;
   right: 0;
   transform: translateX(100%);
 }
 
-:host([location='right'][open]) #d {
+:host([location=right][open]) #d {
   transform: none;
   box-shadow: 0px 0px 25px 0px black;
 }
diff --git a/src/scss/drawer.scss b/src/scss/drawer.scss
index 96cda137..d69570af 100644
--- a/src/scss/drawer.scss
+++ b/src/scss/drawer.scss
@@ -13,14 +13,14 @@ div.control-surround {
   padding-top: $drawer-padding-extend;
   padding-bottom: $drawer-padding-extend;
 }
-:host([location='left']) div.control-surround {
+:host([location=left]) div.control-surround {
   @if $drawer-icon-size < 32 {
     // Ensure the clickable area is at least 32px wide.
     padding-right: calc(32px - $drawer-icon-size);
   }
   left: 100%;
 }
-:host([location='right']) div.control-surround {
+:host([location=right]) div.control-surround {
   @if $drawer-icon-size < 32 {
     // See note above.
     padding-left: calc(32px - $drawer-icon-size);
@@ -48,12 +48,12 @@ ha-icon.control {
   background-color: black;
 }
 
-:host([location='left']) ha-icon.control {
+:host([location=left]) ha-icon.control {
   border-top-right-radius: $drawer-icon-size;
   border-bottom-right-radius: $drawer-icon-size;
 }
 
-:host([location='right']) ha-icon.control {
+:host([location=right]) ha-icon.control {
   border-top-left-radius: $drawer-icon-size;
   border-bottom-left-radius: $drawer-icon-size;
 }
diff --git a/src/scss/surround.scss b/src/scss/surround.scss
index 173850ba..d6ff998a 100644
--- a/src/scss/surround.scss
+++ b/src/scss/surround.scss
@@ -8,6 +8,10 @@
 
   // Set the drawer relative to this host.
   position: relative;
+
+  // Hide any content outside the main pane (e.g. side drawers) to ensure the
+  // user cannot scroll across to the drawers without opening them.
+  overflow: hidden;
 }
 
 ::slotted:not([name]) {