RTL fixes to new data table (#20283)

RTL fixes to new features

src/components/chips/ha-assist-chip.ts

@@ -56,6 +56,9 @@ export class HaAssistChip extends MdAssistChip {
         background: var(--ha-assist-chip-active-container-color);
         opacity: var(--ha-assist-chip-active-container-opacity);
       }
+      .label {
+        font-family: Roboto, sans-serif;
+      }
     `,
   ];
 

src/components/ha-color-picker.ts

@@ -6,6 +6,7 @@ import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
+import "./ha-list-item";
 import { HomeAssistant } from "../types";
 import { LocalizeKeys } from "../common/translations/localize";
 
@@ -53,18 +54,18 @@ export class HaColorPicker extends LitElement {
             `
           : nothing}
         ${this.defaultColor
-          ? html` <mwc-list-item value="default">
+          ? html` <ha-list-item value="default">
               ${this.hass.localize(`ui.components.color-picker.default_color`)}
-            </mwc-list-item>`
+            </ha-list-item>`
           : nothing}
         ${Array.from(THEME_COLORS).map(
           (color) => html`
-            <mwc-list-item .value=${color} graphic="icon">
+            <ha-list-item .value=${color} graphic="icon">
               ${this.hass.localize(
                 `ui.components.color-picker.colors.${color}` as LocalizeKeys
               ) || color}
               <span slot="graphic">${this.renderColorCircle(color)}</span>
-            </mwc-list-item>
+            </ha-list-item>
           `
         )}
       </ha-select>

src/components/ha-outlined-text-field.ts

@@ -27,6 +27,9 @@ export class HaOutlinedTextField extends MdOutlinedTextField {
         --md-outlined-field-focus-outline-width: 1px;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
+      .input {
+        font-family: Roboto, sans-serif;
+      }
     `,
   ];
 }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -637,6 +637,8 @@ export class HaTabsSubpageDataTable extends LitElement {
         position: absolute;
         top: -4px;
         right: -4px;
+        inset-inline-end: -4px;
+        inset-inline-start: initial;
         min-width: 16px;
         box-sizing: border-box;
         border-radius: 50%;
@@ -682,6 +684,8 @@ export class HaTabsSubpageDataTable extends LitElement {
 
       .selection-bar p {
         margin-left: 16px;
+        margin-inline-start: 16px;
+        margin-inline-end: initial;
       }
 
       ha-assist-chip {