From aab948396d9cce9f8c8aa1f7bea5cd06316c56e0 Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Sun, 26 Mar 2023 13:21:21 +0200
Subject: [PATCH 01/11] search-in-workspace: add support for multi-line
 searches

Signed-off-by: Christian Radke <c.radke@posteo.de>
---
 .../components/search-in-workspace-input.tsx  | 66 +++++++++++----
 ...search-in-workspace-result-tree-widget.tsx | 84 ++++++++++++-------
 .../browser/search-in-workspace-widget.tsx    | 26 +++---
 .../src/browser/styles/index.css              | 27 ++++--
 .../common/search-in-workspace-interface.ts   |  4 +
 .../ripgrep-search-in-workspace-server.ts     |  4 +
 6 files changed, 141 insertions(+), 70 deletions(-)

diff --git a/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx b/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx
index 99b9a9e8da86d..576e82a00d540 100644
--- a/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx
+++ b/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx
@@ -22,14 +22,15 @@ interface HistoryState {
     history: string[];
     index: number;
 };
-type InputAttributes = React.InputHTMLAttributes<HTMLInputElement>;
+type TextareaAttributes = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-export class SearchInWorkspaceInput extends React.Component<InputAttributes, HistoryState> {
+export class SearchInWorkspaceTextArea extends React.Component<TextareaAttributes, HistoryState> {
     static LIMIT = 100;
+    static MAX_ROWS = 7;
 
-    private input = React.createRef<HTMLInputElement>();
+    private textarea = React.createRef<HTMLTextAreaElement>();
 
-    constructor(props: InputAttributes) {
+    constructor(props: TextareaAttributes) {
         super(props);
         this.state = {
             history: [],
@@ -52,31 +53,58 @@ export class SearchInWorkspaceInput extends React.Component<InputAttributes, His
     }
 
     get value(): string {
-        return this.input.current?.value ?? '';
+        return this.textarea.current?.value ?? '';
     }
 
     set value(value: string) {
-        if (this.input.current) {
-            this.input.current.value = value;
+        if (this.textarea.current) {
+            this.textarea.current.value = value;
+            this.resizeTextarea();
         }
     }
 
+    protected resizeTextarea(): void {
+        if (this.textarea.current) {
+            const computedStyle = window.getComputedStyle(this.textarea.current);
+            const lineHeight = parseInt(computedStyle.getPropertyValue('line-height'));
+            // Since the minimum scrollHeight of a textarea is always going to be its current height, we have
+            // to set the height to its minimum first to get an accurate scrollHeight value afterwards.
+            this.textarea.current.style.height = `${lineHeight}px`;
+            const textHeight = Math.min(
+                SearchInWorkspaceTextArea.MAX_ROWS * lineHeight,
+                this.textarea.current.scrollHeight
+                    - parseInt(computedStyle.getPropertyValue('border-bottom-width'))
+                    - parseInt(computedStyle.getPropertyValue('border-top-width'))
+                    - parseInt(computedStyle.getPropertyValue('padding-bottom'))
+                    - parseInt(computedStyle.getPropertyValue('padding-top'))
+            );
+            this.textarea.current.style.height = `${textHeight}px`;
+        }
+    };
+
     /**
      * Handle history navigation without overriding the parent's onKeyDown handler, if any.
      */
-    protected readonly onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-        if (Key.ARROW_UP.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode) {
+    protected readonly onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+        // Navigate history only when cursor is at first or last position of the textarea
+        if (Key.ARROW_UP.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionStart === 0) {
             e.preventDefault();
             this.previousValue();
-        } else if (Key.ARROW_DOWN.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode) {
+        } else if (Key.ARROW_DOWN.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionEnd === e.currentTarget.value.length) {
             e.preventDefault();
             this.nextValue();
         }
+
+        // Prevent newline on enter
+        if (Key.ENTER.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && !e.nativeEvent.shiftKey) {
+            e.preventDefault();
+        }
+
         this.props.onKeyDown?.(e);
     };
 
     /**
-     * Switch the input's text to the previous value, if any.
+     * Switch the textarea's text to the previous value, if any.
      */
     previousValue(): void {
         const { history, index } = this.state;
@@ -88,7 +116,7 @@ export class SearchInWorkspaceInput extends React.Component<InputAttributes, His
     }
 
     /**
-     * Switch the input's text to the next value, if any.
+     * Switch the textarea's text to the next value, if any.
      */
     nextValue(): void {
         const { history, index } = this.state;
@@ -102,10 +130,11 @@ export class SearchInWorkspaceInput extends React.Component<InputAttributes, His
     }
 
     /**
-     * Handle history collection without overriding the parent's onChange handler, if any.
+     * Handle history collection and textarea resizing without overriding the parent's onChange handler, if any.
      */
-    protected readonly onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    protected readonly onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
         this.addToHistory();
+        this.resizeTextarea();
         this.props.onChange?.(e);
     };
 
@@ -121,18 +150,21 @@ export class SearchInWorkspaceInput extends React.Component<InputAttributes, His
         const history = this.state.history
             .filter(term => term !== this.value)
             .concat(this.value)
-            .slice(-SearchInWorkspaceInput.LIMIT);
+            .slice(-SearchInWorkspaceTextArea.LIMIT);
         this.updateState(history.length - 1, history);
     }
 
     override render(): React.ReactNode {
         return (
-            <input
+            <textarea
                 {...this.props}
                 onKeyDown={this.onKeyDown}
                 onChange={this.onChange}
+                rows={Math.min(SearchInWorkspaceTextArea.MAX_ROWS, this.value.split('\n').length)}
                 spellCheck={false}
-                ref={this.input}
+                autoCorrect="off"
+                autoCapitalize="off"
+                ref={this.textarea}
             />
         );
     }
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
index b2e4bcda5d117..b78db3df30c38 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
@@ -873,19 +873,34 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             // Open the file only if the function is called to replace all matches under a specific node.
             const widget: EditorWidget = replaceOne ? await this.doOpen(toReplace[0]) : await this.doGetWidget(toReplace[0]);
             const source: string = widget.editor.document.getText();
-            const replaceOperations = toReplace.map(resultLineNode => ({
-                text: replacementText,
-                range: {
-                    start: {
-                        line: resultLineNode.line - 1,
-                        character: resultLineNode.character - 1
-                    },
-                    end: {
-                        line: resultLineNode.line - 1,
-                        character: resultLineNode.character - 1 + resultLineNode.length
+
+            const replaceOperations = toReplace.map(resultLineNode => {
+                const lineText = typeof resultLineNode.lineText === 'string' ? resultLineNode.lineText : resultLineNode.lineText.text;
+                const lines = lineText.split('\n');
+                let endCharacter = resultLineNode.character - 1 + resultLineNode.length;
+                if (lines.length > 1) {
+                    endCharacter = resultLineNode.length - lines[0].length + resultLineNode.character - lines.length;
+                    if (lines.length > 2) {
+                        for (const lineNum of Array(lines.length - 2).keys()) {
+                            endCharacter -= lines[lineNum + 1].length;
+                        }
                     }
                 }
-            }));
+                return {
+                    text: replacementText,
+                    range: {
+                        start: {
+                            line: resultLineNode.line - 1,
+                            character: resultLineNode.character - 1
+                        },
+                        end: {
+                            line: resultLineNode.line + lines.length - 2,
+                            character: endCharacter
+                        }
+                    }
+                };
+            });
+
             // Replace the text.
             await widget.editor.replaceText({
                 source,
@@ -1018,6 +1033,7 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
         }
 
         const before = lineText.slice(start, character - 1).trimLeft();
+        const multiline = lineText.includes('\n');
 
         return <div className={`resultLine noWrapInfo noselect ${node.selected ? 'selected' : ''}`} title={lineText.trim()}>
             {this.searchInWorkspacePreferences['search.lineNumbers'] && <span className='theia-siw-lineNumber'>{node.line}</span>}
@@ -1025,21 +1041,24 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
                 {before}
             </span>
             {this.renderMatchLinePart(node)}
-            <span>
+            {multiline || <span>
                 {lineText.slice(node.character + node.length - 1, 250 - before.length + node.length)}
-            </span>
+            </span>}
         </div>;
     }
 
     protected renderMatchLinePart(node: SearchInWorkspaceResultLineNode): React.ReactNode {
-        const replaceTerm = this.isReplacing ? <span className='replace-term'>{this._replaceTerm}</span> : '';
+        const replaceTermLines = this._replaceTerm.split('\n');
+        const replaceTerm = this.isReplacing ? <span className='replace-term'>{replaceTermLines[0]}</span> : '';
         const className = `match${this.isReplacing ? ' strike-through' : ''}`;
-        const match = typeof node.lineText === 'string' ?
-            node.lineText.substring(node.character - 1, node.length + node.character - 1)
-            : node.lineText.text.substring(node.lineText.character - 1, node.length + node.lineText.character - 1);
+        const text = typeof node.lineText === 'string' ? node.lineText : node.lineText.text;
+        const match = text.substr(node.character - 1, node.length + node.character - 1);
+        const matchLines = match.split('\n');
+        const matchLineNum = matchLines.length > 1 ? <span className='match-line-num'>+{matchLines.length + node.character - 1}</span> : '';
         return <React.Fragment>
-            <span className={className}>{match}</span>
+            <span className={className}>{matchLines[0]}</span>
             {replaceTerm}
+            {matchLineNum}
         </React.Fragment>;
     }
 
@@ -1065,6 +1084,19 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             fileUri = new URI(node.fileUri);
         }
 
+        const lineText = typeof node.lineText === 'string' ? node.lineText : node.lineText.text;
+        const lines = lineText.split('\n');
+
+        let endCharacter = node.character - 1 + node.length;
+        if (lines.length > 1) {
+            endCharacter = node.length - lines[0].length + node.character - lines.length;
+            if (lines.length > 2) {
+                for (const lineNum of Array(lines.length - 2).keys()) {
+                    endCharacter -= lines[lineNum + 1].length;
+                }
+            }
+        }
+
         const opts: EditorOpenerOptions = {
             selection: {
                 start: {
@@ -1072,8 +1104,8 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
                     character: node.character - 1
                 },
                 end: {
-                    line: node.line - 1,
-                    character: node.character - 1 + node.length
+                    line: node.line + lines.length - 2,
+                    character: endCharacter
                 }
             },
             mode: preview ? 'reveal' : 'activate',
@@ -1100,16 +1132,8 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             content = await resource.readContents();
         }
 
-        const lines = content.split('\n');
-        node.children.forEach(l => {
-            const leftPositionedNodes = node.children.filter(rl => rl.line === l.line && rl.character < l.character);
-            const diff = (this._replaceTerm.length - this.searchTerm.length) * leftPositionedNodes.length;
-            const start = lines[l.line - 1].substring(0, l.character - 1 + diff);
-            const end = lines[l.line - 1].substring(l.character - 1 + diff + l.length);
-            lines[l.line - 1] = start + this._replaceTerm + end;
-        });
-
-        return fileUri.withScheme(MEMORY_TEXT).withQuery(lines.join('\n'));
+        const searchTermRegExp = new RegExp(this.searchTerm, 'g');
+        return fileUri.withScheme(MEMORY_TEXT).withQuery(content.replace(searchTermRegExp, this._replaceTerm));
     }
 
     protected decorateEditor(node: SearchInWorkspaceFileNode | undefined, editorWidget: EditorWidget): void {
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
index fc6755c562255..914d6ad2bf98d 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -27,7 +27,7 @@ import { CancellationTokenSource } from '@theia/core';
 import { ProgressBarFactory } from '@theia/core/lib/browser/progress-bar-factory';
 import { EditorManager } from '@theia/editor/lib/browser';
 import { SearchInWorkspacePreferences } from './search-in-workspace-preferences';
-import { SearchInWorkspaceInput } from './components/search-in-workspace-input';
+import { SearchInWorkspaceTextArea } from './components/search-in-workspace-input';
 import { nls } from '@theia/core/lib/common/nls';
 
 export interface SearchFieldState {
@@ -65,10 +65,10 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
     protected searchTerm = '';
     protected replaceTerm = '';
 
-    private searchRef = React.createRef<SearchInWorkspaceInput>();
-    private replaceRef = React.createRef<SearchInWorkspaceInput>();
-    private includeRef = React.createRef<SearchInWorkspaceInput>();
-    private excludeRef = React.createRef<SearchInWorkspaceInput>();
+    private searchRef = React.createRef<SearchInWorkspaceTextArea>();
+    private replaceRef = React.createRef<SearchInWorkspaceTextArea>();
+    private includeRef = React.createRef<SearchInWorkspaceTextArea>();
+    private excludeRef = React.createRef<SearchInWorkspaceTextArea>();
 
     protected _showReplaceField = false;
     protected get showReplaceField(): boolean {
@@ -142,6 +142,7 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
             matchCase: false,
             matchWholeWord: false,
             useRegExp: false,
+            multiline: false,
             includeIgnored: false,
             include: [],
             exclude: [],
@@ -447,7 +448,8 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         const searchOptions: SearchInWorkspaceOptions = {
             ...this.searchInWorkspaceOptions,
             followSymlinks: this.shouldFollowSymlinks(),
-            matchCase: this.shouldMatchCase()
+            matchCase: this.shouldMatchCase(),
+            multiline: this.searchTerm.includes('\n')
         };
         this.resultTreeWidget.search(this.searchTerm, searchOptions);
     }
@@ -471,12 +473,10 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
     }
 
     protected renderSearchField(): React.ReactNode {
-        const input = <SearchInWorkspaceInput
+        const input = <SearchInWorkspaceTextArea
             id='search-input-field'
             className='theia-input'
             title={SearchInWorkspaceWidget.LABEL}
-            type='text'
-            size={1}
             placeholder={SearchInWorkspaceWidget.LABEL}
             defaultValue={this.searchTerm}
             autoComplete='off'
@@ -516,12 +516,10 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         const replaceAllButtonContainer = this.renderReplaceAllButtonContainer();
         const replace = nls.localizeByDefault('Replace');
         return <div className={`replace-field${this.showReplaceField ? '' : ' hidden'}`}>
-            <SearchInWorkspaceInput
+            <SearchInWorkspaceTextArea
                 id='replace-input-field'
                 className='theia-input'
                 title={replace}
-                type='text'
-                size={1}
                 placeholder={replace}
                 defaultValue={this.replaceTerm}
                 autoComplete='off'
@@ -612,10 +610,8 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         const value = currentValue && currentValue.join(', ') || '';
         return <div className='glob-field'>
             <div className='label'>{nls.localizeByDefault('files to ' + kind)}</div>
-            <SearchInWorkspaceInput
+            <SearchInWorkspaceTextArea
                 className='theia-input'
-                type='text'
-                size={1}
                 defaultValue={value}
                 autoComplete='off'
                 id={kind + '-glob-field'}
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index 4319881841901..f14905907e36b 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -39,6 +39,7 @@
   flex: 1;
   line-height: var(--theia-content-line-height);
   padding: 3px 0 3px 4px;
+  resize: none;
 }
 
 .t-siw-search-container #search-input-field:focus {
@@ -99,10 +100,12 @@
 }
 
 .t-siw-search-container .searchHeader .search-field .option-buttons {
-  height: 23px;
-  display: flex;
-  align-items: center;
-  background-color: none;
+    height: 23px;
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    background-color: none;
+    margin: 2px;
 }
 
 .t-siw-search-container .searchHeader .search-field-container.tooManyResults {
@@ -257,6 +260,13 @@
   border-style: dashed;
 }
 
+.t-siw-search-container .resultLine .match-line-num {
+    font-size: .9em;
+    margin-left: 7px;
+    margin-right: 4px;
+    opacity: .7;
+}
+
 .t-siw-search-container .noWrapInfo {
   width: 100%;
 }
@@ -346,10 +356,11 @@
 }
 
 .replace-all-button-container {
-  width: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    width: 25px;
+    display: flex;
+    align-items: start;
+    justify-content: center;
+    padding-top: 3px;
 }
 
 .result-node-buttons .replace-result {
diff --git a/packages/search-in-workspace/src/common/search-in-workspace-interface.ts b/packages/search-in-workspace/src/common/search-in-workspace-interface.ts
index bade899bdda86..28168ae8b9bba 100644
--- a/packages/search-in-workspace/src/common/search-in-workspace-interface.ts
+++ b/packages/search-in-workspace/src/common/search-in-workspace-interface.ts
@@ -41,6 +41,10 @@ export interface SearchInWorkspaceOptions {
      * Use regular expressions for search if true.
      */
     useRegExp?: boolean;
+    /**
+     * Use multiline search if true.
+     */
+    multiline?: boolean;
     /**
      * Include all .gitignored and hidden files.
      */
diff --git a/packages/search-in-workspace/src/node/ripgrep-search-in-workspace-server.ts b/packages/search-in-workspace/src/node/ripgrep-search-in-workspace-server.ts
index f22ccaf9ed731..a10fc6588a15c 100644
--- a/packages/search-in-workspace/src/node/ripgrep-search-in-workspace-server.ts
+++ b/packages/search-in-workspace/src/node/ripgrep-search-in-workspace-server.ts
@@ -101,6 +101,10 @@ export class RipgrepSearchInWorkspaceServer implements SearchInWorkspaceServer {
         args.add('--hidden');
         args.add('--json');
 
+        if (options?.multiline) {
+            args.add('--multiline');
+        }
+
         if (options?.matchCase) {
             args.add('--case-sensitive');
         } else {

From 423fd0829b00ee3dfb97dbba9e895285d61aa7ad Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Sun, 9 Apr 2023 21:04:33 +0200
Subject: [PATCH 02/11] search-in-workspace: Fix multiline matches in currently
 opened documents

---
 .../browser/search-in-workspace-result-tree-widget.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
index b78db3df30c38..17a69b5ea6fc7 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
@@ -303,12 +303,16 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
 
         const matches: SearchMatch[] = [];
         results.forEach(r => {
-            const lineText: string = widget.editor.document.getLineContent(r.range.start.line);
+            const numberOfLines = searchTerm.split('\n').length;
+            const lineTexts = [];
+            for (let i = 0; i < numberOfLines; i++) {
+                lineTexts.push(widget.editor.document.getLineContent(r.range.start.line + i));
+            }
             matches.push({
                 line: r.range.start.line,
                 character: r.range.start.character,
-                length: r.range.end.character - r.range.start.character,
-                lineText
+                length: searchTerm.length,
+                lineText: lineTexts.join('\n')
             });
         });
 

From 109379901927bc28977ca3c348fd6364a80ed42a Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Mon, 28 Aug 2023 19:33:14 +0200
Subject: [PATCH 03/11] Improve results styling

Signed-off-by: Christian Radke <c.radke@posteo.de>
---
 ...search-in-workspace-result-tree-widget.tsx | 33 ++++++++++---------
 .../src/browser/styles/index.css              | 20 ++++++-----
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
index 17a69b5ea6fc7..3c5f66713f43e 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
@@ -1036,19 +1036,22 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             wordBreak.lastIndex++;
         }
 
-        const before = lineText.slice(start, character - 1).trimLeft();
-        const multiline = lineText.includes('\n');
-
-        return <div className={`resultLine noWrapInfo noselect ${node.selected ? 'selected' : ''}`} title={lineText.trim()}>
-            {this.searchInWorkspacePreferences['search.lineNumbers'] && <span className='theia-siw-lineNumber'>{node.line}</span>}
-            <span>
-                {before}
-            </span>
-            {this.renderMatchLinePart(node)}
-            {multiline || <span>
-                {lineText.slice(node.character + node.length - 1, 250 - before.length + node.length)}
-            </span>}
-        </div>;
+        const before = lineText.slice(start, character - 1).trimStart();
+        const lineCount = lineText.split('\n').length;
+
+        return <>
+            <div className={`resultLine noWrapInfo noselect ${node.selected ? 'selected' : ''}`} title={lineText.trim()}>
+                {this.searchInWorkspacePreferences['search.lineNumbers'] && <span className='theia-siw-lineNumber'>{node.line}</span>}
+                <span>
+                    {before}
+                </span>
+                {this.renderMatchLinePart(node)}
+                {lineCount > 1 || <span>
+                    {lineText.slice(node.character + node.length - 1, 250 - before.length + node.length)}
+                </span>}
+            </div>
+            {lineCount > 1 && <div className='match-line-num'>+{lineCount - 1}</div>}
+        </>;
     }
 
     protected renderMatchLinePart(node: SearchInWorkspaceResultLineNode): React.ReactNode {
@@ -1056,13 +1059,11 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
         const replaceTerm = this.isReplacing ? <span className='replace-term'>{replaceTermLines[0]}</span> : '';
         const className = `match${this.isReplacing ? ' strike-through' : ''}`;
         const text = typeof node.lineText === 'string' ? node.lineText : node.lineText.text;
-        const match = text.substr(node.character - 1, node.length + node.character - 1);
+        const match = text.substring(node.character - 1, node.character + node.length - 1);
         const matchLines = match.split('\n');
-        const matchLineNum = matchLines.length > 1 ? <span className='match-line-num'>+{matchLines.length + node.character - 1}</span> : '';
         return <React.Fragment>
             <span className={className}>{matchLines[0]}</span>
             {replaceTerm}
-            {matchLineNum}
         </React.Fragment>;
     }
 
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index f14905907e36b..574e226f9bb97 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -237,7 +237,6 @@
 }
 
 .t-siw-search-container .resultLine .match {
-  line-height: normal;
   white-space: pre;
   background: var(--theia-editor-findMatchHighlightBackground);
   border: 1px solid var(--theia-editor-findMatchHighlightBorder);
@@ -260,20 +259,17 @@
   border-style: dashed;
 }
 
-.t-siw-search-container .resultLine .match-line-num {
+.t-siw-search-container .match-line-num {
     font-size: .9em;
     margin-left: 7px;
     margin-right: 4px;
     opacity: .7;
 }
 
-.t-siw-search-container .noWrapInfo {
-  width: 100%;
-}
-
 .t-siw-search-container .result-head-info {
-  display: inline-flex;
   align-items: center;
+  display: inline-flex;
+  flex-grow: 1;
 }
 
 .search-in-workspace-editor-match {
@@ -297,6 +293,7 @@
   justify-content: flex-end;
   align-items: center;
   align-self: center;
+  flex-grow: 1;
 }
 
 .theia-TreeNode:hover .result-head .notification-count-container {
@@ -304,13 +301,18 @@
 }
 
 .result-node-buttons > span {
-  width: 15px;
-  height: 15px;
+  width: 16px;
+  height: 16px;
   margin-left: 2.5px;
   margin-right: 0.5px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
+  border-radius: 3px;
+}
+
+.result-node-buttons > span:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
 }
 
 .search-and-replace-container {

From f0c09840acdd83d2ab2c7cb123c677901efe035a Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Mon, 28 Aug 2023 22:44:02 +0200
Subject: [PATCH 04/11] Fix glob fields

Signed-off-by: Christian Radke <c.radke@posteo.de>
---
 .../components/search-in-workspace-input.tsx  |  66 ++-----
 .../search-in-workspace-textarea.tsx          | 171 ++++++++++++++++++
 .../browser/search-in-workspace-widget.tsx    |  11 +-
 3 files changed, 195 insertions(+), 53 deletions(-)
 create mode 100644 packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx

diff --git a/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx b/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx
index 576e82a00d540..99b9a9e8da86d 100644
--- a/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx
+++ b/packages/search-in-workspace/src/browser/components/search-in-workspace-input.tsx
@@ -22,15 +22,14 @@ interface HistoryState {
     history: string[];
     index: number;
 };
-type TextareaAttributes = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+type InputAttributes = React.InputHTMLAttributes<HTMLInputElement>;
 
-export class SearchInWorkspaceTextArea extends React.Component<TextareaAttributes, HistoryState> {
+export class SearchInWorkspaceInput extends React.Component<InputAttributes, HistoryState> {
     static LIMIT = 100;
-    static MAX_ROWS = 7;
 
-    private textarea = React.createRef<HTMLTextAreaElement>();
+    private input = React.createRef<HTMLInputElement>();
 
-    constructor(props: TextareaAttributes) {
+    constructor(props: InputAttributes) {
         super(props);
         this.state = {
             history: [],
@@ -53,58 +52,31 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
     }
 
     get value(): string {
-        return this.textarea.current?.value ?? '';
+        return this.input.current?.value ?? '';
     }
 
     set value(value: string) {
-        if (this.textarea.current) {
-            this.textarea.current.value = value;
-            this.resizeTextarea();
+        if (this.input.current) {
+            this.input.current.value = value;
         }
     }
 
-    protected resizeTextarea(): void {
-        if (this.textarea.current) {
-            const computedStyle = window.getComputedStyle(this.textarea.current);
-            const lineHeight = parseInt(computedStyle.getPropertyValue('line-height'));
-            // Since the minimum scrollHeight of a textarea is always going to be its current height, we have
-            // to set the height to its minimum first to get an accurate scrollHeight value afterwards.
-            this.textarea.current.style.height = `${lineHeight}px`;
-            const textHeight = Math.min(
-                SearchInWorkspaceTextArea.MAX_ROWS * lineHeight,
-                this.textarea.current.scrollHeight
-                    - parseInt(computedStyle.getPropertyValue('border-bottom-width'))
-                    - parseInt(computedStyle.getPropertyValue('border-top-width'))
-                    - parseInt(computedStyle.getPropertyValue('padding-bottom'))
-                    - parseInt(computedStyle.getPropertyValue('padding-top'))
-            );
-            this.textarea.current.style.height = `${textHeight}px`;
-        }
-    };
-
     /**
      * Handle history navigation without overriding the parent's onKeyDown handler, if any.
      */
-    protected readonly onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
-        // Navigate history only when cursor is at first or last position of the textarea
-        if (Key.ARROW_UP.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionStart === 0) {
+    protected readonly onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+        if (Key.ARROW_UP.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode) {
             e.preventDefault();
             this.previousValue();
-        } else if (Key.ARROW_DOWN.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionEnd === e.currentTarget.value.length) {
+        } else if (Key.ARROW_DOWN.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode) {
             e.preventDefault();
             this.nextValue();
         }
-
-        // Prevent newline on enter
-        if (Key.ENTER.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && !e.nativeEvent.shiftKey) {
-            e.preventDefault();
-        }
-
         this.props.onKeyDown?.(e);
     };
 
     /**
-     * Switch the textarea's text to the previous value, if any.
+     * Switch the input's text to the previous value, if any.
      */
     previousValue(): void {
         const { history, index } = this.state;
@@ -116,7 +88,7 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
     }
 
     /**
-     * Switch the textarea's text to the next value, if any.
+     * Switch the input's text to the next value, if any.
      */
     nextValue(): void {
         const { history, index } = this.state;
@@ -130,11 +102,10 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
     }
 
     /**
-     * Handle history collection and textarea resizing without overriding the parent's onChange handler, if any.
+     * Handle history collection without overriding the parent's onChange handler, if any.
      */
-    protected readonly onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
+    protected readonly onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
         this.addToHistory();
-        this.resizeTextarea();
         this.props.onChange?.(e);
     };
 
@@ -150,21 +121,18 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
         const history = this.state.history
             .filter(term => term !== this.value)
             .concat(this.value)
-            .slice(-SearchInWorkspaceTextArea.LIMIT);
+            .slice(-SearchInWorkspaceInput.LIMIT);
         this.updateState(history.length - 1, history);
     }
 
     override render(): React.ReactNode {
         return (
-            <textarea
+            <input
                 {...this.props}
                 onKeyDown={this.onKeyDown}
                 onChange={this.onChange}
-                rows={Math.min(SearchInWorkspaceTextArea.MAX_ROWS, this.value.split('\n').length)}
                 spellCheck={false}
-                autoCorrect="off"
-                autoCapitalize="off"
-                ref={this.textarea}
+                ref={this.input}
             />
         );
     }
diff --git a/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx b/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
new file mode 100644
index 0000000000000..576e82a00d540
--- /dev/null
+++ b/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
@@ -0,0 +1,171 @@
+// *****************************************************************************
+// Copyright (C) 2021 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import * as React from '@theia/core/shared/react';
+import { Key, KeyCode } from '@theia/core/lib/browser';
+import debounce = require('@theia/core/shared/lodash.debounce');
+
+interface HistoryState {
+    history: string[];
+    index: number;
+};
+type TextareaAttributes = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export class SearchInWorkspaceTextArea extends React.Component<TextareaAttributes, HistoryState> {
+    static LIMIT = 100;
+    static MAX_ROWS = 7;
+
+    private textarea = React.createRef<HTMLTextAreaElement>();
+
+    constructor(props: TextareaAttributes) {
+        super(props);
+        this.state = {
+            history: [],
+            index: 0,
+        };
+    }
+
+    updateState(index: number, history?: string[]): void {
+        this.value = history ? history[index] : this.state.history[index];
+        this.setState(prevState => {
+            const newState = {
+                ...prevState,
+                index,
+            };
+            if (history) {
+                newState.history = history;
+            }
+            return newState;
+        });
+    }
+
+    get value(): string {
+        return this.textarea.current?.value ?? '';
+    }
+
+    set value(value: string) {
+        if (this.textarea.current) {
+            this.textarea.current.value = value;
+            this.resizeTextarea();
+        }
+    }
+
+    protected resizeTextarea(): void {
+        if (this.textarea.current) {
+            const computedStyle = window.getComputedStyle(this.textarea.current);
+            const lineHeight = parseInt(computedStyle.getPropertyValue('line-height'));
+            // Since the minimum scrollHeight of a textarea is always going to be its current height, we have
+            // to set the height to its minimum first to get an accurate scrollHeight value afterwards.
+            this.textarea.current.style.height = `${lineHeight}px`;
+            const textHeight = Math.min(
+                SearchInWorkspaceTextArea.MAX_ROWS * lineHeight,
+                this.textarea.current.scrollHeight
+                    - parseInt(computedStyle.getPropertyValue('border-bottom-width'))
+                    - parseInt(computedStyle.getPropertyValue('border-top-width'))
+                    - parseInt(computedStyle.getPropertyValue('padding-bottom'))
+                    - parseInt(computedStyle.getPropertyValue('padding-top'))
+            );
+            this.textarea.current.style.height = `${textHeight}px`;
+        }
+    };
+
+    /**
+     * Handle history navigation without overriding the parent's onKeyDown handler, if any.
+     */
+    protected readonly onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+        // Navigate history only when cursor is at first or last position of the textarea
+        if (Key.ARROW_UP.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionStart === 0) {
+            e.preventDefault();
+            this.previousValue();
+        } else if (Key.ARROW_DOWN.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionEnd === e.currentTarget.value.length) {
+            e.preventDefault();
+            this.nextValue();
+        }
+
+        // Prevent newline on enter
+        if (Key.ENTER.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && !e.nativeEvent.shiftKey) {
+            e.preventDefault();
+        }
+
+        this.props.onKeyDown?.(e);
+    };
+
+    /**
+     * Switch the textarea's text to the previous value, if any.
+     */
+    previousValue(): void {
+        const { history, index } = this.state;
+        if (!this.value) {
+            this.value = history[index];
+        } else if (index > 0 && index < history.length) {
+            this.updateState(index - 1);
+        }
+    }
+
+    /**
+     * Switch the textarea's text to the next value, if any.
+     */
+    nextValue(): void {
+        const { history, index } = this.state;
+        if (index === history.length - 1) {
+            this.value = '';
+        } else if (!this.value) {
+            this.value = history[index];
+        } else if (index >= 0 && index < history.length - 1) {
+            this.updateState(index + 1);
+        }
+    }
+
+    /**
+     * Handle history collection and textarea resizing without overriding the parent's onChange handler, if any.
+     */
+    protected readonly onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
+        this.addToHistory();
+        this.resizeTextarea();
+        this.props.onChange?.(e);
+    };
+
+    /**
+     * Add a nonempty current value to the history, if not already present. (Debounced, 1 second delay.)
+     */
+    readonly addToHistory = debounce(this.doAddToHistory, 1000);
+
+    private doAddToHistory(): void {
+        if (!this.value) {
+            return;
+        }
+        const history = this.state.history
+            .filter(term => term !== this.value)
+            .concat(this.value)
+            .slice(-SearchInWorkspaceTextArea.LIMIT);
+        this.updateState(history.length - 1, history);
+    }
+
+    override render(): React.ReactNode {
+        return (
+            <textarea
+                {...this.props}
+                onKeyDown={this.onKeyDown}
+                onChange={this.onChange}
+                rows={Math.min(SearchInWorkspaceTextArea.MAX_ROWS, this.value.split('\n').length)}
+                spellCheck={false}
+                autoCorrect="off"
+                autoCapitalize="off"
+                ref={this.textarea}
+            />
+        );
+    }
+}
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
index 914d6ad2bf98d..14e89ac94e97e 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -27,7 +27,8 @@ import { CancellationTokenSource } from '@theia/core';
 import { ProgressBarFactory } from '@theia/core/lib/browser/progress-bar-factory';
 import { EditorManager } from '@theia/editor/lib/browser';
 import { SearchInWorkspacePreferences } from './search-in-workspace-preferences';
-import { SearchInWorkspaceTextArea } from './components/search-in-workspace-input';
+import { SearchInWorkspaceInput } from './components/search-in-workspace-input';
+import { SearchInWorkspaceTextArea } from './components/search-in-workspace-textarea';
 import { nls } from '@theia/core/lib/common/nls';
 
 export interface SearchFieldState {
@@ -67,8 +68,8 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
 
     private searchRef = React.createRef<SearchInWorkspaceTextArea>();
     private replaceRef = React.createRef<SearchInWorkspaceTextArea>();
-    private includeRef = React.createRef<SearchInWorkspaceTextArea>();
-    private excludeRef = React.createRef<SearchInWorkspaceTextArea>();
+    private includeRef = React.createRef<SearchInWorkspaceInput>();
+    private excludeRef = React.createRef<SearchInWorkspaceInput>();
 
     protected _showReplaceField = false;
     protected get showReplaceField(): boolean {
@@ -610,8 +611,10 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         const value = currentValue && currentValue.join(', ') || '';
         return <div className='glob-field'>
             <div className='label'>{nls.localizeByDefault('files to ' + kind)}</div>
-            <SearchInWorkspaceTextArea
+            <SearchInWorkspaceInput
                 className='theia-input'
+                type='text'
+                size={1}
                 defaultValue={value}
                 autoComplete='off'
                 id={kind + '-glob-field'}

From d2646eb60dd2106db45612752448b34850ddf63b Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Mon, 28 Aug 2023 22:44:20 +0200
Subject: [PATCH 05/11] Fix textarea resizing

---
 packages/search-in-workspace/src/browser/styles/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index 574e226f9bb97..31224ea272fcf 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -50,6 +50,7 @@
 .t-siw-search-container #search-input-field {
   background: none;
   border: none;
+  width: 100%;
 }
 
 .t-siw-search-container .searchHeader {

From d99268394bb8f4f43b3268b3d63be00688141c42 Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Mon, 28 Aug 2023 22:59:13 +0200
Subject: [PATCH 06/11] Dynamic textarea resize

Signed-off-by: Christian Radke <c.radke@posteo.de>
---
 .../browser/components/search-in-workspace-textarea.tsx  | 9 ++++++++-
 .../src/browser/search-in-workspace-widget.tsx           | 2 ++
 .../search-in-workspace/src/browser/styles/index.css     | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx b/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
index 576e82a00d540..4fd74b9b34a7b 100644
--- a/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
+++ b/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
@@ -38,6 +38,14 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
         };
     }
 
+    override componentDidMount(): void {
+        this.resizeTextarea();
+    }
+
+    override componentDidUpdate(prevProps: Readonly<TextareaAttributes>, prevState: Readonly<HistoryState>): void {
+        this.resizeTextarea();
+    }
+
     updateState(index: number, history?: string[]): void {
         this.value = history ? history[index] : this.state.history[index];
         this.setState(prevState => {
@@ -160,7 +168,6 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
                 {...this.props}
                 onKeyDown={this.onKeyDown}
                 onChange={this.onChange}
-                rows={Math.min(SearchInWorkspaceTextArea.MAX_ROWS, this.value.split('\n').length)}
                 spellCheck={false}
                 autoCorrect="off"
                 autoCapitalize="off"
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
index 14e89ac94e97e..c5aada64b85d2 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -325,6 +325,8 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
 
     protected override onResize(msg: Widget.ResizeMessage): void {
         super.onResize(msg);
+        this.searchRef.current?.forceUpdate();
+        this.replaceRef.current?.forceUpdate();
         MessageLoop.sendMessage(this.resultTreeWidget, Widget.ResizeMessage.UnknownSize);
     }
 
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index 31224ea272fcf..40e9549bd43c8 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -40,6 +40,7 @@
   line-height: var(--theia-content-line-height);
   padding: 3px 0 3px 4px;
   resize: none;
+  width: 100%;
 }
 
 .t-siw-search-container #search-input-field:focus {
@@ -50,7 +51,6 @@
 .t-siw-search-container #search-input-field {
   background: none;
   border: none;
-  width: 100%;
 }
 
 .t-siw-search-container .searchHeader {

From c844a8999f5033ae7caf996ccc25ed483ff162a5 Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Thu, 7 Sep 2023 13:38:02 +0200
Subject: [PATCH 07/11] Adapt react-autosize-textarea

---
 packages/search-in-workspace/package.json     |  3 +-
 .../search-in-workspace-textarea.tsx          | 51 +++++--------------
 .../src/browser/styles/index.css              |  6 ++-
 3 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/packages/search-in-workspace/package.json b/packages/search-in-workspace/package.json
index 99a0290fd8ecc..a3da14579d89a 100644
--- a/packages/search-in-workspace/package.json
+++ b/packages/search-in-workspace/package.json
@@ -10,7 +10,8 @@
     "@theia/process": "1.40.0",
     "@theia/workspace": "1.40.0",
     "@vscode/ripgrep": "^1.14.2",
-    "minimatch": "^5.1.0"
+    "minimatch": "^5.1.0",
+    "react-autosize-textarea": "^7.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx b/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
index 4fd74b9b34a7b..812c46ebad243 100644
--- a/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
+++ b/packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx
@@ -14,8 +14,9 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import * as React from '@theia/core/shared/react';
 import { Key, KeyCode } from '@theia/core/lib/browser';
+import * as React from '@theia/core/shared/react';
+import TextareaAutosize from 'react-autosize-textarea';
 import debounce = require('@theia/core/shared/lodash.debounce');
 
 interface HistoryState {
@@ -26,7 +27,6 @@ type TextareaAttributes = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 export class SearchInWorkspaceTextArea extends React.Component<TextareaAttributes, HistoryState> {
     static LIMIT = 100;
-    static MAX_ROWS = 7;
 
     private textarea = React.createRef<HTMLTextAreaElement>();
 
@@ -38,14 +38,6 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
         };
     }
 
-    override componentDidMount(): void {
-        this.resizeTextarea();
-    }
-
-    override componentDidUpdate(prevProps: Readonly<TextareaAttributes>, prevState: Readonly<HistoryState>): void {
-        this.resizeTextarea();
-    }
-
     updateState(index: number, history?: string[]): void {
         this.value = history ? history[index] : this.state.history[index];
         this.setState(prevState => {
@@ -67,29 +59,9 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
     set value(value: string) {
         if (this.textarea.current) {
             this.textarea.current.value = value;
-            this.resizeTextarea();
         }
     }
 
-    protected resizeTextarea(): void {
-        if (this.textarea.current) {
-            const computedStyle = window.getComputedStyle(this.textarea.current);
-            const lineHeight = parseInt(computedStyle.getPropertyValue('line-height'));
-            // Since the minimum scrollHeight of a textarea is always going to be its current height, we have
-            // to set the height to its minimum first to get an accurate scrollHeight value afterwards.
-            this.textarea.current.style.height = `${lineHeight}px`;
-            const textHeight = Math.min(
-                SearchInWorkspaceTextArea.MAX_ROWS * lineHeight,
-                this.textarea.current.scrollHeight
-                    - parseInt(computedStyle.getPropertyValue('border-bottom-width'))
-                    - parseInt(computedStyle.getPropertyValue('border-top-width'))
-                    - parseInt(computedStyle.getPropertyValue('padding-bottom'))
-                    - parseInt(computedStyle.getPropertyValue('padding-top'))
-            );
-            this.textarea.current.style.height = `${textHeight}px`;
-        }
-    };
-
     /**
      * Handle history navigation without overriding the parent's onKeyDown handler, if any.
      */
@@ -142,7 +114,6 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
      */
     protected readonly onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
         this.addToHistory();
-        this.resizeTextarea();
         this.props.onChange?.(e);
     };
 
@@ -163,16 +134,20 @@ export class SearchInWorkspaceTextArea extends React.Component<TextareaAttribute
     }
 
     override render(): React.ReactNode {
+        const { onResize, ...filteredProps } = this.props;
         return (
-            <textarea
-                {...this.props}
-                onKeyDown={this.onKeyDown}
-                onChange={this.onChange}
-                spellCheck={false}
-                autoCorrect="off"
+            <TextareaAutosize
+                {...filteredProps}
                 autoCapitalize="off"
+                autoCorrect="off"
+                maxRows={7} /* from VS Code */
+                onChange={this.onChange}
+                onKeyDown={this.onKeyDown}
                 ref={this.textarea}
-            />
+                rows={1}
+                spellCheck={false}
+            >
+            </TextareaAutosize>
         );
     }
 }
diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index 40e9549bd43c8..acf4a0b2c7246 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -38,7 +38,9 @@
 .t-siw-search-container .theia-input {
   flex: 1;
   line-height: var(--theia-content-line-height);
-  padding: 3px 0 3px 4px;
+  max-height: calc(7 * var(--theia-content-line-height));
+  min-width: 16px;
+  padding: 3px 0 0 4px;
   resize: none;
   width: 100%;
 }
@@ -309,7 +311,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  border-radius: 3px;
+  border-radius: 5px;
 }
 
 .result-node-buttons > span:hover {

From b7da628fc32b2ecf5599ea2eff43618d170f3bcb Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Mon, 11 Sep 2023 13:08:03 +0200
Subject: [PATCH 08/11] Fix search boxes dimensions and resizing behavior

---
 packages/search-in-workspace/src/browser/styles/index.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index acf4a0b2c7246..f75477b5ae3b7 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -36,11 +36,12 @@
 }
 
 .t-siw-search-container .theia-input {
+  box-sizing: border-box;
   flex: 1;
   line-height: var(--theia-content-line-height);
-  max-height: calc(7 * var(--theia-content-line-height));
+  max-height: calc(2 * 3px + 7 * var(--theia-content-line-height));
   min-width: 16px;
-  padding: 3px 0 0 4px;
+  padding: 3px 0 3px 4px;
   resize: none;
   width: 100%;
 }
@@ -349,6 +350,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  overflow: hidden;
 }
 
 .replace-field {

From 86a1a5621a19a0bc24941801910e535711564371 Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Mon, 11 Sep 2023 18:15:32 +0200
Subject: [PATCH 09/11] Fix "too many results" notice

---
 packages/search-in-workspace/src/browser/styles/index.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index f75477b5ae3b7..075a27e8ef51a 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -115,7 +115,6 @@
 .t-siw-search-container .searchHeader .search-field-container.tooManyResults {
   border-style: solid;
   border-width: var(--theia-border-width);
-  margin: -1px;
   border-color: var(--theia-inputValidation-warningBorder);
 }
 
@@ -350,7 +349,6 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  overflow: hidden;
 }
 
 .replace-field {

From 96248edc0befcf26318512084dd745bae9726a8c Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Tue, 12 Sep 2023 21:46:45 +0200
Subject: [PATCH 10/11] Extract duplicate code

---
 ...search-in-workspace-result-tree-widget.tsx | 71 ++++++++-----------
 1 file changed, 28 insertions(+), 43 deletions(-)

diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
index 3c5f66713f43e..2b6922ba3f7c7 100644
--- a/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
+++ b/packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx
@@ -36,7 +36,7 @@ import {
 import { CancellationTokenSource, Emitter, EOL, Event, ProgressService } from '@theia/core';
 import {
     EditorManager, EditorDecoration, TrackedRangeStickiness, OverviewRulerLane,
-    EditorWidget, EditorOpenerOptions, FindMatch
+    EditorWidget, EditorOpenerOptions, FindMatch, Position
 } from '@theia/editor/lib/browser';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { FileResourceResolver, FileSystemPreferences } from '@theia/filesystem/lib/browser';
@@ -878,32 +878,16 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             const widget: EditorWidget = replaceOne ? await this.doOpen(toReplace[0]) : await this.doGetWidget(toReplace[0]);
             const source: string = widget.editor.document.getText();
 
-            const replaceOperations = toReplace.map(resultLineNode => {
-                const lineText = typeof resultLineNode.lineText === 'string' ? resultLineNode.lineText : resultLineNode.lineText.text;
-                const lines = lineText.split('\n');
-                let endCharacter = resultLineNode.character - 1 + resultLineNode.length;
-                if (lines.length > 1) {
-                    endCharacter = resultLineNode.length - lines[0].length + resultLineNode.character - lines.length;
-                    if (lines.length > 2) {
-                        for (const lineNum of Array(lines.length - 2).keys()) {
-                            endCharacter -= lines[lineNum + 1].length;
-                        }
-                    }
+            const replaceOperations = toReplace.map(resultLineNode => ({
+                text: replacementText,
+                range: {
+                    start: {
+                        line: resultLineNode.line - 1,
+                        character: resultLineNode.character - 1
+                    },
+                    end: this.findEndCharacterPosition(resultLineNode),
                 }
-                return {
-                    text: replacementText,
-                    range: {
-                        start: {
-                            line: resultLineNode.line - 1,
-                            character: resultLineNode.character - 1
-                        },
-                        end: {
-                            line: resultLineNode.line + lines.length - 2,
-                            character: endCharacter
-                        }
-                    }
-                };
-            });
+            }));
 
             // Replace the text.
             await widget.editor.replaceText({
@@ -974,6 +958,23 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
         }
     }
 
+    private findEndCharacterPosition(node: SearchInWorkspaceResultLineNode): Position {
+        const lineText = typeof node.lineText === 'string' ? node.lineText : node.lineText.text;
+        const lines = lineText.split('\n');
+        const line = node.line + lines.length - 2;
+        let character = node.character - 1 + node.length;
+        if (lines.length > 1) {
+            character = node.length - lines[0].length + node.character - lines.length;
+            if (lines.length > 2) {
+                for (const lineNum of Array(lines.length - 2).keys()) {
+                    character -= lines[lineNum + 1].length;
+                }
+            }
+        }
+
+        return { line, character };
+    }
+
     protected renderRootFolderNode(node: SearchInWorkspaceRootFolderNode): React.ReactNode {
         return <div className='result'>
             <div className='result-head'>
@@ -1089,29 +1090,13 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             fileUri = new URI(node.fileUri);
         }
 
-        const lineText = typeof node.lineText === 'string' ? node.lineText : node.lineText.text;
-        const lines = lineText.split('\n');
-
-        let endCharacter = node.character - 1 + node.length;
-        if (lines.length > 1) {
-            endCharacter = node.length - lines[0].length + node.character - lines.length;
-            if (lines.length > 2) {
-                for (const lineNum of Array(lines.length - 2).keys()) {
-                    endCharacter -= lines[lineNum + 1].length;
-                }
-            }
-        }
-
         const opts: EditorOpenerOptions = {
             selection: {
                 start: {
                     line: node.line - 1,
                     character: node.character - 1
                 },
-                end: {
-                    line: node.line + lines.length - 2,
-                    character: endCharacter
-                }
+                end: this.findEndCharacterPosition(node),
             },
             mode: preview ? 'reveal' : 'activate',
             preview,

From a17737f6d401bae958012f2c8cc6cc7890ab8d66 Mon Sep 17 00:00:00 2001
From: Christian Radke <c.radke@posteo.de>
Date: Tue, 12 Sep 2023 22:14:47 +0200
Subject: [PATCH 11/11] Fix search result hover

---
 packages/search-in-workspace/src/browser/styles/index.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
index 075a27e8ef51a..778308927d103 100644
--- a/packages/search-in-workspace/src/browser/styles/index.css
+++ b/packages/search-in-workspace/src/browser/styles/index.css
@@ -296,7 +296,6 @@
   justify-content: flex-end;
   align-items: center;
   align-self: center;
-  flex-grow: 1;
 }
 
 .theia-TreeNode:hover .result-head .notification-count-container {