fix: Remove empty space in embed apps when nav is set to sidebar

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

@@ -15,6 +15,7 @@ import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import { PageView, PageViewContainer } from "./AppPage.styled";
 import { useIsMobileDevice } from "utils/hooks/useDeviceDetect";
 import { APP_MODE } from "entities/App";
+import { useLocation } from "react-router";
 
 type AppPageProps = {
   appName?: string;
@@ -31,6 +32,11 @@ export function AppPage(props: AppPageProps) {
   const isMobile = useIsMobileDevice();
   const appMode = useSelector(getAppMode);
   const isPublished = appMode === APP_MODE.PUBLISHED;
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  const isEmbed = queryParams.get("embed");
+  const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
+  const isEmbeddedAppWithNavVisible = isEmbed && isNavbarVisibleInEmbeddedApp;
 
   useDynamicAppLayout();
 
@@ -51,7 +57,9 @@ export function AppPage(props: AppPageProps) {
         isAppSidebarPinned
       }
       isPublished={isPublished}
-      sidebarWidth={isMobile ? 0 : sidebarWidth}
+      sidebarWidth={
+        isMobile || (isEmbed && !isEmbeddedAppWithNavVisible) ? 0 : sidebarWidth
+      }
     >
       <PageView className="t--app-viewer-page" width={props.canvasWidth}>
         {props.widgetsStructure.widgetId &&

app/client/src/utils/hooks/useDynamicAppLayout.tsx

@@ -40,6 +40,7 @@ import { scrollbarWidth } from "utils/helpers";
 import { useWindowSizeHooks } from "./dragResizeHooks";
 import type { AppState } from "@appsmith/reducers";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
+import { useLocation } from "react-router";
 
 const GUTTER_WIDTH = 72;
 export const AUTOLAYOUT_RESIZER_WIDTH_BUFFER = 40;
@@ -69,6 +70,10 @@ export const useDynamicAppLayout = () => {
     (state: AppState) => state.ui.widgetDragResize.isAutoCanvasResizing,
   );
   const [isCanvasResizing, setIsCanvasResizing] = useState<boolean>(false);
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  const isEmbed = queryParams.get("embed");
+  const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
 
   // /**
   //  * calculates min height
@@ -147,17 +152,20 @@ export const useDynamicAppLayout = () => {
      * If there is
      * 1. a sidebar for navigation,
      * 2. it is pinned,
-     * 3. and device is not mobile
+     * 3. device is not mobile
+     * 4. and it is not an embedded app
      * we need to subtract the sidebar width as well in the following modes -
      * 1. Preview
      * 2. App settings open with navigation tab
      * 3. Published
      */
+    const isEmbeddedAppWithNavVisible = isEmbed && isNavbarVisibleInEmbeddedApp;
     if (
       (appMode === APP_MODE.PUBLISHED ||
         isPreviewMode ||
         isAppSettingsPaneWithNavigationTabOpen) &&
       !isMobile &&
+      (!isEmbed || isEmbeddedAppWithNavVisible) &&
       sidebarWidth
     ) {
       calculatedWidth -= sidebarWidth;