feat: modernize widget experience

apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css

@@ -3,6 +3,10 @@
   animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.manualBackdrop {
+  pointer-events: auto;
+}
+
 .surface {
   position: fixed;
   z-index: 1;
@@ -15,6 +19,25 @@
   transform-origin: top left;
 }
 
+.manualSurface {
+  position: fixed;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+  overscroll-behavior: contain;
+  animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top left;
+}
+
+.manualSurface > div {
+  width: 100%;
+  height: 100%;
+  max-height: none !important;
+  overflow: visible;
+}
+
 .backdropClosing {
   animation: focus-backdrop-out 180ms ease-in forwards;
 }
@@ -32,6 +55,18 @@
   height: 100%;
 }
 
+.surfacePortalTarget,
+.manualSurfaceMount {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.manualSurfaceMount {
+  overflow: hidden;
+  border-radius: inherit;
+}
+
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
@@ -49,7 +84,7 @@
 }
 
 .closeButton {
-  position: fixed;
+  position: absolute;
   z-index: 2;
   pointer-events: auto;
 }
@@ -99,7 +134,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .backdrop,
-  .surface {
+  .surface,
+  .manualSurface {
     animation: none;
   }
 }