chore: remove paddin for anvil embed apps

appsmithorg · Oct 31, 2024 · 6f241e1 · 6f241e1
1 parent ac9e101
commit 6f241e1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutColumn.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutColumn.tsx
@@ -1,16 +1,18 @@
+import React from "react";
+import { deriveAlignedColumnHighlights } from "../../utils/layouts/highlights/alignedColumnHighlights";
 import BaseLayoutComponent from "../BaseLayoutComponent";
 import {
   type DeriveHighlightsFn,
   LayoutComponentTypes,
   type LayoutProps,
 } from "layoutSystems/anvil/utils/anvilTypes";
 import type { FlexLayoutProps } from "./FlexLayout";
-import { deriveColumnHighlights } from "layoutSystems/anvil/utils/layouts/highlights/columnHighlights";
+import { MainCanvasWrapper } from "./MainCanvasWrapper";
 
 class LayoutColumn extends BaseLayoutComponent {
   static type: LayoutComponentTypes = LayoutComponentTypes.LAYOUT_COLUMN;
 
-  static deriveHighlights: DeriveHighlightsFn = deriveColumnHighlights;
+  static deriveHighlights: DeriveHighlightsFn = deriveAlignedColumnHighlights;
 
   static getChildTemplate(props: LayoutProps): LayoutProps | null {
     if (props.childTemplate || props.childTemplate === null)
@@ -19,18 +21,27 @@ class LayoutColumn extends BaseLayoutComponent {
     return {
       insertChild: true,
       layoutId: "",
-      layoutType: LayoutComponentTypes.WIDGET_ROW,
+      layoutType: LayoutComponentTypes.ALIGNED_WIDGET_ROW,
       layout: [],
     };
   }
 
   getFlexLayoutProps(): Omit<FlexLayoutProps, "children"> {
     return {
       ...super.getFlexLayoutProps(),
-      alignSelf: "stretch",
+      height: "100%",
+      gap: "spacing-4",
       direction: "column",
     };
   }
+
+  renderViewMode(): JSX.Element {
+    return (
+      <MainCanvasWrapper {...this.getFlexLayoutProps()}>
+        {super.renderChildren()}
+      </MainCanvasWrapper>
+    );
+  }
 }
 
 export default LayoutColumn;
diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/components/MainCanvasWrapper.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/components/MainCanvasWrapper.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import { useLocation } from "react-router";
+import { FlexLayout, type FlexLayoutProps } from "./FlexLayout";
+
+export const MainCanvasWrapper = (props: FlexLayoutProps) => {
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+  const isEmbed = queryParams.get("embed") === "true";
+
+  return (
+    <FlexLayout {...props} padding={isEmbed ? "spacing-0" : "spacing-4"}>
+      {props.children}
+    </FlexLayout>
+  );
+};
diff --git a/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts b/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts
@@ -18,14 +18,8 @@ export function anvilDSLTransformer(dsl: DSLWidget) {
     _dsl.layout = [
       {
         layoutId: generateReactKey(),
-        layoutType: LayoutComponentTypes.ALIGNED_LAYOUT_COLUMN,
+        layoutType: LayoutComponentTypes.LAYOUT_COLUMN,
         layout: [],
-        layoutStyle: {
-          border: "none",
-          height: "100%",
-          padding: "spacing-4",
-          gap: "spacing-4",
-        },
         isDropTarget: true,
         isPermanent: true,
         childTemplate: {