From 81f6f40ecfb6aeb977268f325d0c013192817191 Mon Sep 17 00:00:00 2001
From: Danny Rorabaugh <imnasnainaec@gmail.com>
Date: Mon, 29 Jun 2026 14:52:45 -0400
Subject: [PATCH] Fix missing search bar in find-word and find-related-words
 webviews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SearchBar's tw:@container/search wrapper sets container-type: inline-size,
which collapses to zero width in a flex context without an explicit width.
Add tw:w-full to the wrapper div and isFullWidth to SearchBar — mirrors the
fix applied to the paranext-core dictionary component in c63af4e205.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/web-views/find-related-words.web-view.tsx              | 3 ++-
 platform.bible-extension/src/web-views/find-word.web-view.tsx  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/platform.bible-extension/src/web-views/find-related-words.web-view.tsx b/platform.bible-extension/src/web-views/find-related-words.web-view.tsx
index 25af830f8a..0b5f00600d 100644
--- a/platform.bible-extension/src/web-views/find-related-words.web-view.tsx
+++ b/platform.bible-extension/src/web-views/find-related-words.web-view.tsx
@@ -143,8 +143,9 @@ globalThis.webViewComponent = function LexiconFindRelatedWords({
       elementHeader={
         <div className="tw:flex tw:flex-col tw:gap-2">
           <div className="tw:flex tw:gap-2">
-            <div className="tw:max-w-lg">
+            <div className="tw:w-full tw:max-w-lg">
               <SearchBar
+                isFullWidth
                 onSearch={onSearch}
                 placeholder={localizedStrings['%lexicon_findRelatedWord_textField%']}
                 value={searchTerm}
diff --git a/platform.bible-extension/src/web-views/find-word.web-view.tsx b/platform.bible-extension/src/web-views/find-word.web-view.tsx
index 0bfb8d17f4..e5ef1fa262 100644
--- a/platform.bible-extension/src/web-views/find-word.web-view.tsx
+++ b/platform.bible-extension/src/web-views/find-word.web-view.tsx
@@ -95,8 +95,9 @@ globalThis.webViewComponent = function LexiconFindWord({
     <EntryListWrapper
       elementHeader={
         <div className="tw:flex tw:gap-2">
-          <div className="tw:max-w-72">
+          <div className="tw:w-full tw:max-w-72">
             <SearchBar
+              isFullWidth
               onSearch={onSearch}
               placeholder={localizedStrings['%lexicon_findWord_textField%']}
               value={searchTerm}