Give the dashboard and the form editor the same top bar height

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)
 -   Clicking "Log in" on the two-factor code screen now sends the code. Before, only Enter worked. (#299)
 -   No more PHP 8.5 deprecation warning for the MySQL SSL option on container start. (#298)
 

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");
+    });
 });

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

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')"

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",
             },