improvement(org): stop the page surface depending on host utilities it cannot generate

Author: waleedlatif1

apps/sim/platform/design-system/components/surface/surface.module.css

@@ -0,0 +1,9 @@
+.page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  flex: 1;
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow-y: auto;
+}

apps/sim/platform/design-system/components/surface/surface.tsx

@@ -3,6 +3,7 @@
 import '@/platform/design-system/styles/embedded.css'
 import type { ReactNode } from 'react'
 import { PlatformSurface } from '@/platform/design-system/components/surface/platform-surface'
+import styles from '@/platform/design-system/components/surface/surface.module.css'
 
 interface SurfaceProps {
   /** Paints the canvas, for a surface that fills a region. */
@@ -25,15 +26,10 @@ export function Surface({ canvas, children }: SurfaceProps) {
   )
 }
 
-/**
- * Fills the app's content slot, and the grid stretches the surface so its canvas reaches the end.
- *
- * The host's Tailwind does not scan `platform/`, so these utilities exist only while a scanned file
- * also names them (`grid-cols-[minmax(0,1fr)]`: `settings-frame.tsx`).
- */
+/** Fills the app's content slot, and the grid stretches the surface so its canvas reaches the end. */
 export function PageSurface({ children }: { children: ReactNode }) {
   return (
-    <div className='grid h-full min-h-0 min-w-0 flex-1 grid-cols-[minmax(0,1fr)] overflow-y-auto'>
+    <div className={styles.page}>
       <Surface canvas>{children}</Surface>
     </div>
   )