From 701ae5c78d24cad126bf5495b2554829cc4d837f Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 05:10:01 +0100
Subject: [PATCH] fix(base): align title and table at the same left edge with
 shared horizontal padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap both the title editor and the BaseTable in one outer flex
container that owns the horizontal padding (24px on each side).
Each child only sets vertical spacing — they no longer fight over
their own left positions, so the title's left edge now lines up
with the toolbar / first column header below.
---
 apps/client/src/pages/page/page.tsx | 31 +++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/pages/page/page.tsx b/apps/client/src/pages/page/page.tsx
index 88c13f50a..2981cc346 100644
--- a/apps/client/src/pages/page/page.tsx
+++ b/apps/client/src/pages/page/page.tsx
@@ -109,25 +109,34 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
           <title>{`${page?.icon || ""}  ${page?.title || t("untitled")}`}</title>
         </Helmet>
         <MemoizedPageHeader readOnly={!canEdit} />
-        <div style={{ padding: "32px 24px 12px" }}>
-          <MemoizedTitleEditor
-            pageId={page.id}
-            slugId={page.slugId}
-            title={page.title}
-            spaceSlug={page.space?.slug ?? ""}
-            editable={canEdit}
-          />
-        </div>
         <div
           style={{
             flex: 1,
             minHeight: 0,
             display: "flex",
             flexDirection: "column",
-            paddingInline: 18,
+            paddingInline: 24,
           }}
         >
-          <BaseTable pageId={page.id} />
+          <div style={{ paddingTop: 32, paddingBottom: 12 }}>
+            <MemoizedTitleEditor
+              pageId={page.id}
+              slugId={page.slugId}
+              title={page.title}
+              spaceSlug={page.space?.slug ?? ""}
+              editable={canEdit}
+            />
+          </div>
+          <div
+            style={{
+              flex: 1,
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <BaseTable pageId={page.id} />
+          </div>
         </div>
       </div>
     );