feat: Variable width for property pane size and side by side editor

app/client/src/components/editorComponents/PropertyPaneSidebar.tsx

@@ -21,6 +21,7 @@ import { APP_SETTINGS_PANE_WIDTH } from "constants/AppConstants";
 import styled from "styled-components";
 import WalkthroughContext from "components/featureWalkthrough/walkthroughContext";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
+import { getIsSideBySideEnabled } from "selectors/ideSelectors";
 
 export const PROPERTY_PANE_ID = "t--property-pane-sidebar";
 
@@ -41,7 +42,7 @@ const StyledResizer = styled.div<{ resizing: boolean }>`
 
 interface Props {
   width: number;
-  onDragEnd?: () => void;
+  onDragEnd: () => void;
   onWidthChange: (width: number) => void;
 }
 
@@ -57,6 +58,7 @@ export const PropertyPaneSidebar = memo((props: Props) => {
   const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
   const { isOpened: isWalkthroughOpened, popFeature } =
     useContext(WalkthroughContext) || {};
+  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
 
   //while dragging or resizing and
   //the current selected WidgetId is not equal to previous widget id,
@@ -139,7 +141,7 @@ export const PropertyPaneSidebar = memo((props: Props) => {
         ref={sidebarRef}
       >
         {/* RESIZER */}
-        {!isAppSettingsPaneOpen && (
+        {!isAppSettingsPaneOpen && !isSideBySideEnabled && (
           <StyledResizer
             className={`absolute top-0 left-0 w-2 h-full -ml-1 group cursor-ew-resize ${tailwindLayers.resizer}`}
             onMouseDown={onMouseDown}

app/client/src/constants/AppConstants.ts

@@ -12,6 +12,9 @@ export const CANVAS_BACKGROUND_COLOR = "#FFFFFF";
 export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256;
 export const DEFAULT_PROPERTY_PANE_WIDTH = 288;
 export const APP_SETTINGS_PANE_WIDTH = 525;
+export const DEFAULT_APP_SIDEBAR_WIDTH = 50;
+export const DEFAULT_EDITOR_PANE_WIDTH = 255;
+export const DEFAULT_PP_LARGE_WIDTH = window.innerWidth * 0.18;
 
 const APP_STORE_NAMESPACE = "APPSMITH_LOCAL_STORE";
 
@@ -44,6 +47,7 @@ export const MOBILE_MAX_WIDTH = 767;
 export const TABLET_MIN_WIDTH = 768;
 export const TABLET_MAX_WIDTH = 991;
 export const DESKTOP_MIN_WIDTH = 992;
+export const DESKTOP_BASE_WIDTH = 1440;
 
 export const NAVIGATION_SETTINGS = {
   ORIENTATION: {

app/client/src/pages/Editor/IDE/EditorPane/index.tsx

@@ -8,19 +8,19 @@ import { SentryRoute } from "@appsmith/AppRouter";
 import { ADD_PATH } from "constants/routes";
 import EditorPaneSegments from "./EditorPaneSegments";
 import GlobalAdd from "./GlobalAdd";
-import { useEditorPaneWidth } from "../hooks";
 import { getPagesActiveStatus } from "selectors/ideSelectors";
 import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
 import { MinimalSegment } from "./MinimalSegment";
 import { Pages } from "./components/Pages";
+import { useEditorPaneWidth } from "../hooks";
 
 const EditorPane = ({ match: { path } }: RouteComponentProps) => {
   const width = useEditorPaneWidth();
   const pagesActive = useSelector(getPagesActiveStatus);
 
   return (
     <Flex
-      className="ide-editor-left-pane"
+      className="ide-editor-left-pane transition-[width] ease-linear"
       flexDirection="column"
       gap="spacing-2"
       height="100%"

app/client/src/pages/Editor/IDE/hooks.ts

@@ -17,6 +17,7 @@ import {
   queryListURL,
   widgetListURL,
 } from "@appsmith/RouteBuilder";
+import { DEFAULT_EDITOR_PANE_WIDTH } from "constants/AppConstants";
 
 export const useCurrentAppState = () => {
   const [appState, setAppState] = useState(EditorState.EDITOR);
@@ -94,7 +95,7 @@ export const useCurrentEditorState = () => {
 };
 
 export const useEditorPaneWidth = (): number => {
-  const [width, setWidth] = useState(255);
+  const [width, setWidth] = useState(DEFAULT_EDITOR_PANE_WIDTH);
   const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
   const editorMode = useSelector(getIDEViewMode);
   const { segment } = useCurrentEditorState();
@@ -105,9 +106,10 @@ export const useEditorPaneWidth = (): number => {
       editorMode === EditorViewMode.SplitScreen &&
       segment !== EditorEntityTab.UI
     ) {
-      setWidth(255 + propertyPaneWidth);
+      // 1px is propertypane border width
+      setWidth(DEFAULT_EDITOR_PANE_WIDTH + propertyPaneWidth + 1);
     } else {
-      setWidth(255);
+      setWidth(DEFAULT_EDITOR_PANE_WIDTH);
     }
   }, [isSideBySideEnabled, editorMode, segment, propertyPaneWidth]);
 

app/client/src/reducers/uiReducers/propertyPaneReducer.tsx

@@ -3,7 +3,10 @@ import type {
   ShowPropertyPanePayload,
 } from "@appsmith/constants/ReduxActionConstants";
 import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
-import { DEFAULT_PROPERTY_PANE_WIDTH } from "constants/AppConstants";
+import {
+  DEFAULT_PP_LARGE_WIDTH,
+  DEFAULT_PROPERTY_PANE_WIDTH,
+} from "constants/AppConstants";
 import { createImmerReducer } from "utils/ReducerUtils";
 
 export interface SelectedPropertyPanel {
@@ -15,7 +18,10 @@ const initialState: PropertyPaneReduxState = {
   widgetId: undefined,
   lastWidgetId: undefined,
   isNew: false,
-  width: DEFAULT_PROPERTY_PANE_WIDTH,
+  width:
+    window.innerWidth > 1440
+      ? DEFAULT_PP_LARGE_WIDTH
+      : DEFAULT_PROPERTY_PANE_WIDTH,
   selectedPropertyPanel: {},
 };
 

app/client/src/utils/hooks/useDeviceDetect.ts

@@ -4,6 +4,7 @@ import {
   TABLET_MIN_WIDTH,
   TABLET_MAX_WIDTH,
   DESKTOP_MIN_WIDTH,
+  DESKTOP_BASE_WIDTH,
 } from "constants/AppConstants";
 
 export function useIsMobileDevice() {
@@ -22,3 +23,9 @@ export function useIsDesktopDevice() {
     minWidth: DESKTOP_MIN_WIDTH,
   });
 }
+
+export function useIsBaseDesignWidth() {
+  return useMediaQuery({
+    maxWidth: DESKTOP_BASE_WIDTH,
+  });
+}

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

@@ -46,6 +46,8 @@ import { useLocation } from "react-router";
 import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
 import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
 import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks";
+import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
+import { EditorEntityTab } from "@appsmith/entities/IDE/constants";
 
 const GUTTER_WIDTH = 72;
 export const AUTOLAYOUT_RESIZER_WIDTH_BUFFER = 40;
@@ -80,6 +82,7 @@ export const useDynamicAppLayout = () => {
   const isEmbed = queryParams.get("embed");
   const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
   const isAppSidebarEnabled = useIsAppSidebarEnabled();
+  const { segment } = useCurrentEditorState();
 
   const isPreviewing = isPreviewMode;
 
@@ -137,7 +140,8 @@ export const useDynamicAppLayout = () => {
     if (
       isPreviewing === false &&
       !isAppSettingsPaneOpen &&
-      appMode === APP_MODE.EDIT
+      appMode === APP_MODE.EDIT &&
+      segment === EditorEntityTab.UI
     ) {
       calculatedWidth -= propertyPaneWidth;
     }