Fix guide flow editor layout sizing

app/Filament/Resources/GuideResource/Pages/ManageGuidePages.php

@@ -18,6 +18,8 @@ class ManageGuidePages extends Page
 
     protected static string $view = 'filament.resources.guide.manage-pages';
 
+    protected ?string $maxContentWidth = 'full';
+
     public array $nodes = [];
 
     public array $edges = [];

resources/views/filament/resources/guide/manage-pages.blade.php

@@ -2,14 +2,14 @@
     <link rel="stylesheet" href="{{ asset('vendor/drawflow/drawflow.min.css') }}">
     <script src="{{ asset('vendor/drawflow/drawflow.min.js') }}"></script>
 
-    <div class="space-y-4">
+    <div class="guide-flow-page space-y-4">
         {{-- Header actions --}}
         <div class="flex gap-2">
             {{ $this->createPageAction }}
         </div>
 
         {{-- Drawflow canvas --}}
-        <div class="fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 overflow-hidden">
+        <div class="guide-flow-canvas fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 overflow-hidden">
             <div id="drawflow" wire:ignore></div>
         </div>
     </div>
@@ -17,14 +17,34 @@
     <x-filament-actions::modals />
 
     <style>
+        .guide-flow-page {
+            width: 100%;
+        }
+
+        .guide-flow-canvas {
+            width: 100%;
+        }
+
         #drawflow {
             width: 100%;
-            height: 600px;
+            height: max(680px, calc(100vh - 14rem));
             background-color: #f8fafc;
             background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
             background-size: 20px 20px;
         }
 
+        @media (max-width: 1024px) {
+            #drawflow {
+                height: max(560px, calc(100vh - 16rem));
+            }
+        }
+
+        @media (max-width: 640px) {
+            #drawflow {
+                height: max(480px, 70vh);
+            }
+        }
+
         /* Node styling */
         .drawflow .drawflow-node {
             border-radius: 12px;