fix(dashboard): embedded main-views keep the mobile header/footer

Scope each converted modal's mobile full-screen/viewport-takeover rules to :not(--embedded) (Settings, GitHub import, Git Manager, Workflows) so the embedded main-content variant fills only the content pane and the app Header + MobileNavBar stay visible on mobile. Modal presentation unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/GitHubImportModal.css

@@ -743,7 +743,12 @@
 
 /* Responsive breakpoints */
 @media (max-width: 860px) {
-  .github-import-modal {
+  /* FNXC:GitHubImport 2026-06-22-16:00: viewport-derived width is for the
+     dialog presentation only. :not(.github-import-modal--embedded) prevents
+     the embedded main-content view from being sized off the viewport — it
+     fills its own (potentially much narrower) content pane via the
+     container-query layout below. */
+  .github-import-modal:not(.github-import-modal--embedded) {
     width: calc(100vw - (var(--space-lg) * 2));
   }
 
@@ -772,14 +777,21 @@
 
 @media (max-width: 640px) {
   /* Full-screen sheet on mobile — drop overlay padding so the modal
-     actually fills the viewport instead of being pushed below it. */
-  .modal-overlay:has(.github-import-modal) {
+     actually fills the viewport instead of being pushed below it.
+     FNXC:GitHubImport 2026-06-22-16:00: scope the viewport-takeover to the
+     NON-embedded (dialog) presentation via :not(.github-import-modal--embedded).
+     The embedded view lives inside the main-content pane (between the mobile
+     Header and MobileNavBar); without the guard its base .github-import-modal
+     class matched these 100vw/100dvh rules and covered the whole screen. The
+     embedded panel keeps its own 100%-of-pane sizing from the embedded block
+     below. */
+  .modal-overlay:has(.github-import-modal:not(.github-import-modal--embedded)) {
     padding-top: 0;
     align-items: stretch;
     justify-content: stretch;
   }
 
-  .modal.github-import-modal {
+  .modal.github-import-modal:not(.github-import-modal--embedded) {
     width: 100vw;
     min-width: 0;
     max-width: 100vw;

packages/dashboard/app/components/ScriptsModal.css

@@ -3947,15 +3947,21 @@ The embedded Git Manager adapts to its container width, not the viewport, so the
 
 @media (max-width: 768px) {
   /* Full-screen sheet on mobile — drop overlay padding so the modal
-     actually fills the viewport instead of being pushed below it. */
+     actually fills the viewport instead of being pushed below it.
+     FNXC:GitManager 2026-06-22-16:00: scope the viewport-takeover to the
+     NON-embedded (dialog) presentation via :not(.gm-modal--embedded). The
+     embedded Git Manager renders inside the main-content pane; without the
+     guard its base .gm-modal class matched these 100vw/100dvh rules and hid
+     the app Header + MobileNavBar. The embedded panel keeps its 100%-of-pane
+     sizing from the embedded block above. */
   .modal-overlay.git-manager-modal-overlay,
-  .modal-overlay:has(.gm-modal) {
+  .modal-overlay:has(.gm-modal:not(.gm-modal--embedded)) {
     padding-top: 0;
     align-items: stretch;
     justify-content: stretch;
   }
 
-  .modal.gm-modal {
+  .modal.gm-modal:not(.gm-modal--embedded) {
     width: 100vw;
     min-width: 0;
     max-width: 100vw;
@@ -3969,7 +3975,7 @@ The embedded Git Manager adapts to its container width, not the viewport, so the
     flex: 1 1 auto;
   }
 
-  .modal.gm-modal[style*="--keyboard-overlap"] {
+  .modal.gm-modal:not(.gm-modal--embedded)[style*="--keyboard-overlap"] {
     height: var(--vv-height, 100dvh);
     min-height: var(--vv-height, 100dvh);
     max-height: var(--vv-height, 100dvh);
@@ -3978,14 +3984,21 @@ The embedded Git Manager adapts to its container width, not the viewport, so the
   }
 
   /* Same treatment for the Automations modal — same min-width: 480px would
-     otherwise force it wider than narrow viewports. */
-  .modal-overlay:has(.automation-modal) {
+     otherwise force it wider than narrow viewports.
+     FNXC:Automations 2026-06-22-16:00: scope the viewport-takeover to the
+     dialog presentation only. The embedded Automations view uses the distinct
+     .automations-embedded / .automations-embedded-view classes (it does NOT
+     carry .automation-modal), so it is unaffected here — but the guard keeps
+     this rule from ever leaking onto an embedded variant should the markup
+     share the base class later. The embedded view fills its pane and scrolls
+     via .automations-embedded-view (inline-size:100% + overflow-y:auto). */
+  .modal-overlay:has(.automation-modal:not(.automation-modal--embedded)) {
     padding-top: 0;
     align-items: stretch;
     justify-content: stretch;
   }
 
-  .modal.automation-modal {
+  .modal.automation-modal:not(.automation-modal--embedded) {
     width: 100vw;
     min-width: 0;
     max-width: 100vw;

packages/dashboard/app/components/SettingsModal.css

@@ -159,17 +159,24 @@ The embedded title reads like other embedded-view titles (Planning modal-header-
    modal wider than narrow viewports, pushing it off-screen; the desktop
    `height: 80vh` left awkward strips of overlay above and below. Drop the
    overlay's default top padding so the modal actually fills the viewport,
-   and disable resize (touchscreen users can't drag the grip anyway). */
+   and disable resize (touchscreen users can't drag the grip anyway).
+   FNXC:Settings 2026-06-22-16:00: scope the viewport-takeover rules to the
+   NON-embedded (dialog) presentation only via :not(.settings-modal--embedded).
+   The embedded panel lives inside the main-content pane (between the mobile
+   Header and MobileNavBar); without the guard its base .settings-modal class
+   matched these 100vw/100dvh rules and covered the whole screen, hiding the
+   app header/footer. The embedded view's own fill-the-pane sizing is handled
+   below. */
 @media (max-width: 768px) {
   .modal-overlay.settings-modal-overlay,
-  .modal-overlay:has(.settings-modal) {
+  .modal-overlay:has(.settings-modal:not(.settings-modal--embedded)) {
     padding: 0;
     inset: 0;
     align-items: stretch;
     justify-content: stretch;
   }
 
-  .modal.settings-modal {
+  .modal.settings-modal:not(.settings-modal--embedded) {
     width: 100vw;
     min-width: 0;
     max-width: 100vw;
@@ -183,13 +190,26 @@ The embedded title reads like other embedded-view titles (Planning modal-header-
     flex: 1 1 auto;
   }
 
-  .modal.settings-modal[style*="--keyboard-overlap"] {
+  .modal.settings-modal:not(.settings-modal--embedded)[style*="--keyboard-overlap"] {
     height: var(--vv-height, 100dvh);
     min-height: var(--vv-height, 100dvh);
     max-height: var(--vv-height, 100dvh);
     transform: translateY(var(--vv-offset-top, 0px));
     will-change: transform;
   }
+
+  /* FNXC:Settings 2026-06-22-16:00: on mobile the embedded settings view fills
+     only its own content pane (not the viewport) and scrolls internally so the
+     app Header + MobileNavBar stay visible. Trim the outer host padding so the
+     panel and its section navigation sit edge-to-edge in the narrow pane. */
+  .settings-embedded.right-dock-embedded-view {
+    padding: var(--space-sm);
+  }
+
+  .settings-embedded .settings-modal--embedded {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 /* === Settings Layout === */

packages/dashboard/app/components/WorkflowNodeEditor.css

@@ -1794,14 +1794,22 @@ Column trait toggles are left-sidebar workflow controls; keep their enabled and
     padding-right: 0;
   }
 
-  .modal-overlay:has(.wf-editor-modal),
+  /* FNXC:WorkflowEditor 2026-06-22-16:00: scope the viewport-takeover to the
+     dialog presentation only via :not(.wf-editor-modal--embedded). The embedded
+     workflow editor renders inside the main-content pane (between the mobile
+     Header and MobileNavBar); without the guard its base .wf-editor-modal class
+     matched these 100vw/100dvh rules and covered the whole screen. The embedded
+     panel keeps its 100%-of-pane sizing from the embedded block above and fills
+     only the content area. .wf-create-modal has no embedded variant, so it stays
+     full-screen as a dialog. */
+  .modal-overlay:has(.wf-editor-modal:not(.wf-editor-modal--embedded)),
   .modal-overlay:has(.wf-create-modal) {
     padding-top: 0;
     align-items: stretch;
     justify-content: stretch;
   }
 
-  .wf-editor-modal,
+  .wf-editor-modal:not(.wf-editor-modal--embedded),
   .wf-create-modal {
     width: 100vw;
     min-width: 0;