From 46b37f4987e75fef9ee38572480b4b0d62496e96 Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Thu, 16 Oct 2025 11:29:31 +0200
Subject: [PATCH 1/2] refactor: simplify layout and styles for Inspect page and
 Sandbox layout

- **Inspect page** (`src/app/.../inspect/page.tsx`):
  - Removed unnecessary utility class for ClientOnly component, simplifying its styling.

- **Sandbox layout** (`src/features/dashboard/sandbox/layout.tsx`):
  - Enhanced responsiveness by adjusting class names for the main container and DashboardTab, ensuring better mobile behavior.

This update improves the overall layout and responsiveness of the Inspect page and Sandbox layout.
---
 .../sandboxes/[sandboxId]/inspect/page.tsx             |  8 +-------
 src/features/dashboard/sandbox/layout.tsx              | 10 +++++++---
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx b/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx
index 8121a7a32..a9569d185 100644
--- a/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx
+++ b/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx
@@ -2,7 +2,6 @@ import { COOKIE_KEYS } from '@/configs/keys'
 import { SandboxInspectProvider } from '@/features/dashboard/sandbox/inspect/context'
 import SandboxInspectFilesystem from '@/features/dashboard/sandbox/inspect/filesystem'
 import SandboxInspectViewer from '@/features/dashboard/sandbox/inspect/viewer'
-import { cn } from '@/lib/utils'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
 import { getSandboxRoot } from '@/server/sandboxes/get-sandbox-root'
 import ClientOnly from '@/ui/client-only'
@@ -40,12 +39,7 @@ export default async function SandboxInspectPage({
       rootPath={rootPath}
       seedEntries={res?.data?.entries ?? []}
     >
-      <ClientOnly
-        className={cn(
-          'flex flex-1 gap-4 overflow-hidden p-3 md:p-6',
-          'max-md:sticky max-md:top-0 max-md:min-h-[calc(100vh-var(--protected-navbar-height))]'
-        )}
-      >
+      <ClientOnly className="flex flex-1 gap-4 overflow-hidden p-3 md:p-6">
         <SandboxInspectFilesystem rootPath={rootPath} />
         <SandboxInspectViewer />
       </ClientOnly>
diff --git a/src/features/dashboard/sandbox/layout.tsx b/src/features/dashboard/sandbox/layout.tsx
index 68f94cf6d..61a413cb2 100644
--- a/src/features/dashboard/sandbox/layout.tsx
+++ b/src/features/dashboard/sandbox/layout.tsx
@@ -33,14 +33,18 @@ export default function SandboxLayout({
   }
 
   return (
-    <div className="flex max-h-svh h-full min-h-0 flex-1 flex-col max-md:overflow-y-auto">
+    <div className="flex max-h-svh h-full min-h-0 flex-1 flex-col max-md:h-auto max-md:min-h-svh max-md:overflow-y-auto">
       {header}
 
-      <DashboardTabs type="path" layoutKey="tabs-indicator-sandbox">
+      <DashboardTabs
+        type="path"
+        layoutKey="tabs-indicator-sandbox"
+        className="max-md:sticky max-md:top-0 max-md:z-20 max-md:bg-bg"
+      >
         <DashboardTab
           id="inspect"
           label="Inspect"
-          className="flex flex-col max-h-full"
+          className="flex flex-col max-h-full max-md:min-h-svh"
         >
           {isEnvdVersionCompatibleForInspect ? (
             children

From b93a6ee11059fe1a191e6490015d1f77cab2f0f0 Mon Sep 17 00:00:00 2001
From: Ben Fornefeld <ben.fornefeld@gmail.com>
Date: Thu, 16 Oct 2025 12:09:02 +0200
Subject: [PATCH 2/2] fix: enhance responsiveness and layout for Inspect page
 and Sandbox layout

- **Inspect page**: Updated `ClientOnly` component to improve mobile positioning.
- **Sandbox layout**: Adjusted `DashboardTab` class for better mobile behavior and ensured consistent height constraints.
- **Incompatible component**: Modified layout for improved flexibility and responsiveness.

These changes aim to enhance the user experience on mobile devices by refining the layout and responsiveness of key components.
---
 .../[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx     | 2 +-
 src/features/dashboard/sandbox/inspect/incompatible.tsx       | 4 ++--
 src/features/dashboard/sandbox/layout.tsx                     | 4 ++--
 src/ui/dashboard-tabs.tsx                                     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx b/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx
index a9569d185..301095429 100644
--- a/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx
+++ b/src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx
@@ -39,7 +39,7 @@ export default async function SandboxInspectPage({
       rootPath={rootPath}
       seedEntries={res?.data?.entries ?? []}
     >
-      <ClientOnly className="flex flex-1 gap-4 overflow-hidden p-3 md:p-6">
+      <ClientOnly className="max-md:absolute max-md:inset-0 flex flex-1 gap-4 overflow-hidden p-3 md:p-6">
         <SandboxInspectFilesystem rootPath={rootPath} />
         <SandboxInspectViewer />
       </ClientOnly>
diff --git a/src/features/dashboard/sandbox/inspect/incompatible.tsx b/src/features/dashboard/sandbox/inspect/incompatible.tsx
index 32a3d6a9a..7e1b0dec3 100644
--- a/src/features/dashboard/sandbox/inspect/incompatible.tsx
+++ b/src/features/dashboard/sandbox/inspect/incompatible.tsx
@@ -38,10 +38,10 @@ export default function SandboxInspectIncompatible({
       team_id: teamIdOrSlug,
       template_name_or_id: templateNameOrId,
     })
-  }, [trackInteraction, teamIdOrSlug])
+  }, [trackInteraction, teamIdOrSlug, templateNameOrId])
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center p-4 md:justify-center">
+    <div className="flex flex-1 min-h-0 max-md:absolute max-md:inset-0 w-full max-md: flex-col items-center justify-center p-4 md:justify-center">
       <div className="text-fill-highlight pointer-events-none absolute -top-30 -right-100 -z-10 flex overflow-hidden">
         <AsciiBackgroundPattern className="w-1/2" />
         <AsciiBackgroundPattern className="mi w-1/2 -scale-x-100" />
diff --git a/src/features/dashboard/sandbox/layout.tsx b/src/features/dashboard/sandbox/layout.tsx
index 61a413cb2..08b518e71 100644
--- a/src/features/dashboard/sandbox/layout.tsx
+++ b/src/features/dashboard/sandbox/layout.tsx
@@ -39,12 +39,12 @@ export default function SandboxLayout({
       <DashboardTabs
         type="path"
         layoutKey="tabs-indicator-sandbox"
-        className="max-md:sticky max-md:top-0 max-md:z-20 max-md:bg-bg"
+        className="max-md:sticky max-md:top-0 max-md:z-20 max-md:bg-bg max-md:min-h-svh"
       >
         <DashboardTab
           id="inspect"
           label="Inspect"
-          className="flex flex-col max-h-full max-md:min-h-svh"
+          className="flex flex-col max-h-full relative"
         >
           {isEnvdVersionCompatibleForInspect ? (
             children
diff --git a/src/ui/dashboard-tabs.tsx b/src/ui/dashboard-tabs.tsx
index 306bcbffb..6dfa83d6f 100644
--- a/src/ui/dashboard-tabs.tsx
+++ b/src/ui/dashboard-tabs.tsx
@@ -74,7 +74,7 @@ function DashboardTabsComponent({
             className="w-fit flex-none"
             asChild
           >
-            <Link href={tab.href} prefetch>
+            <Link href={tab.href}>
               {tab.icon}
               {tab.label}
             </Link>