[69204] PageHeader title is misaligned on Overview page (#383)

bsatarnejad · web-flow · commit 74f47890648f · 2025-12-02T14:18:15.000+01:00
* Set for the height of actions in page header

* Create mighty-fireants-draw.md

* Generating component snapshots

* Set for the height of actions in page header

* remove unnecessary line
diff --git a/.changeset/mighty-fireants-draw.md b/.changeset/mighty-fireants-draw.md
@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+[69204] PageHeader title is misaligned on Overview page
diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
@@ -91,7 +91,13 @@
   }
 }
 
-/* Match the title bar height with the toggle menu button for proper vertical alignment */
-.PageHeader--noBreadcrumb .PageHeader-titleBar {
-  line-height: var(--control-small-size);
+/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
+.PageHeader--noBreadcrumb {
+  & .PageHeader-titleBar {
+    line-height: var(--control-small-size);
+  }
+
+  & .PageHeader-actions {
+    height: var(--control-small-size);
+  }
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@openproject/primer-view-components": patch
 +---
++
 +[69204] PageHeader title is misaligned on Overview page
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,13 @@`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`
`94`		`-/* Match the title bar height with the toggle menu button for proper vertical alignment */`
`95`		`-.PageHeader--noBreadcrumb .PageHeader-titleBar {`
`96`		`- line-height: var(--control-small-size);`
	`94`	`+/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */`
	`95`	`+.PageHeader--noBreadcrumb {`
	`96`	`+ & .PageHeader-titleBar {`
	`97`	`+ line-height: var(--control-small-size);`
	`98`	`+ }`
	`99`	`+`
	`100`	`+ & .PageHeader-actions {`
	`101`	`+ height: var(--control-small-size);`
	`102`	`+ }`
`97`	`103`	`}`