From d5e3b23a207b44f3b39e630aa4c6fb68d2a7247e Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Tue, 28 Oct 2025 23:46:01 +0500
Subject: [PATCH] [Fix]: table header on different table sizes

---
 .../comps/comps/tableComp/tableCompView.tsx   |  1 +
 .../src/comps/comps/tableComp/tableStyles.ts  | 19 +++++++++++++++++++
 .../comps/controls/styleControlConstants.tsx  |  1 -
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 74d431f7a..9b98bcc35 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -376,6 +376,7 @@ export const TableCompView = React.memo((props: {
             $isVirtual={scrollConfig.virtual}
             $showHorizontalScrollbar={showHorizontalScrollbar}
             $showVerticalScrollbar={showVerticalScrollbar}
+            $tableSize={size as 'small' | 'middle' | 'large'}
           >
             <ResizeableTable<RecordType>
               expandable={{
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts
index 54c856c14..d706acb16 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts
@@ -141,6 +141,7 @@ export const TableWrapper = styled.div.attrs<{
   $isVirtual?: boolean;
   $showHorizontalScrollbar?: boolean;
   $showVerticalScrollbar?: boolean;
+  $tableSize?: "small" | "middle" | "large";
 }>`
   .ant-table-wrapper {
     border-top: unset;
@@ -207,6 +208,7 @@ export const TableWrapper = styled.div.attrs<{
             border-color: ${(props) => props.$headerStyle.border};
             border-width: ${(props) => props.$headerStyle.borderWidth};
             color: ${(props) => props.$headerStyle.headerText};
+            padding: 0 !important; /* Override Ant Design's default padding */
             // border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
 
             /* Proper styling for fixed header cells */
@@ -223,6 +225,9 @@ export const TableWrapper = styled.div.attrs<{
 
             > div {
               margin: ${(props) => props.$headerStyle.margin};
+              /* Default padding for middle size (Ant Design default) */
+              padding: 8px 8px;
+              min-height: 24px;
 
               &, .ant-table-column-title > div {
                 font-size: ${(props) => props.$headerStyle.textSize};
@@ -231,6 +236,20 @@ export const TableWrapper = styled.div.attrs<{
                 font-style: ${(props) => props.$headerStyle.fontStyle};
                 color:${(props) => props.$headerStyle.headerText}
               }
+
+              /* Adjust header size based on table size */
+              ${(props) => props.$tableSize === 'small' && `
+                padding: 1px 8px;
+                min-height: 14px;
+              `}
+              ${(props) => props.$tableSize === 'middle' && `
+                padding: 8px 8px;
+                min-height: 24px;
+              `}
+              ${(props) => props.$tableSize === 'large' && `
+                padding: 16px 16px;
+                min-height: 48px;
+              `}
             }
 
             &:last-child {
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 569ada9c4..2fcbb4f90 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1771,7 +1771,6 @@ export const TableToolbarStyle = [
 
 export const TableHeaderStyle = [
   MARGIN,
-  PADDING,
   FONT_FAMILY,
   FONT_STYLE,
   TEXT,