fix: Add app title in browser tab title when nav is set to side

app/client/src/pages/AppViewer/Navigation/components/TopHeader.tsx

@@ -9,11 +9,7 @@ import React from "react";
 import { useSelector } from "react-redux";
 import { builderURL } from "RouteBuilder";
 import { getSelectedAppTheme } from "selectors/appThemingSelectors";
-import {
-  getCurrentPageDescription,
-  getCurrentPageId,
-} from "selectors/editorSelectors";
-import HtmlTitle from "../../AppViewerHtmlTitle";
+import { getCurrentPageId } from "selectors/editorSelectors";
 import MobileNavToggle from "./MobileNavToggle";
 import ApplicationName from "./ApplicationName";
 import ShareButton from "./ShareButton";
@@ -62,7 +58,6 @@ const TopHeader = (props: TopHeaderProps) => {
     "properties.colors.primaryColor",
     "inherit",
   );
-  const description = useSelector(getCurrentPageDescription);
   const pageId = useSelector(getCurrentPageId);
   const editorURL = useHref(builderURL, { pageId });
 
@@ -73,10 +68,6 @@ const TopHeader = (props: TopHeaderProps) => {
       navColorStyle={navColorStyle}
       primaryColor={primaryColor}
     >
-      <HtmlTitle
-        description={description}
-        name={currentApplicationDetails?.name}
-      />
       <HeaderRow
         className="relative h-12 px-3 md:px-6"
         navColorStyle={navColorStyle}

app/client/src/pages/AppViewer/index.tsx

@@ -17,7 +17,10 @@ import EditorContextProvider from "components/editorComponents/EditorContextProv
 import AppViewerPageContainer from "./AppViewerPageContainer";
 import { editorInitializer } from "utils/editor/EditorUtils";
 import * as Sentry from "@sentry/react";
-import { getViewModePageList } from "selectors/editorSelectors";
+import {
+  getCurrentPageDescription,
+  getViewModePageList,
+} from "selectors/editorSelectors";
 import { getThemeDetails, ThemeMode } from "selectors/themeSelectors";
 import { getSearchQuery } from "utils/helpers";
 import { getSelectedAppTheme } from "selectors/appThemingSelectors";
@@ -34,6 +37,9 @@ import { initAppViewer } from "actions/initActions";
 import { WidgetGlobaStyles } from "globalStyles/WidgetGlobalStyles";
 import { getAppsmithConfigs } from "@appsmith/configs";
 import useWidgetFocus from "utils/hooks/useWidgetFocus/useWidgetFocus";
+import HtmlTitle from "./AppViewerHtmlTitle";
+import type { ApplicationPayload } from "@appsmith/constants/ReduxActionConstants";
+import { getCurrentApplication } from "@appsmith/selectors/applicationSelectors";
 
 const AppViewerBody = styled.section<{
   hasPages: boolean;
@@ -80,6 +86,10 @@ function AppViewer(props: Props) {
   const branch = getSearchQuery(search, GIT_BRANCH_QUERY_KEY);
   const prevValues = usePrevious({ branch, location: props.location, pageId });
   const { hideWatermark } = getAppsmithConfigs();
+  const pageDescription = useSelector(getCurrentPageDescription);
+  const currentApplicationDetails: ApplicationPayload | undefined = useSelector(
+    getCurrentApplication,
+  );
 
   const focusRef = useWidgetFocus();
 
@@ -171,6 +181,10 @@ function AppViewer(props: Props) {
           fontFamily={selectedTheme.properties.fontFamily.appFont}
           primaryColor={selectedTheme.properties.colors.primaryColor}
         />
+        <HtmlTitle
+          description={pageDescription}
+          name={currentApplicationDetails?.name}
+        />
         <AppViewerBodyContainer
           backgroundColor={selectedTheme.properties.colors.backgroundColor}
         >