From cfa6e6cf359286b73c79dd43b0ca9650c7a8819d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 22 Oct 2026 16:10:01 +0200
Subject: [PATCH 1/2] Give the dashboard and the form editor one top bar height

Both bars use the new h-bar height (3.5rem) instead of h-16 and h-14. The dashboard bar's side padding now matches the form bar from lg.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 resources/js/Layouts/AppLayout.test.ts        | 29 +++++++++++++++++++
 resources/js/Layouts/AppLayout.vue            |  6 ++--
 .../components/Factory/TopBar/FormTopBar.vue  |  2 +-
 tailwind.config.js                            |  4 +++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/resources/js/Layouts/AppLayout.test.ts b/resources/js/Layouts/AppLayout.test.ts
index f6b89efe..5ff9e263 100644
--- a/resources/js/Layouts/AppLayout.test.ts
+++ b/resources/js/Layouts/AppLayout.test.ts
@@ -93,4 +93,33 @@ describe("app header", () => {
         // on phones it's in the form menu: the name keeps its room
         expect(preview.classes()).toEqual(expect.arrayContaining(["hidden", "lg:flex"]));
     });
+
+    it("gives the dashboard bar and a form's bar one height", async () => {
+        window.route = ((name: string) => `/${name}`) as typeof window.route;
+        // the store is shared, so check the dashboard bar before a form is set
+        const dashboard = mountLayout();
+        useForm().$patch({ form: null });
+        await dashboard.vm.$nextTick();
+        expect(dashboard.get("nav.bg-grey-800 > div > div").classes()).toContain("h-bar");
+
+        const wrapper = mount(AppLayout, {
+            props: { title: "Form Settings" },
+            global: {
+                mocks: { $page, route: () => "/" },
+                stubs: {
+                    Head: true,
+                    Link: true,
+                    JetBanner: true,
+                    FormMenu: true,
+                    FormPageTabs: true,
+                    PublishControl: true,
+                    AccountMenu: true,
+                },
+            },
+        });
+        useForm().$patch({ form: { uuid: "form1", is_published: false } as FormModel });
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.get("header").classes()).toContain("h-bar");
+    });
 });
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index fee23233..bd60482e 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -14,12 +14,12 @@
 
       <nav v-else class="bg-grey-800">
         <!-- Primary Navigation Menu -->
-        <div class="mx-auto px-4 sm:px-6 lg:px-8">
-          <div class="flex h-16 items-center justify-between">
+        <div class="mx-auto px-4 lg:pl-4 lg:pr-3">
+          <div class="flex h-bar items-center justify-between">
             <!-- Logo; a long team name shortens, so the menus fit -->
             <div class="mr-3 flex min-w-0 items-center sm:mr-6">
               <Link
-                class="flex h-11 min-w-0 items-center"
+                class="flex h-11 min-w-0 items-center lg:px-1"
                 :href="route('dashboard')"
               >
                 <jet-application-logo
diff --git a/resources/js/components/Factory/TopBar/FormTopBar.vue b/resources/js/components/Factory/TopBar/FormTopBar.vue
index 76a0ac0e..a80d4848 100644
--- a/resources/js/components/Factory/TopBar/FormTopBar.vue
+++ b/resources/js/components/Factory/TopBar/FormTopBar.vue
@@ -2,7 +2,7 @@
   <!-- One bar for a form's pages: breadcrumb, pages, then status and actions.
     Under lg the pages move to FormPageTabs at the bottom. -->
   <header
-    class="relative flex h-14 flex-none items-center gap-1 bg-grey-800 px-1 text-grey-300 lg:gap-4 lg:pl-4 lg:pr-3"
+    class="relative flex h-bar flex-none items-center gap-1 bg-grey-800 px-1 text-grey-300 lg:gap-4 lg:pl-4 lg:pr-3"
   >
     <Link
       :href="route('dashboard')"
diff --git a/tailwind.config.js b/tailwind.config.js
index 2c239a46..6ff5fedc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,6 +27,10 @@ module.exports = {
 
     theme: {
         extend: {
+            height: {
+                // the top bar of the dashboard and of a form share one height
+                bar: "3.5rem",
+            },
             fontSize: {
                 xxs: "0.625rem",
             },

From e2120681cbdac41f33820d229af6694f80cc1caf Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Thu, 22 Oct 2026 16:10:36 +0200
Subject: [PATCH 2/2] Changelog: same top bar height

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd0f0f43..8ddacfa2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ Lines marked **Upgrade step** need you to act after updating.
 
 ### Fixed
 
+-   The top bar has the same height on the dashboard and in the form editor, so it no longer jumps between them. (#300)
 -   No more PHP 8.5 deprecation warning for the MySQL SSL option on container start. (#298)
 
 ## [2.3.0] - 2026-10-22