[Fix]: table header on different table sizes

Author: iamfaran

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={{

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 {

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,