Almost finished section backgrounds logic; Removed card layout from hero block

Author: Rajat

apps/web/components/admin/page-editor/add-widget.tsx

@@ -21,7 +21,7 @@ function AddWidget({ pageType, onSelection, onClose }: WidgetsListProps) {
                 .map((item, index) =>
                     widgets[item].metadata.compatibleWith.includes(pageType) ? (
                         <li
-                            className="flex items-center px-2 py-3 hover:!bg-slate-100 cursor-pointer justify-between"
+                            className="flex items-center px-2 py-3 hover:!bg-accent cursor-pointer justify-between"
                             key={index}
                             onClick={(e) => onSelection(item)}
                         >

apps/web/components/admin/page-editor/index.tsx

@@ -815,31 +815,6 @@ export default function PageEditor({
                     </header>
                 </div>
                 <div className="flex w-full h-[calc(100vh-56px)] mt-14 gap-4 p-4 bg-muted/10">
-                    {leftPaneContent !== "none" && (
-                        <div className="w-[300px] rounded-xl border bg-background/98 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm flex flex-col overflow-hidden">
-                            <PanelHeader
-                                title={
-                                    leftPaneContent === "widgets"
-                                        ? EDIT_PAGE_ADD_WIDGET_TITLE
-                                        : leftPaneContent === "editor"
-                                          ? "Edit Block"
-                                          : leftPaneContent === "fonts"
-                                            ? "Fonts"
-                                            : leftPaneContent === "theme"
-                                              ? "Theme"
-                                              : leftPaneContent === "seo"
-                                                ? "SEO"
-                                                : ""
-                                }
-                                onClose={onClose}
-                            />
-                            <ScrollArea className="h-[calc(100%-56px)]">
-                                <div className="py-2 space-y-4">
-                                    {activeSidePaneContent}
-                                </div>
-                            </ScrollArea>
-                        </div>
-                    )}
                     <div
                         className={cn(
                             "rounded-xl border bg-background/98 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm",
@@ -876,6 +851,31 @@ export default function PageEditor({
                             </div>
                         </ScrollArea>
                     </div>
+                    {leftPaneContent !== "none" && (
+                        <div className="w-[300px] rounded-xl border bg-background/98 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm flex flex-col overflow-hidden">
+                            <PanelHeader
+                                title={
+                                    leftPaneContent === "widgets"
+                                        ? EDIT_PAGE_ADD_WIDGET_TITLE
+                                        : leftPaneContent === "editor"
+                                          ? "Edit Block"
+                                          : leftPaneContent === "fonts"
+                                            ? "Fonts"
+                                            : leftPaneContent === "theme"
+                                              ? "Theme"
+                                              : leftPaneContent === "seo"
+                                                ? "SEO"
+                                                : ""
+                                }
+                                onClose={onClose}
+                            />
+                            <ScrollArea className="h-[calc(100%-56px)]">
+                                <div className="py-2 space-y-4">
+                                    {activeSidePaneContent}
+                                </div>
+                            </ScrollArea>
+                        </div>
+                    )}
                 </div>
             </div>
         );
@@ -885,8 +885,8 @@ export default function PageEditor({
         <div className="flex flex-col gap-4 p-4">
             <Skeleton className="w-full h-16" />
             <div className="flex gap-4">
-                <Skeleton className="w-1/4 h-90" />
                 <Skeleton className="w-3/4 h-screen" />
+                <Skeleton className="w-1/4 h-90" />
             </div>
         </div>
     );

apps/web/components/public/base-layout/template/editable-widget.tsx

@@ -41,7 +41,7 @@ const EditableWidget = ({
                 onClick={() => onEditClick && onEditClick(item.widgetId)}
                 className="relative cursor-pointer group"
             >
-                <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity z-20">
+                <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity z-30">
                     <div className="text-white/90 border border-white/50 px-3 py-1.5 rounded text-sm font-medium">
                         Click to update
                     </div>

packages/components-library/src/page-builder-slider.tsx

@@ -14,6 +14,7 @@ export default function PageBuilderSlider({
     tooltip,
     className,
     allowsReset = false,
+    unit = "px",
 }: {
     title: string;
     min: number;
@@ -23,6 +24,7 @@ export default function PageBuilderSlider({
     tooltip?: string;
     className?: string;
     allowsReset?: boolean;
+    unit?: string;
 }) {
     return (
         <div className={`flex flex-col gap-2 ${className}`}>
@@ -54,10 +56,10 @@ export default function PageBuilderSlider({
                                     );
                                     onChange(clamped);
                                 }}
-                                className="h-7 w-16 rounded-md border px-2 py-1 text-xs text-center bg-gray-50"
+                                className="h-7 w-16 rounded-md border border-input bg-background px-2 py-1 text-xs text-center"
                             />
                             <span className="text-xs text-muted-foreground">
-                                px
+                                {unit}
                             </span>
                         </div>
                     </div>