Merge branch 'main' into Action-Image-Align

canvas_modules/common-canvas/src/common-properties/controls/controls.scss

@@ -44,6 +44,7 @@
 		display: flex;
 		> div:first-child {
 			width: 100%;
+			overflow-x: auto;
 		}
 	}
 }

docs/pages/04-common-properties.md

@@ -122,3 +122,19 @@ Pass the `<CommonProperties>` object into the `rightFlyoutContent` prop of Commo
         showRightFlyout={showRightFlyout}
     />
 ```
+
+
+If the `CommonProperties` component is nested inside single or multiple layers of `<div>` elements, special consideration is needed for proper layout behavior.
+
+```html
+    const rightFlyoutContent = (
+      <div className="parent-div">
+        <CommonProperties
+          propertiesInfo={this.propertiesInfo}
+          propertiesConfig={{ containerType: "Custom", rightFlyout: true }}
+          callbacks={this.callbacks}
+        />
+    </div>
+)
+
+`display: flex` should be added to `parent-div` to allow Common Properties content to occupy full width and height available in right flyout.