fix minor layout (#338)

* fix grab

* fix Menu.Divider

* fix action

* fix hover color

* fix fullscreen border

Author: mintaka2479

packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css

@@ -10,8 +10,6 @@
   background-clip: padding-box;
   font-weight: bold;
   overflow: visible;
-  padding: calc(var(--mrt-table-head-cell-padding) * 1px);
-  padding-bottom: calc(var(--mrt-table-head-cell-padding) * 2 / 3 * 1px);
   position: relative;
   transition: padding 150ms ease-in-out;
   vertical-align: top;

packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx

@@ -55,7 +55,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     refs: { tableHeadCellRefs },
     setHoveredColumn,
   } = table;
-  const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn } =
+  const { columnSizingInfo, draggingColumn, grouping, hoveredColumn } =
     getState();
   const { column } = header;
   const { columnDef } = column;
@@ -165,8 +165,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
           isColumnPinned === 'right'
             ? `${column.getAfter(isColumnPinned)}`
             : undefined,
-        '--mrt-table-head-cell-padding':
-          density === 'xl' ? '23' : density === 'md' ? '16' : '10',
       }}
       align={
         columnDefType === 'group'

packages/mantine-react-table/src/components/head/MRT_TableHeadCellFilterLabel.module.css

@@ -6,6 +6,7 @@
     var(--mantine-color-gray-1),
     var(--mantine-color-dark-6)
   );
+  --ai-hover-color: var(--mantine-color-bright);
   color: var(--mantine-color-bright);
   &[data-active] {
     color: var(--mantine-primary-color-filled);

packages/mantine-react-table/src/components/head/MRT_TableHeadCellSortLabel.module.css

@@ -6,6 +6,7 @@
     var(--mantine-color-gray-1),
     var(--mantine-color-dark-6)
   );
+  --ai-hover-color: var(--mantine-color-bright);
   color: var(--mantine-color-bright);
   &[data-sorted] {
     color: var(--mantine-primary-color-filled);

packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenu.module.css

@@ -2,8 +2,9 @@
   max-height: calc(80vh - 100px);
   overflow-y: auto;
   .content {
-    padding: 8px;
-    gap: 8px;
+    padding-top: rem(4px);
+    padding-bottom: rem(4px);
+    gap: rem(8px);
     justify-content: space-between;
   }
 }

packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import classes from './MRT_ShowHideColumnsMenu.module.css';
 import { useMemo, useState } from 'react';
-import { Button, Divider, Flex, Menu } from '@mantine/core';
+import { Button, Flex, Menu } from '@mantine/core';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import {
   type MRT_Column,
@@ -113,7 +113,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
           </Button>
         )}
       </Flex>
-      <Divider />
+      <Menu.Divider />
       {allColumns.map((column, index) => (
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}

packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.module.css

@@ -22,7 +22,7 @@
   gap: rem(8px);
 }
 .grab {
-  width: rem(22px);
+  width: rem(28px);
 }
 .pin {
   width: rem(70px);

packages/mantine-react-table/src/components/table/MRT_TablePaper.tsx

@@ -56,6 +56,8 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         ...parseFromValuesOrFunc(tablePaperProps?.style, theme),
         ...(isFullScreen
           ? {
+              border: 0,
+              borderRadius: 0,
               bottom: 0,
               height: '100vh',
               left: 0,

packages/mantine-react-table/stories/features/ColumnActions.stories.tsx

@@ -1,4 +1,4 @@
-import { Divider, Menu } from '@mantine/core';
+import { Menu } from '@mantine/core';
 import { type MRT_ColumnDef, MantineReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
 import { type Meta } from '@storybook/react';
@@ -166,7 +166,7 @@ export const CustomColumnActionsPerColumn = () => (
         renderColumnActionsMenuItems: ({ internalColumnMenuItems }) => (
           <>
             {internalColumnMenuItems}
-            <Divider />
+            <Menu.Divider />
             <Menu.Item>Item 1</Menu.Item>
             <Menu.Item>Item 2</Menu.Item>
           </>