fix: restore translucent dashboard styling (#6664)

* fix: restore translucent dashboard styling

* fix: restore dashboard widget transparency

* fix: address dashboard review feedback

* fix: apply board opacity to containers

* fix: flatten demo board container

* fix: default board roundness to sm

* fix: restore assistant widget transparency

* Revert "fix: default board roundness to sm"

This reverts commit c235cbdf2b.

* fix: address remaining dashboard review comments

* test: align grid geometry expectations

apps/nextjs/src/components/board/sections/container-section.tsx

@@ -46,6 +46,7 @@ export const BoardContainerSection = ({ section }: Props) => {
       <Card
         className={combineClasses(
           classes.itemCard,
+          classes.containerCard,
           options.customCssClasses.join(" "),
           isVisuallyCollapsed && classes.collapsedContainerCard,
         )}
@@ -56,7 +57,7 @@ export const BoardContainerSection = ({ section }: Props) => {
           root: {
             overflow: "visible",
             "--opacity": board.opacity / 100,
-            "--border-color": options.borderColor || undefined,
+            "--container-border-color": options.borderColor || undefined,
           },
         }}
         radius={board.itemRadius}
@@ -66,7 +67,7 @@ export const BoardContainerSection = ({ section }: Props) => {
           <Button
             className={classes.containerToggle}
             pos="absolute"
-            top={isVisuallyCollapsed ? 0 : -24}
+            top={isVisuallyCollapsed ? 0 : "calc(var(--mantine-spacing-xs) * -1)"}
             left={0}
             w="100%"
             h={isVisuallyCollapsed ? "100%" : 24}
@@ -103,8 +104,9 @@ export const BoardContainerSection = ({ section }: Props) => {
         )}
         {!isVisuallyCollapsed && !options.collapsible && options.showLabel && options.title && (
           <Badge
+            className={classes.containerLabel}
             pos="absolute"
-            top={-24}
+            top="calc(var(--mantine-spacing-xs) * -1)"
             left={labelLeft}
             maw={`calc(100% - ${labelLeft + labelRight}px)`}
             size="md"
@@ -113,12 +115,7 @@ export const BoardContainerSection = ({ section }: Props) => {
             c="var(--mantine-color-text)"
             style={{
               zIndex: 9,
-              overflow: "hidden",
               pointerEvents: "none",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              backgroundColor: "var(--background-color)",
-              borderColor: "var(--border-color)",
             }}
             title={options.title}
             data-board-container-label
@@ -128,8 +125,9 @@ export const BoardContainerSection = ({ section }: Props) => {
         )}
         {options.showOpenAll && !isEditMode && (
           <ActionIcon
+            className={classes.containerAction}
             pos="absolute"
-            top={isVisuallyCollapsed ? "50%" : -24}
+            top={isVisuallyCollapsed ? "50%" : "calc(var(--mantine-spacing-xs) * -1)"}
             right={8}
             style={{ zIndex: 10, transform: isVisuallyCollapsed ? "translateY(-50%)" : undefined }}
             variant={options.collapsible ? "subtle" : "default"}