From 56984b03f4f6d53b8a3c227b9d36094984d04b8a Mon Sep 17 00:00:00 2001
From: Sudharsan Selvaraj <sudharsanselvaraj.c@gmail.com>
Date: Mon, 19 Aug 2024 17:36:54 +0530
Subject: [PATCH] fix infinite rendering and responsive issue

---
 app/common/public/locales/da/translation.json  |  3 +--
 app/common/public/locales/en/translation.json  |  3 ++-
 .../components/Inspector/Inspector.jsx         | 18 ++++++++++--------
 .../components/Inspector/Inspector.module.css  |  8 ++++----
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/common/public/locales/da/translation.json b/app/common/public/locales/da/translation.json
index 36be5dfbca..cec2c13229 100644
--- a/app/common/public/locales/da/translation.json
+++ b/app/common/public/locales/da/translation.json
@@ -283,6 +283,5 @@
   "invalidCapType": "Invalid capability type: {{type}}",
   "whitespaceDetected": "Text Starts and/or Ends With Whitespace",
   "pcloudyCredentialsRequired": "pCloudy username and api key are required!",
-  "duplicateCapabilityNameError": "A capability set with the same name already exists",
-  "searchInPageSource": "Search in page source"
+  "duplicateCapabilityNameError": "A capability set with the same name already exists"
 }
diff --git a/app/common/public/locales/en/translation.json b/app/common/public/locales/en/translation.json
index cec2c13229..36be5dfbca 100644
--- a/app/common/public/locales/en/translation.json
+++ b/app/common/public/locales/en/translation.json
@@ -283,5 +283,6 @@
   "invalidCapType": "Invalid capability type: {{type}}",
   "whitespaceDetected": "Text Starts and/or Ends With Whitespace",
   "pcloudyCredentialsRequired": "pCloudy username and api key are required!",
-  "duplicateCapabilityNameError": "A capability set with the same name already exists"
+  "duplicateCapabilityNameError": "A capability set with the same name already exists",
+  "searchInPageSource": "Search in page source"
 }
diff --git a/app/common/renderer/components/Inspector/Inspector.jsx b/app/common/renderer/components/Inspector/Inspector.jsx
index 9b522b9f81..7a3058ebe0 100644
--- a/app/common/renderer/components/Inspector/Inspector.jsx
+++ b/app/common/renderer/components/Inspector/Inspector.jsx
@@ -324,14 +324,16 @@ const Inspector = (props) => {
                         </span>
                       }
                       extra={
-                        <Row>
-                          <Input
-                            size="middle"
-                            allowClear
-                            placeholder={t('searchInPageSource')}
-                            onChange={(e) => setPageSourceSearchText(e.target.value)}
-                            prefix={<SearchOutlined />}
-                          />
+                        <Row wrap={false}>
+                          <div className={InspectorStyles['inspector-source-tree-search-input']}>
+                            <Input
+                              size="middle"
+                              allowClear
+                              placeholder={t('searchInPageSource')}
+                              onChange={(e) => setPageSourceSearchText(e.target.value)}
+                              prefix={<SearchOutlined />}
+                            />
+                          </div>
                           <Tooltip title={t('Toggle Attributes')}>
                             <Button
                               type="text"
diff --git a/app/common/renderer/components/Inspector/Inspector.module.css b/app/common/renderer/components/Inspector/Inspector.module.css
index a92025e3d1..ba82353bd9 100644
--- a/app/common/renderer/components/Inspector/Inspector.module.css
+++ b/app/common/renderer/components/Inspector/Inspector.module.css
@@ -73,10 +73,6 @@
   height: 100%;
 }
 
-.inspector-main .interaction-tab-container :global(.ant-input-affix-wrapper) {
-  width: 200px;
-}
-
 .inspector-main .interaction-tab-container {
   position: relative;
   flex-grow: 1;
@@ -748,3 +744,7 @@
   color: #272625;
   background: #b6d932;
 }
+
+.inspector-source-tree-search-input {
+  max-width: 200px;
+}