Data table display fixes (#5415)

src/common/search/search-input.ts

@@ -27,7 +27,7 @@ class SearchInput extends LitElement {
   protected render(): TemplateResult {
     return html`
       <style>
-        .no-underline {
+        .no-underline:not(.focused) {
           --paper-input-container-underline: {
             display: none;
             height: 0;

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

@@ -95,6 +95,8 @@ export class HaTabsSubpageDataTable extends LitElement {
                 <slot name="header">
                   <div class="search-toolbar">
                     <search-input
+                      .filter=${this.filter}
+                      class="header"
                       no-label-float
                       no-underline
                       @value-changed=${this._handleSearchChange}
@@ -119,6 +121,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                     <slot name="header">
                       <div class="table-header">
                         <search-input
+                          .filter=${this.filter}
                           no-label-float
                           no-underline
                           @value-changed=${this._handleSearchChange}
@@ -153,13 +156,16 @@ export class HaTabsSubpageDataTable extends LitElement {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
       }
       .search-toolbar {
-        margin-left: -24px;
         color: var(--secondary-text-color);
       }
       search-input {
         position: relative;
         top: 2px;
       }
+      search-input.header {
+        left: -8px;
+        top: -7px;
+      }
     `;
   }
 }

src/layouts/hass-tabs-subpage.ts

@@ -113,7 +113,7 @@ class HassTabsSubpage extends LitElement {
         ></ha-paper-icon-button-arrow-prev>
         ${this.narrow
           ? html`
-              <div main-title><slot name="header"></slot></div>
+              <div class="main-title"><slot name="header"></slot></div>
             `
           : ""}
         ${tabs.length > 1 || !this.narrow
@@ -228,14 +228,17 @@ class HassTabsSubpage extends LitElement {
       ha-menu-button,
       ha-paper-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
+        flex-shrink: 0;
         pointer-events: auto;
         color: var(--sidebar-icon-color);
       }
 
-      [main-title] {
+      .main-title {
-        margin: 0 0 0 24px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: 40px;
         line-height: 20px;
-        flex-grow: 1;
       }
 
       .content {
@@ -247,11 +250,6 @@ class HassTabsSubpage extends LitElement {
         -webkit-overflow-scrolling: touch;
       }
 
-      #toolbar-icon {
-        position: absolute;
-        right: 16px;
-      }
-
       :host([narrow]) .content {
         height: calc(100% - 128px);
       }

src/panels/config/entities/ha-config-entities.ts

@@ -108,7 +108,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         type: "icon",
         sortable: true,
         filterable: true,
-        width: "55px",
+        width: "68px",
         template: (_status, entity: any) =>
           entity.unavailable || entity.disabled_by || entity.readonly
             ? html`
@@ -169,7 +169,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         ),
         sortable: true,
         filterable: true,
-        width: "20%",
+        width: "25%",
       };
       columns.platform = {
         title: this.hass.localize(

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -104,7 +104,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           ),
           sortable: true,
           filterable: true,
-          width: "15%",
+          width: "20%",
           template: (mode) =>
             html`
               ${this.hass.localize(
@@ -143,7 +143,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
             "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
           ),
           type: "icon",
-          width: "100px",
+          width: "121px",
           template: (sidebar) =>
             sidebar
               ? html`