diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index 6175b5296..48a6224ab 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -162,6 +162,12 @@ export abstract class Table extends AKElement { PFDropdown, PFPagination, css` + .pf-c-toolbar__group.pf-m-search-filter { + flex-grow: 1; + } + ak-table-search { + width: 100% !important; + } .pf-c-table thead .pf-c-table__check { min-width: 3rem; } diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts index 3ad92089a..03b836860 100644 --- a/web/src/elements/table/TableSearch.ts +++ b/web/src/elements/table/TableSearch.ts @@ -30,6 +30,9 @@ export class TableSearch extends AKElement { ::-webkit-search-cancel-button { display: none; } + .pf-c-form-control { + font-family: monospace; + } `, ]; } @@ -41,23 +44,22 @@ export class TableSearch extends AKElement { @submit=${(e: Event) => { e.preventDefault(); if (!this.onSearch) return; - const el = this.shadowRoot?.querySelector("input[type=search]"); + const el = this.shadowRoot?.querySelector("[name=search]"); if (!el) return; if (el.value === "") return; this.onSearch(el?.value); }} > - { + spellcheck="false" + @submit=${(ev: Event) => { if (!this.onSearch) return; this.onSearch((ev.target as HTMLInputElement).value); }} - /> + >${ifDefined(this.value)}