feat: enhance Builder components with additional style properties and improved element handling

Author: azadshaikh

modules/CMS/resources/js/components/builder/builder-dom.ts

@@ -8,13 +8,18 @@ export type BuilderElementStyleValues = {
     color: string;
     fontSize: string;
     fontWeight: string;
+    height: string;
     marginBottom: string;
+    marginLeft: string;
+    marginRight: string;
     marginTop: string;
+    opacity: string;
     paddingBottom: string;
     paddingLeft: string;
     paddingRight: string;
     paddingTop: string;
     textAlign: string;
+    width: string;
 };
 
 export type BuilderEditableElement = {
@@ -77,13 +82,18 @@ const DEFAULT_STYLE_VALUES: BuilderElementStyleValues = {
     color: '',
     fontSize: '',
     fontWeight: '',
+    height: '',
     marginBottom: '',
+    marginLeft: '',
+    marginRight: '',
     marginTop: '',
+    opacity: '',
     paddingBottom: '',
     paddingLeft: '',
     paddingRight: '',
     paddingTop: '',
     textAlign: '',
+    width: '',
 };
 
 function parseHtml(html: string): HTMLDivElement {
@@ -138,13 +148,18 @@ function readStyleValues(element: HTMLElement): BuilderElementStyleValues {
         color: element.style.color,
         fontSize: element.style.fontSize,
         fontWeight: element.style.fontWeight,
+        height: element.style.height,
         marginBottom: element.style.marginBottom,
+        marginLeft: element.style.marginLeft,
+        marginRight: element.style.marginRight,
         marginTop: element.style.marginTop,
+        opacity: element.style.opacity,
         paddingBottom: element.style.paddingBottom,
         paddingLeft: element.style.paddingLeft,
         paddingRight: element.style.paddingRight,
         paddingTop: element.style.paddingTop,
         textAlign: element.style.textAlign,
+        width: element.style.width,
     };
 }
 

modules/CMS/resources/js/components/builder/builder-header.tsx

@@ -61,7 +61,7 @@ export function BuilderHeader({
     onRedo,
 }: BuilderHeaderProps) {
     return (
-        <header className="flex h-[42px] shrink-0 items-center border-b border-border/70 bg-background/95 px-2 backdrop-blur">
+        <header className="flex h-[42px] shrink-0 items-center border-b border-border/60 bg-background px-2">
             {/* Left section: Back + Panel toggle */}
             <div className="flex items-center gap-1">
                 <Tooltip>