From 171ed4541069ce4a9aae5136e5d93544053bfc59 Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Thu, 6 Aug 2026 19:30:08 -0700
Subject: [PATCH] fix(files): render HTML files shared via a public file link

The public share page rooted on `.desktop-title-bar-page`, which sets only
`min-height: 100vh`. Without a definite height, `h-full` on every descendant of
`<main>` resolved to `auto` -> 0. `HtmlPreview` gates its sandboxed iframe on a
measured non-zero container, so it silently never mounted and the page rendered
a blank area under the header. Other read-only branches survived because their
content has intrinsic height.

Give the public page root a definite height, and make the read-only preview
chain flex-based so it fills its parent instead of depending on an ancestor's
definite height. `text-editor`'s preview pane becomes a flex column for the same
reason -- it is `HtmlPreview`'s other parent.
---
 apps/sim/app/f/[token]/public-file-view.tsx            |  4 ++--
 .../files/components/file-viewer/file-viewer.tsx       |  7 ++++---
 .../files/components/file-viewer/preview-panel.tsx     | 10 +++++-----
 .../files/components/file-viewer/text-editor.tsx       |  5 ++++-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/sim/app/f/[token]/public-file-view.tsx b/apps/sim/app/f/[token]/public-file-view.tsx
index d9da924dfce..95b8ff6a930 100644
--- a/apps/sim/app/f/[token]/public-file-view.tsx
+++ b/apps/sim/app/f/[token]/public-file-view.tsx
@@ -66,9 +66,9 @@ export function PublicFileView({
   )
 
   return (
-    <div className='light desktop-title-bar-page flex flex-col bg-[var(--bg)]'>
+    <div className='light desktop-title-bar-page flex h-screen flex-col overflow-hidden bg-[var(--bg)]'>
       <DesktopTitleBarLane />
-      <header className='sticky top-[var(--desktop-title-bar-height)] z-10 flex items-center justify-between gap-4 border-[var(--border)] border-b bg-[var(--bg)] px-4 py-3'>
+      <header className='z-10 flex shrink-0 items-center justify-between gap-4 border-[var(--border)] border-b bg-[var(--bg)] px-4 py-3'>
         <div className='flex min-w-0 items-center gap-3'>
           {!brand.logoUrl && (
             <>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
index ee7919c357c..fe61b735738 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
@@ -284,11 +284,12 @@ const ReadOnlyTextPreview = memo(function ReadOnlyTextPreview({
 
   const resolvedError = resolvePreviewError((error as Error | null) ?? null, null)
   if (resolvedError) return <PreviewError label='file' error={resolvedError} />
-  if (isLoading || content == null) return <PreviewLoadingFrame className='h-full' tone='surface' />
+  if (isLoading || content == null)
+    return <PreviewLoadingFrame className='min-h-0 flex-1' tone='surface' />
 
   if (resolvePreviewType(file.type, file.name)) {
     return (
-      <div className='h-full min-h-0 w-full overflow-auto'>
+      <div className='flex min-h-0 w-full flex-1 flex-col overflow-auto'>
         <PreviewPanel
           content={content}
           mimeType={file.type}
@@ -302,7 +303,7 @@ const ReadOnlyTextPreview = memo(function ReadOnlyTextPreview({
   }
 
   return (
-    <div className='h-full min-h-0 w-full overflow-auto bg-[var(--surface-1)] p-4'>
+    <div className='min-h-0 w-full flex-1 overflow-auto bg-[var(--surface-1)] p-4'>
       <pre className='whitespace-pre-wrap break-words font-mono text-[13px] text-[var(--text-body)]'>
         {content}
       </pre>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
index 764349c42ad..7a0041a4285 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
@@ -200,7 +200,7 @@ const HtmlPreview = memo(function HtmlPreview({ content }: { content: string })
   }, [])
 
   return (
-    <div ref={containerRef} className='h-full overflow-hidden'>
+    <div ref={containerRef} className='flex min-h-0 flex-1 overflow-hidden'>
       {isRenderable && (
         <iframe
           key={resumeNonce}
@@ -225,7 +225,7 @@ function SvgPreview({ content }: { content: string }) {
   }, [content])
 
   return (
-    <ZoomablePreview className='h-full' contentClassName='h-full w-full'>
+    <ZoomablePreview className='min-h-0 flex-1' contentClassName='h-full w-full'>
       {blobUrl && (
         <img
           src={blobUrl}
@@ -240,7 +240,7 @@ function SvgPreview({ content }: { content: string }) {
 
 function MermaidFilePreview({ content, isStreaming }: { content: string; isStreaming?: boolean }) {
   return (
-    <div className='h-full overflow-auto p-6'>
+    <div className='min-h-0 flex-1 overflow-auto p-6'>
       <MermaidDiagram
         definition={content}
         isStreaming={isStreaming}
@@ -267,14 +267,14 @@ const CsvPreview = memo(function CsvPreview({
 
   if (headers.length === 0) {
     return (
-      <div className='flex h-full items-center justify-center p-6'>
+      <div className='flex min-h-0 flex-1 items-center justify-center p-6'>
         <p className='text-[13px] text-[var(--text-muted)]'>No data to display</p>
       </div>
     )
   }
 
   return (
-    <div className='h-full overflow-auto p-6'>
+    <div className='min-h-0 flex-1 overflow-auto p-6'>
       <DataTable headers={headers} rows={rows} />
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx
index 966b1943e8c..3742e0f5cb5 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx
@@ -672,7 +672,10 @@ export const TextEditor = memo(function TextEditor({
             </div>
           )}
           <div
-            className={cn('min-w-0 flex-1 overflow-hidden', isResizing && 'pointer-events-none')}
+            className={cn(
+              'flex min-w-0 flex-1 flex-col overflow-hidden',
+              isResizing && 'pointer-events-none'
+            )}
           >
             <PreviewPanel
               key={previewContextKey ? `${file.id}:${previewContextKey}` : file.id}