Fixes canvas background and go to app crashing (#7725)

* Fix UI issues

* Fix Scrollbar is not available after we pin the inspector.

* Fix button  jumping places if switched from extended monitor to laptop.

* fix enable pagination not getting toggled in listview

* Fix form children not being displayed

* Fix Go to app is crashing the application.

* Fix fx for canvas background color is not working.

frontend/src/Editor/Header/GlobalSettings.jsx

@@ -20,7 +20,6 @@ export const GlobalSettings = ({
   darkMode,
   toggleAppMaintenance,
   isMaintenanceOn,
-  // app,
   backgroundFxQuery,
   realState,
 }) => {
@@ -233,7 +232,6 @@ export const GlobalSettings = ({
                             canvasBackgroundColor: resolveReferences(color, realState),
                             backgroundFxQuery: color,
                           };
-
                           globalSettingsChanged(options);
                         }}
                       />

frontend/src/Editor/Inspector/ActionConfigurationPanels/GotoApp.jsx

@@ -69,7 +69,7 @@ export function GotoApp({ getAllApps, event, handlerChanged, eventIndex, darkMod
           <div key={index} className="row input-group mt-1">
             <div className="col">
               <CodeHinter
-                initialValue={event.queryParams[index][0]}
+                initialValue={event?.queryParams?.[index]?.[0]}
                 onChange={(value) => queryParamChangeHandler(index, 0, value)}
                 mode="javascript"
                 height={30}
@@ -77,7 +77,7 @@ export function GotoApp({ getAllApps, event, handlerChanged, eventIndex, darkMod
             </div>
             <div className="col">
               <CodeHinter
-                initialValue={event.queryParams[index][1]}
+                initialValue={event?.queryParams?.[index]?.[1]}
                 onChange={(value) => queryParamChangeHandler(index, 1, value)}
                 mode="javascript"
                 height={30}

frontend/src/Editor/LeftSidebar/index.jsx

@@ -19,6 +19,8 @@ import { useDataSources } from '@/_stores/dataSourcesStore';
 import { shallow } from 'zustand/shallow';
 import useDebugger from './SidebarDebugger/useDebugger';
 import { GlobalSettings } from '../Header/GlobalSettings';
+import { resolveReferences } from '@/_helpers/utils';
+import { useCurrentState } from '@/_stores/currentStateStore';
 
 export const LeftSidebar = forwardRef((props, ref) => {
   const router = useRouter();
@@ -75,6 +77,7 @@ export const LeftSidebar = forwardRef((props, ref) => {
     }),
     shallow
   );
+  const currentState = useCurrentState();
   const [pinned, setPinned] = useState(!!localStorage.getItem('selectedSidebarItem'));
 
   const { errorLogs, clearErrorLogs, unReadErrorCount, allLog } = useDebugger({
@@ -135,6 +138,8 @@ export const LeftSidebar = forwardRef((props, ref) => {
     sideBarBtnRefs.current[page] = ref;
   };
 
+  const backgroundFxQuery = appDefinition?.globalSettings?.backgroundFxQuery;
+
   const SELECTED_ITEMS = {
     page: (
       <LeftSidebarPageSelector
@@ -214,10 +219,18 @@ export const LeftSidebar = forwardRef((props, ref) => {
         toggleAppMaintenance={toggleAppMaintenance}
         isMaintenanceOn={isMaintenanceOn}
         app={app}
+        realState={currentState}
+        backgroundFxQuery={backgroundFxQuery}
       />
     ),
   };
 
+  useEffect(() => {
+    backgroundFxQuery &&
+      globalSettingsChanged({ canvasBackgroundColor: resolveReferences(backgroundFxQuery, currentState) });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(resolveReferences(backgroundFxQuery, currentState))]);
+
   return (
     <div className="left-sidebar" data-cy="left-sidebar-inspector">
       <LeftSidebarItem