fix: address dashboard review feedback

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

@@ -42,18 +42,7 @@ export const BoardContainerSection = ({ section }: Props) => {
   const labelRight = isEditMode ? 48 : options.showOpenAll ? 40 : 8;
 
   return (
-    <Box
-      className={combineClasses("board-grid-item-content", classes.containerRoot)}
-      pos="relative"
-      data-grid-item-content
-      w="100%"
-      h="100%"
-      style={{
-        overflow: "visible",
-        "--opacity": board.opacity / 100,
-        "--border-color": options.borderColor || undefined,
-      }}
-    >
+    <Box className="board-grid-item-content" data-grid-item-content w="100%" h="100%" style={{ overflow: "visible" }}>
       <Card
         className={combineClasses(
           classes.itemCard,
@@ -66,6 +55,8 @@ export const BoardContainerSection = ({ section }: Props) => {
         styles={{
           root: {
             overflow: "visible",
+            "--opacity": board.opacity / 100,
+            "--border-color": options.borderColor || undefined,
           },
         }}
         radius={board.itemRadius}
@@ -110,6 +101,31 @@ export const BoardContainerSection = ({ section }: Props) => {
             )}
           </Button>
         )}
+        {!isVisuallyCollapsed && !options.collapsible && options.showLabel && options.title && (
+          <Badge
+            pos="absolute"
+            top="calc(var(--mantine-spacing-xs) * -1)"
+            left={labelLeft}
+            maw={`calc(100% - ${labelLeft + labelRight}px)`}
+            size="md"
+            radius="sm"
+            variant="default"
+            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
+          >
+            {options.title}
+          </Badge>
+        )}
         {options.showOpenAll && !isEditMode && (
           <ActionIcon
             pos="absolute"
@@ -138,24 +154,6 @@ export const BoardContainerSection = ({ section }: Props) => {
           <SectionGrid section={section} columnCount={section.width} requestedRowCount={section.height} label={label} />
         </Box>
       </Card>
-      {!isVisuallyCollapsed && !options.collapsible && options.showLabel && options.title && (
-        <Badge
-          className={classes.containerLabel}
-          pos="absolute"
-          top="calc(var(--mantine-spacing-lg) * -1 - 2px)"
-          left={labelLeft}
-          maw={`calc(100% - ${labelLeft + labelRight}px)`}
-          size="md"
-          radius="sm"
-          fz="md"
-          variant="default"
-          c="var(--mantine-color-text)"
-          title={options.title}
-          data-board-container-label
-        >
-          {options.title}
-        </Badge>
-      )}
       {isEditMode && <BoardContainerMenu section={section} />}
     </Box>
   );

apps/nextjs/src/components/board/sections/item.module.css

@@ -1,4 +1,4 @@
-.containerRoot {
+.itemCard {
   @mixin dark {
     --background-color: rgb(from var(--mantine-color-dark-6) r g b / var(--opacity));
     --border-color: rgb(from var(--mantine-color-dark-4) r g b / var(--opacity));
@@ -7,9 +7,6 @@
     --background-color: rgb(from var(--mantine-color-white) r g b / var(--opacity));
     --border-color: rgb(from var(--mantine-color-gray-3) r g b / var(--opacity));
   }
-}
-
-.itemCard {
   background-color: var(--background-color) !important;
   border-color: var(--border-color) !important;
 }
@@ -45,21 +42,6 @@
   white-space: nowrap;
 }
 
-.containerLabel {
-  overflow: visible;
-  pointer-events: none;
-  background-color: var(--background-color);
-  border-color: var(--border-color);
-}
-
-.containerLabel :global(.mantine-Badge-label) {
-  min-width: 0;
-  overflow: hidden;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .containerBody {
   visibility: visible;
   opacity: 1;