modstagram/modstagram-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): PageTitle stays screen-centered regardless of action button width

Browse Source 
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>
This commit is contained in:
payacom
2026-09-16 18:18:23 +03:30
parent 1efb435dad
commit efad306617
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/settings/PageTitle.tsx
View File

@@ -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" />
) : (