From 178d020fc0c45b0051651cd5d869970e5ad4c3a7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 19 Jun 2026 12:51:29 +0100
Subject: [PATCH 1/3] Some temp CSS as a rough target

---
 resources/css/components/forms.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/resources/css/components/forms.css b/resources/css/components/forms.css
index 47303fb598..b066c66800 100644
--- a/resources/css/components/forms.css
+++ b/resources/css/components/forms.css
@@ -156,6 +156,25 @@
     [data-collapsed-field-icon] {
         display: inline-flex;
     }
+
+
+    gap: 0.5rem!important;
+    /* Wrapper/white background */
+    [data-section-drop-zone]:has(&) {
+        background: unset;
+        box-shadow: unset;
+        padding: 0;
+    }
+
+    [data-field-item] {
+        @apply px-4 py-2.75;
+        background: white;
+        border-radius: 0.75rem;
+        @apply shadow-ui-md;
+    }
+    + [id*="actions"] {
+        margin-block-start: 1rem;
+    }
 }
 
 

From 4c7f2d5ed7469e2df399599529860f610ed2b938 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 19 Jun 2026 14:52:24 +0100
Subject: [PATCH 2/3] Bring compressed view closer to conventional blueprint
 editor - wip

---
 resources/css/components/forms.css            | 33 +++++++++++--------
 resources/css/components/publish.css          |  2 +-
 .../js/components/forms/builder/Page.vue      |  2 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/resources/css/components/forms.css b/resources/css/components/forms.css
index b066c66800..e1f36c7d54 100644
--- a/resources/css/components/forms.css
+++ b/resources/css/components/forms.css
@@ -125,8 +125,10 @@
     display: none;
 }
 
-/* Collapsed state */
+/* GROUP MAIN COLUMN / COLLAPSIBLE FIELDS / COLLAPSED STATE
+=================================================== */
 [data-fields-collapsed="true"] {
+    /* Hide the inputs */
     [data-ui-input-group] {
         [data-ui-description],
         > :not(:first-child, :has([data-logic-attached])) {
@@ -137,28 +139,27 @@
             margin-bottom: 0;
         }
     }
+
     [data-editing-item] {
-        /* Tweak things optically, since the field is no longer here */
-        > *:first-child {
-            top: -0.175rem;
+        /* Tweak the actions position since the surrounding space is different */
+        [data-editing-field-actions] {
+            top: 50%;
+            transform: translateY(calc(-50% - 0.5px));
+            @apply pe-3;
         }
+
+        &[data-first-row]::before,
+        &[data-last-row]::before,
         &::before {
-            inset-block: -0.75rem;
-        }
-        &[data-first-row]::before {
-            inset-block-start: -1.25rem;
-        }
-        &[data-last-row]::before {
-            inset-block-end: -1.25rem;
+            inset: calc(0% - 1px);
         }
     }
+
     /* Field Icons */
     [data-collapsed-field-icon] {
         display: inline-flex;
     }
 
-
-    gap: 0.5rem!important;
     /* Wrapper/white background */
     [data-section-drop-zone]:has(&) {
         background: unset;
@@ -172,8 +173,12 @@
         border-radius: 0.75rem;
         @apply shadow-ui-md;
     }
-    + [id*="actions"] {
+
+    ~ [data-pagination] {
         margin-block-start: 1rem;
+        button:first-of-type {
+            border-end-start-radius: 10px;
+        }
     }
 }
 
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index e70cfd7595..5ed7a3a50c 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -9,7 +9,7 @@
 
     &[data-fields-collapsed="true"] {
         /* Collapse the grid further on Forms > Someform > Edit, when we're in the collapsed view */
-        @apply gap-5;
+        @apply gap-2;
     }
 
     aside & {
diff --git a/resources/js/components/forms/builder/Page.vue b/resources/js/components/forms/builder/Page.vue
index 3d263b282c..b97cfb25c9 100644
--- a/resources/js/components/forms/builder/Page.vue
+++ b/resources/js/components/forms/builder/Page.vue
@@ -110,7 +110,7 @@ onMounted(() => {
                 @deleted="sectionDeleted"
             >
                 <template v-if="section.fields.length && sectionIndex === (sections.length - 1)" #footer>
-                    <div :id="`actions-${page._id}`" class="mt-8">
+                    <div :id="`actions-${page._id}`" data-pagination class="mt-8">
                         <div class="cursor-pointer flex gap-2.5" @click.prevent="inspectAction">
                             <Button
                                 v-if="page.previous_page_label"

From eb5c6a991a9f79231b5ac799fe7cb1dd28bcc7fe Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 19 Jun 2026 22:38:19 +0100
Subject: [PATCH 3/3] Bring compressed view closer to conventional blueprint
 editor - finish

---
 resources/css/components/forms.css | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/resources/css/components/forms.css b/resources/css/components/forms.css
index e1f36c7d54..2f580aba16 100644
--- a/resources/css/components/forms.css
+++ b/resources/css/components/forms.css
@@ -168,16 +168,14 @@
     }
 
     [data-field-item] {
-        @apply px-4 py-2.75;
-        background: white;
-        border-radius: 0.75rem;
-        @apply shadow-ui-md;
+        @apply px-3 sm:px-5 py-2.75 bg-white dark:bg-gray-850 rounded-xl ring ring-gray-200 dark:ring-gray-700/80 shadow-ui-md;
     }
 
     ~ [data-pagination] {
-        margin-block-start: 1rem;
-        button:first-of-type {
-            border-end-start-radius: 10px;
+        @apply mt-4;
+        /* Editing a button like "Next page" and "Submit" */
+        :has(> button)::before {
+            inset: calc(0% - 1px);
         }
     }
 }