From efad306617bbcb4473fc8990268a595d42d0b724 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Wed, 16 Sep 2026 18:18:23 +0330
Subject: [PATCH] fix(ui): PageTitle stays screen-centered regardless of action
 button width

Right column was minmax(2.5rem,auto), growing with wider action content
(e.g. a text button) and dragging the title's visual center off true
screen center. Both side columns are now a fixed 2.5rem, matching
EditPageHeader.tsx's already-correct pattern.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/settings/PageTitle.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/PageTitle.tsx b/src/components/settings/PageTitle.tsx
index 5cf5733..3a0d3d3 100644
--- a/src/components/settings/PageTitle.tsx
+++ b/src/components/settings/PageTitle.tsx
@@ -12,8 +12,12 @@ type PageTitleProps = {
    * Optional right-side controls (e.g. a page-specific action icon). Pass content
    * here instead of wrapping <PageTitle> in an outer flex row — an outer wrapper
    * shrinks this component to its own content width, which pushes the back button
-   * away from the true screen edge. The back button's column is always a fixed
-   * 2.5rem regardless of what's in this slot, so its position never moves.
+   * away from the true screen edge. Both side columns are a fixed 2.5rem so the
+   * title's center point never shifts — previously the right column was
+   * minmax(2.5rem,auto), which grew with wider action content (e.g. a text
+   * button) and dragged the visual center of the title off the true screen
+   * center. Content wider than 2.5rem still renders at its natural size and
+   * simply overflows its column instead of resizing it.
    */
   action?: React.ReactNode;
 };
@@ -28,7 +32,7 @@ const PageTitle: React.FC<PageTitleProps> = ({
   usePageTitle(titleText);
 
   return (
-    <div className="my-7 grid w-full grid-cols-[2.5rem_1fr_minmax(2.5rem,auto)] items-center gap-2">
+    <div className="my-7 grid w-full grid-cols-[2.5rem_1fr_2.5rem] items-center gap-2">
       {showBack ? (
         <BackButton href={backHref} className="justify-self-start" />
       ) : (