From df8149905442608ce2710698f358f42ac56ab8bb Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Thu, 23 Nov 2023 15:18:47 +0100
Subject: [PATCH] expand search input and use textarea for multiline

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/elements/table/Table.ts       |  6 ++++++
 web/src/elements/table/TableSearch.ts | 14 ++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

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<T> 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<HTMLInputElement>("input[type=search]");
+                const el = this.shadowRoot?.querySelector<HTMLInputElement>("[name=search]");
                 if (!el) return;
                 if (el.value === "") return;
                 this.onSearch(el?.value);
             }}
         >
-            <input
+            <textarea
                 class="pf-c-form-control"
                 name="search"
-                type="search"
                 placeholder=${msg("Search...")}
-                value="${ifDefined(this.value)}"
-                @search=${(ev: Event) => {
+                spellcheck="false"
+                @submit=${(ev: Event) => {
                     if (!this.onSearch) return;
                     this.onSearch((ev.target as HTMLInputElement).value);
                 }}
-            />
+            >${ifDefined(this.value)}</textarea>
             <button
                 class="pf-c-button pf-m-control"
                 type="reset"