Fix explorer title width

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));

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) {

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