fix(core): some ui style issues (#5995)

Increase page info toggle click area:

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/7f712008-c2db-4522-81b0-6c18d2aea421.png)

fix history modal page height

packages/frontend/core/src/components/affine/page-history-modal/styles.css.ts

@@ -5,6 +5,7 @@ import { range } from 'lodash-es';
 const headerHeight = createVar('header-height');
 const footerHeight = createVar('footer-height');
 const historyListWidth = createVar('history-list-width');
+const previewTopOffset = createVar('preview-top-offset');
 export const root = style({
   height: '100%',
   width: '100%',
@@ -12,6 +13,7 @@ export const root = style({
     [headerHeight]: '52px',
     [footerHeight]: '68px',
     [historyListWidth]: '240px',
+    [previewTopOffset]: '40px',
   },
 });
 export const modalContent = style({
@@ -58,7 +60,7 @@ export const previewContainer = style({
       range(-20, 20).map(i => [
         `&[data-distance="${i}"]`,
         {
-          transform: `scale(${1 - 0.05 * i}) translateY(${-8 * i + 40}px)`,
+          transform: `scale(${1 - 0.05 * i}) translateY(calc(${-8 * i}px + ${previewTopOffset}))`,
           opacity: [0, 1, 2].includes(i) ? 1 : 0,
           zIndex: -i,
           pointerEvents: i === 0 ? 'auto' : 'none',
@@ -66,13 +68,13 @@ export const previewContainer = style({
       ])
     ),
     '&[data-distance="> 20"]': {
-      transform: `scale(0) translateY(${-8 * 20 + 40}px)`,
+      transform: `scale(0) translateY(calc(${-8 * 20}px + ${previewTopOffset}))`,
       opacity: 0,
       zIndex: -20,
       pointerEvents: 'none',
     },
     '&[data-distance="< -20"]': {
-      transform: `scale(2) translateY(${-8 * -20 + 40}px)`,
+      transform: `scale(2) translateY(calc(${-8 * -20}px + ${previewTopOffset}))`,
       opacity: 0,
       zIndex: 20,
       pointerEvents: 'none',
@@ -81,7 +83,7 @@ export const previewContainer = style({
 });
 
 export const previewContent = style({
-  height: '50%',
+  height: `calc(50% - ${previewTopOffset} - ${headerHeight})`,
 });
 
 export const previewHeader = style({
@@ -168,7 +170,7 @@ export const historyListScrollableInner = style({
 export const historyListHeader = style({
   display: 'flex',
   alignItems: 'center',
-  height: 52,
+  height: headerHeight,
   borderBottom: `1px solid ${cssVar('borderColor')}`,
   fontWeight: 'bold',
   flexShrink: 0,

packages/frontend/core/src/components/affine/page-properties/styles.css.ts

@@ -53,6 +53,14 @@ export const tableHeaderSecondaryRow = style({
   fontWeight: 500,
   padding: '0 6px',
   gap: '8px',
+  height: 24,
+});
+
+export const tableHeaderCollapseButtonWrapper = style({
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-end',
+  cursor: 'pointer',
 });
 
 export const pageInfoDimmed = style({

packages/frontend/core/src/components/affine/page-properties/table.tsx

@@ -667,18 +667,21 @@ export const PagePropertiesTableHeader = ({
             />
           </PagePropertiesSettingsPopup>
         )}
-        <div className={styles.spacer} />
         <Collapsible.Trigger asChild role="button" onClick={handleCollapse}>
-          <IconButton
+          <div
-            type="plain"
+            className={styles.tableHeaderCollapseButtonWrapper}
             data-testid="page-info-collapse"
-            icon={
+          >
-              <ToggleExpandIcon
+            <IconButton
-                className={styles.collapsedIcon}
+              type="plain"
-                data-collapsed={!open}
+              icon={
-              />
+                <ToggleExpandIcon
-            }
+                  className={styles.collapsedIcon}
-          />
+                  data-collapsed={!open}
+                />
+              }
+            />
+          </div>
         </Collapsible.Trigger>
       </div>
     </div>