From dcedd6081ddb28497850ba9176cd7b90e24d180e Mon Sep 17 00:00:00 2001
From: Gilbert Cherrie <Gilbert.Cherrie@ibm.com>
Date: Mon, 28 Oct 2024 13:57:04 -0400
Subject: [PATCH] Fix explorer title width

---
 app/javascript/components/gtl-view.jsx           | 5 +++++
 app/javascript/react/textual_summary_wrapper.jsx | 5 +++++
 app/stylesheet/legacy/patternfly_overrides.scss  | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/app/javascript/components/gtl-view.jsx b/app/javascript/components/gtl-view.jsx
index 6f38b3b4129..9f62115381a 100644
--- a/app/javascript/components/gtl-view.jsx
+++ b/app/javascript/components/gtl-view.jsx
@@ -302,6 +302,11 @@ const GtlView = ({
   const [state, dispatch] = useReducer(gtlReducer, initState);
 
   useEffect(() => {
+    // If id is explorer_wide, change back to explorer to ensure search bar fits on the same line of the page.
+    if (document.getElementById('explorer_wide')) {
+      document.getElementById('explorer_wide').setAttribute('id', 'explorer');
+    }
+
     // eslint-disable-next-line no-unused-expressions
     if (!noFlashDiv) {
       flashMessages && flashMessages.forEach((message) => add_flash(message.message, message.level));
diff --git a/app/javascript/react/textual_summary_wrapper.jsx b/app/javascript/react/textual_summary_wrapper.jsx
index cb2e3a1dbed..e58a0a12bfa 100644
--- a/app/javascript/react/textual_summary_wrapper.jsx
+++ b/app/javascript/react/textual_summary_wrapper.jsx
@@ -4,6 +4,11 @@ import { TextualSummary } from '../components/textual_summary';
 import textualSummaryGenericClick from './textual_summary_click';
 
 export default (props) => {
+  // If id is explorer, change to explorer_wide on textual summary page to fit long titles on the same line.
+  // Textual summary page has no search bar so we can use 100% width for the title.
+  if (document.getElementById('explorer')) {
+    document.getElementById('explorer').setAttribute('id', 'explorer_wide');
+  }
   const onClick = props.onClick || textualSummaryGenericClick;
   const component = <TextualSummary onClick={onClick} {...props} />;
   if (props.options && Object.keys(props.options).length > 0) {
diff --git a/app/stylesheet/legacy/patternfly_overrides.scss b/app/stylesheet/legacy/patternfly_overrides.scss
index 218e26a746c..bdca7351979 100644
--- a/app/stylesheet/legacy/patternfly_overrides.scss
+++ b/app/stylesheet/legacy/patternfly_overrides.scss
@@ -308,6 +308,10 @@ miq-quadicon > .single-wrapper {
   }
 }
 
+#explorer_wide {
+  width: 100%;
+}
+
 /// end paginator styling
 
 /// begin table view styling