feat(viewport-gap): remove viewport gap and update border behavior (#4835)

platform/ui-next/src/components/Viewport/ViewportPane.tsx

@@ -58,27 +58,20 @@ function ViewportPane({
       onScroll={onInteractionHandler}
       onWheel={onInteractionHandler}
       className={classNames(
-        'group/pane h-full w-full overflow-hidden rounded-md transition duration-300',
-        {
-          'border-primary-light border-2': isActive,
-          'border-2 border-transparent': !isActive,
-        },
+        'group relative h-full w-full overflow-hidden transition duration-300',
         className
       )}
       style={customStyle}
     >
+      <div className={classNames('relative h-full w-full', className)}>{children}</div>
+
+      {/* Border overlay */}
       <div
-        className={classNames(
-          'h-full w-full overflow-hidden rounded-md',
-          {
-            'border border-transparent': isActive,
-            'border-secondary-light group-hover/pane:border-primary-light/70 border': !isActive,
-          },
-          className
-        )}
-      >
-        {children}
-      </div>
+        className={classNames('pointer-events-none absolute inset-0', {
+          'border-primary-light border': isActive,
+          'group-hover:border-primary-light/70 border border-transparent': !isActive,
+        })}
+      />
     </div>
   );
 }

platform/ui-next/src/contextProviders/ViewportGridProvider.tsx

@@ -503,6 +503,7 @@ export function ViewportGridProvider({ children, service }: ViewportGridProvider
     getActiveViewportOptionByKey,
     setViewportGridSizeChanged: props => service.setViewportGridSizeChanged(props),
     publishViewportsReady: () => service.publishViewportsReady(),
+    getLayoutOptionsFromState: state => service.getLayoutOptionsFromState(state),
   };
 
   return (