RTL fix for obstructed notification drawer (#2584)

src/panels/lovelace/components/notifications/hui-notification-drawer.js

@@ -9,6 +9,7 @@ import "./hui-notification-item";
 
 import EventsMixin from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
+import { computeRTL } from "../../../../common/util/compute_rtl";
 
 /*
  * @appliesMixin EventsMixin
@@ -47,20 +48,38 @@ export class HuiNotificationDrawer extends EventsMixin(
         z-index: 10;
       }
 
+      :host([rtl]) .container {
+        transition: left .2s ease-in !important;
+      }
+
       :host(:not(narrow)) .container {
         right: -500px;
       }
 
+      :host([rtl]:not(narrow)) .container {
+        left: -500px;
+      }
+
       :host([narrow]) .container {
         right: -100%;
         width: 100%;
       }
 
+      :host([rtl][narrow]) .container {
+        left: -100%;
+        width: 100%;
+      }
+
       :host(.open) .container,
       :host(.open[narrow]) .container {
         right: 0;
       }
 
+      :host([rtl].open) .container,
+      :host([rtl].open[narrow]) .container {
+        left: 0;
+      }
+
       app-toolbar {
         color: var(--primary-text-color);
         border-bottom: 1px solid var(--divider-color);
@@ -143,6 +162,11 @@ export class HuiNotificationDrawer extends EventsMixin(
         type: Array,
         value: [],
       },
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -171,5 +195,9 @@ export class HuiNotificationDrawer extends EventsMixin(
       }, 250);
     }
   }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 customElements.define("hui-notification-drawer", HuiNotificationDrawer);