Removed LTR force - looks much better

src/panels/developer-tools/event/developer-tools-event.js

@@ -29,7 +29,6 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
           -moz-user-select: initial;
           @apply --paper-font-body1;
           padding: 16px;
-          direction: ltr;
           display: block;
         }
 

src/panels/developer-tools/service/developer-tools-service.js

@@ -11,6 +11,7 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import "../../../styles/polymer-ha-style";
 import "../../../util/app-localstorage-document";
+import { computeRTL } from "../../../common/util/compute_rtl";
 
 const ERROR_SENTINEL = {};
 /*
@@ -26,7 +27,6 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
           -moz-user-select: initial;
           display: block;
           padding: 16px;
-          direction: ltr;
         }
 
         .ha-form {
@@ -51,8 +51,13 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
           text-align: left;
         }
 
+        :host([rtl]) .attributes th {
+          text-align: right;
+        }
+
         .attributes tr {
           vertical-align: top;
+          direction: ltr;
         }
 
         .attributes tr:nth-child(odd) {
@@ -83,6 +88,14 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
         .error {
           color: var(--error-color);
         }
+
+        :host([rtl]) .desc-container {
+          text-align: right;
+        }
+
+        :host([rtl]) .desc-container h3 {
+          direction: ltr;
+        }
       </style>
 
       <app-localstorage-document
@@ -141,7 +154,9 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
             </h1>
           </template>
           <template is="dom-if" if="[[_description]]">
-            <h3>[[_description]]</h3>
+            <div class="desc-container">
+              <h3>[[_description]]</h3>
+            </div>
 
             <table class="attributes">
               <tr>
@@ -227,6 +242,10 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
         type: String,
         computed: "_computeDescription(hass, _domain, _service)",
       },
+      rtl: {
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -329,6 +348,10 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
   _yamlChanged(ev) {
     this.serviceData = ev.detail.value;
   }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 
 customElements.define("developer-tools-service", HaPanelDevService);

src/panels/developer-tools/state/developer-tools-state.js

@@ -13,6 +13,7 @@ import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import "../../../styles/polymer-ha-style";
 import { mdiInformationOutline } from "@mdi/js";
+import { computeRTL } from "../../../common/util/compute_rtl";
 
 const ERROR_SENTINEL = {};
 /*
@@ -29,7 +30,6 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           -moz-user-select: initial;
           display: block;
           padding: 16px;
-          direction: ltr;
         }
 
         .inputs {
@@ -44,8 +44,13 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           text-align: left;
         }
 
+        :host([rtl]) .entities th {
+          text-align: right;
+        }
+
         .entities tr {
           vertical-align: top;
+          direction: ltr;
         }
 
         .entities tr:nth-child(odd) {
@@ -232,6 +237,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         computed:
           "computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter)",
       },
+      rtl: {
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -396,6 +405,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
   _yamlChanged(ev) {
     this._stateAttributes = ev.detail.value;
   }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 
 customElements.define("developer-tools-state", HaPanelDevState);