Fix data table spacing and text truncation on mobile

src/components/data-table/ha-data-table.ts

@@ -117,7 +117,7 @@ export class HaDataTable extends LitElement {
   @consume({ context: internationalizationContext, subscribe: true })
   private _i18n?: ContextType<typeof internationalizationContext>;
 
-  @property({ type: Boolean }) public narrow = false;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
 
@@ -1158,6 +1158,11 @@ export class HaDataTable extends LitElement {
         /* default mdc styles, colors changed, without checkbox styles */
         :host {
           height: 100%;
+          --_cell-padding-inline: 16px;
+        }
+
+        :host([narrow]) {
+          --_cell-padding-inline: 8px;
         }
         .mdc-data-table__content {
           font-family: var(--ha-font-family-body);
@@ -1238,8 +1243,7 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__cell,
         .mdc-data-table__header-cell {
-          padding-right: 16px;
-          padding-left: 16px;
+          padding-inline: var(--_cell-padding-inline);
           min-width: 150px;
           align-self: center;
           overflow: hidden;
@@ -1259,14 +1263,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__header-cell--checkbox,
         .mdc-data-table__cell--checkbox {
-          /* @noflip */
-          padding-left: 16px;
-          /* @noflip */
-          padding-right: 0;
-          /* @noflip */
-          padding-inline-start: 16px;
-          /* @noflip */
-          padding-inline-end: initial;
+          padding-inline-start: var(--_cell-padding-inline);
+          padding-inline-end: 0;
           width: 60px;
           min-width: 60px;
         }
@@ -1379,8 +1377,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--overflow-menu:first-child,
         .mdc-data-table__header-cell--icon-button:first-child,
         .mdc-data-table__cell--icon-button:first-child {
-          padding-left: 16px;
-          padding-inline-start: 16px;
+          padding-inline-start: var(--_cell-padding-inline);
           padding-inline-end: initial;
         }
 
@@ -1388,8 +1385,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell--overflow-menu:last-child,
         .mdc-data-table__header-cell--icon-button:last-child,
         .mdc-data-table__cell--icon-button:last-child {
-          padding-right: 16px;
-          padding-inline-end: 16px;
+          padding-inline-end: var(--_cell-padding-inline);
           padding-inline-start: initial;
         }
         .mdc-data-table__cell--overflow-menu,
@@ -1516,11 +1512,17 @@ export class HaDataTable extends LitElement {
         .center {
           text-align: center;
         }
+        .primary {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         .secondary {
           color: var(--secondary-text-color);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          margin-top: 2px;
         }
         .scroller {
           height: calc(100% - 57px);

src/panels/config/automation/ha-automation-picker.ts

@@ -2,10 +2,12 @@ import "@home-assistant/webawesome/dist/components/divider/divider";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
 import {
+  mdiCloseThick,
   mdiCog,
   mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
+  mdiExclamationThick,
   mdiHelpCircleOutline,
   mdiInformationOutline,
   mdiMenuDown,
@@ -129,6 +131,28 @@ import {
 import { getAvailableAssistants } from "../voice-assistants/expose/available-assistants";
 import { showNewAutomationDialog } from "./show-dialog-new-automation";
 
+const renderIconBadge = (path: string, color: string) => html`
+  <div
+    style=${styleMap({
+      position: "absolute",
+      top: "-5px",
+      insetInlineEnd: "-7px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "18px",
+      height: "18px",
+      borderRadius: "50%",
+      backgroundColor: color,
+      boxShadow: "0 0 0 2px var(--data-table-background-color)",
+      color: "var(--data-table-background-color)",
+      "--mdc-icon-size": "12px",
+    })}
+  >
+    <ha-svg-icon style="margin: 0;" .path=${path}></ha-svg-icon>
+  </div>
+`;
+
 type AutomationItem = AutomationEntity & {
   name: string;
   area: string | undefined;
@@ -303,6 +327,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       localize: LocalizeFunc,
       entitiesToCheck?: any[]
     ): DataTableColumnContainer<AutomationItem> => {
+      const triggeredAtColumn = getTriggeredAtTableColumn<AutomationItem>(
+        localize,
+        this.hass
+      );
+
       const columns: DataTableColumnContainer<AutomationItem> = {
         icon: {
           title: "",
@@ -310,18 +339,34 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           type: "icon",
           moveable: false,
           showNarrow: true,
-          template: (automation) =>
-            html`<ha-state-icon
-              .stateObj=${automation}
-              style=${styleMap({
-                color:
-                  automation.state === UNAVAILABLE
+          template: (automation) => {
+            const unavailable = automation.state === UNAVAILABLE;
+            const disabled = automation.state === "off";
+            return html`<div
+              style="position: relative; display: inline-flex; width: 24px; height: 24px;"
+            >
+              <ha-state-icon
+                .stateObj=${automation}
+                .stateValue=${unavailable || disabled ? "on" : undefined}
+                style=${styleMap({
+                  display: "flex",
+                  margin: "0",
+                  color: unavailable
                     ? "var(--error-color)"
-                    : automation.state === "on"
-                      ? "var(--state-active-color)"
+                    : disabled
+                      ? "var(--disabled-color)"
                       : "unset",
-              })}
-            ></ha-state-icon>`,
+                })}
+              ></ha-state-icon>
+              ${
+                unavailable
+                  ? renderIconBadge(mdiExclamationThick, "var(--error-color)")
+                  : disabled
+                    ? renderIconBadge(mdiCloseThick, "var(--disabled-color)")
+                    : nothing
+              }
+            </div>`;
+          },
         },
         entity_id: getEntityIdHiddenTableColumn(),
         name: {
@@ -342,23 +387,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         area: getAreaTableColumn(localize),
         category: getCategoryTableColumn(localize),
         labels: getLabelsTableColumn(),
-        last_triggered: getTriggeredAtTableColumn(localize, this.hass),
+        last_triggered: {
+          ...triggeredAtColumn,
+          template: (automation) =>
+            narrow && automation.state === "off"
+              ? nothing
+              : triggeredAtColumn.template!(automation),
+        },
         formatted_state: {
           minWidth: "82px",
           maxWidth: "82px",
           sortable: true,
           groupable: true,
-          hidden: narrow,
           type: "overflow",
           title: this.hass.localize("ui.panel.config.automation.picker.state"),
-          template: (automation) => html`
-            <ha-switch
-              @click=${stopPropagation}
-              @change=${this._handleSwitchToggle}
-              .automation=${automation}
-              .checked=${automation.state === "on"}
-            ></ha-switch>
-          `,
+          template: (automation) =>
+            narrow
+              ? automation.state === "off"
+                ? localize("ui.panel.config.automation.picker.disabled")
+                : nothing
+              : html`
+                  <ha-switch
+                    @click=${stopPropagation}
+                    @change=${this._handleSwitchToggle}
+                    .automation=${automation}
+                    .checked=${automation.state === "on"}
+                  ></ha-switch>
+                `,
         },
         actions: {
           lastFixed: true,