fix: widget overflow behaviour in anvil (#33961)

## Description
Fixed overflow operation for widgets in zones.


Fixes 
#32922 
#33537 

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9386697113>
> Commit: e0f8f24
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9386697113&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->






## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced dynamic font size customization using CSS custom
properties.

- **Improvements**
- Adjusted layout behavior for `AnvilFlexComponent` to use `fit-content`
for better content fitting.
- Enhanced styling for elements with elevation property, including font
size and spacing adjustments.
- Switched to `isEditOnlyModeSelector` for more accurate layout wrapping
behavior in `SectionRow`.

- **Removals**
- Removed `renderMode` property from `BaseLayoutComponent`,
`FlexLayoutProps`, and related components for streamlined functionality.
  - Simplified imports and prop handling in `AlignedWidgetRowComp`.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx

@@ -36,6 +36,7 @@ const getTypographyCss = (typography: Typography) => {
             margin-top: ${after.marginTop};
           }
         }
+        --${currentKey}-font-size: ${fontSize};
         --${currentKey}-line-height: ${lineHeight};
         --${currentKey}-margin-start: ${after.marginTop};
         --${currentKey}-margin-end: ${before.marginBottom};

app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx

@@ -79,7 +79,7 @@ export const AnvilFlexComponent = forwardRef(
         flexShrink: isFillWidget ? 1 : 0,
         flexBasis,
         alignItems: "center",
-        width: "max-content",
+        width: "fit-content",
       };
       if (widgetSize) {
         const {

app/client/src/layoutSystems/anvil/common/styles.module.css

@@ -27,8 +27,22 @@
     margin-inline: var(--outer-spacing-3);
   }
 
+  [elevation="2"] {
+    /** Font size is necessary for the compensator(margins) since they use em values */
+    font-size: var(--body-font-size);
+    /** We make min-block-size the same as of all the main widgets (buttons, toggles) so that the zones do not jump when dropping widgets. */
+    min-block-size: calc(
+      var(--body-line-height) + var(--body-margin-start) +
+        var(--body-margin-end) + var(--inner-spacing-3) * 2 +
+        var(--outer-spacing-3) * 2
+    );
+  }
+
   [data-elevation="false"][elevation="2"] {
-    min-height: var(--sizing-8);
+    min-block-size: calc(
+      var(--body-line-height) + var(--body-margin-start) +
+        var(--body-margin-end) + var(--inner-spacing-3) * 2
+    );
   }
 
   /** by default, sections/zone/cards with elevation have styles 1 */

app/client/src/layoutSystems/anvil/layoutComponents/BaseLayoutComponent.tsx

@@ -59,7 +59,6 @@ abstract class BaseLayoutComponent extends PureComponent<
       layoutIndex: this.props.layoutIndex,
       layoutType: this.props.layoutType,
       parentDropTarget: this.props.parentDropTarget,
-      renderMode: this.props.renderMode,
       ...(this.props.layoutStyle || {}),
     };
   }

app/client/src/layoutSystems/anvil/layoutComponents/components/FlexLayout.tsx

@@ -6,7 +6,6 @@ import type { CSSProperties, ReactNode } from "react";
 import type { PositionValues } from "layoutSystems/anvil/utils/types";
 import { usePositionObserver } from "layoutSystems/common/utils/LayoutElementPositionsObserver/usePositionObserver";
 import { getAnvilLayoutDOMId } from "layoutSystems/common/utils/LayoutElementPositionsObserver/utils";
-import type { RenderMode } from "constants/WidgetConstants";
 import type { LayoutComponentTypes } from "layoutSystems/anvil/utils/anvilTypes";
 import { useSelector } from "react-redux";
 import {
@@ -24,7 +23,6 @@ export interface FlexLayoutProps extends FlexProps {
   layoutType: LayoutComponentTypes;
   parentDropTarget: string;
   position?: PositionValues;
-  renderMode: RenderMode;
 }
 
 export const FlexLayout = React.memo((props: FlexLayoutProps) => {

app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/AlignedWidgetRowComp.tsx

@@ -4,10 +4,7 @@ import {
   type LayoutComponentProps,
   type WidgetLayoutProps,
 } from "layoutSystems/anvil/utils/anvilTypes";
-import {
-  AlignmentIndexMap,
-  MOBILE_BREAKPOINT,
-} from "layoutSystems/anvil/utils/constants";
+import { AlignmentIndexMap } from "layoutSystems/anvil/utils/constants";
 import { FlexLayerAlignment } from "layoutSystems/common/utils/constants";
 import { renderWidgets } from "layoutSystems/anvil/utils/layouts/renderUtils";
 import { FlexLayout, type FlexLayoutProps } from "../FlexLayout";
@@ -34,7 +31,7 @@ import { isFillWidgetPresentInList } from "layoutSystems/anvil/utils/layouts/wid
  *    thanks to flex wrap in the parent layout.
  */
 const AlignedWidgetRowComp = (props: LayoutComponentProps) => {
-  const { canvasId, layout, layoutId, renderMode } = props;
+  const { canvasId, layout, layoutId } = props;
 
   const commonProps: Omit<
     FlexLayoutProps,
@@ -49,10 +46,11 @@ const AlignedWidgetRowComp = (props: LayoutComponentProps) => {
       flexShrink: 1,
       layoutType: LayoutComponentTypes.WIDGET_ROW,
       parentDropTarget: props.parentDropTarget,
-      renderMode,
-      wrap: { base: "wrap", [`${MOBILE_BREAKPOINT}px`]: "nowrap" },
+      wrap: "wrap",
       className: props.className,
       maxWidth: "100%",
+      width: "100%",
+      minWidth: "fit-content",
     };
   }, []);
 

app/client/src/layoutSystems/anvil/layoutComponents/components/section/SectionRow.tsx

@@ -1,20 +1,12 @@
-import { RenderModes } from "constants/WidgetConstants";
 import React from "react";
 import { useSelector } from "react-redux";
-import { previewModeSelector } from "selectors/editorSelectors";
+import { isEditOnlyModeSelector } from "selectors/editorSelectors";
 import { FlexLayout, type FlexLayoutProps } from "../FlexLayout";
 
 export const SectionRow = (props: FlexLayoutProps) => {
-  const isPreviewMode = useSelector(previewModeSelector);
+  const isEditOnlyMode = useSelector(isEditOnlyModeSelector);
   return (
-    <FlexLayout
-      {...props}
-      wrap={
-        !isPreviewMode && props.renderMode === RenderModes.CANVAS
-          ? "nowrap"
-          : "wrap"
-      }
-    >
+    <FlexLayout {...props} wrap={isEditOnlyMode ? "nowrap" : "wrap"}>
       {props.children}
     </FlexLayout>
   );