fix: smooth container collapse behavior

apps/docs/docs/management/boards/index.mdx

@@ -182,7 +182,7 @@ Each Container can configure:
 - Its border color and custom CSS classes.
 
 Collapsing a Container reduces its full-width header to a half-row expansion bar and compacts the surrounding layout without losing its expanded size.
-Expanding it restores those bounds and moves following items out of the way.
+Expanding it smoothly restores those bounds and moves following items out of the way without reloading the widgets inside it.
 
 ### Background
 

apps/nextjs/src/components/board/items/item-content.tsx

@@ -30,8 +30,9 @@ interface BoardItemContentProps {
 }
 
 const getOverflowFromKind = (kind: SectionItem["kind"]) => {
+  if (kind === "iframe") return "hidden";
   if (kind === "systemResources") return "visible";
-  return "hidden";
+  return undefined;
 };
 
 export const BoardItemContent = ({ item }: BoardItemContentProps) => {

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

@@ -66,13 +66,13 @@ export const BoardContainerSection = ({ section }: Props) => {
           <Button
             className={classes.containerToggle}
             pos="absolute"
-            top={isVisuallyCollapsed ? 0 : -28}
+            top={isVisuallyCollapsed ? 0 : -24}
             left={0}
             w="100%"
-            h={isVisuallyCollapsed ? "100%" : 28}
+            h={isVisuallyCollapsed ? "100%" : 24}
             px={12}
             pe={options.showOpenAll ? 40 : 12}
-            radius={isVisuallyCollapsed ? board.itemRadius : "sm"}
+            radius={board.itemRadius}
             variant="default"
             justify={options.showLabel ? "flex-start" : "center"}
             leftSection={
@@ -145,8 +145,8 @@ export const BoardContainerSection = ({ section }: Props) => {
         {options.showOpenAll && !isEditMode && (
           <ActionIcon
             pos="absolute"
-            top={isVisuallyCollapsed ? "50%" : -26}
-            right={2}
+            top={isVisuallyCollapsed ? "50%" : -24}
+            right={0}
             style={{ zIndex: 10, transform: isVisuallyCollapsed ? "translateY(-50%)" : undefined }}
             variant={options.collapsible ? "subtle" : "default"}
             size={24}
@@ -158,15 +158,20 @@ export const BoardContainerSection = ({ section }: Props) => {
             <IconExternalLink size={16} />
           </ActionIcon>
         )}
-        <Box id={contentId} h="100%" hidden={isVisuallyCollapsed}>
-          {!isVisuallyCollapsed && (
-            <SectionGrid
-              section={section}
-              columnCount={section.width}
-              requestedRowCount={section.height}
-              label={label}
-            />
-          )}
+        <Box
+          id={contentId}
+          className={classes.containerBody}
+          h="100%"
+          data-collapsed={isVisuallyCollapsed ? "true" : "false"}
+          aria-hidden={isVisuallyCollapsed}
+          inert={isVisuallyCollapsed}
+        >
+          <SectionGrid
+            section={section}
+            columnCount={section.width}
+            requestedRowCount={section.height}
+            label={label}
+          />
         </Box>
       </Card>
       {isEditMode && <BoardContainerMenu section={section} />}

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

@@ -41,3 +41,27 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.containerBody {
+  visibility: visible;
+  opacity: 1;
+  transition:
+    opacity 140ms ease 80ms,
+    visibility 0s;
+}
+
+.containerBody[data-collapsed="true"] {
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transition:
+    opacity 120ms ease,
+    visibility 0s linear 120ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .containerBody,
+  .containerBody[data-collapsed="true"] {
+    transition: none;
+  }
+}