fix(mobile): adjust mobile ui (#8112)

close AF-1274, AF-1320, AF-1333

packages/frontend/core/src/pages/workspace/detail-page/tabs/journal.css.ts

@@ -35,6 +35,11 @@ const interactive = style({
 });
 export const calendar = style({
   padding: '16px',
+  selectors: {
+    '&[data-mobile=true]': {
+      padding: '8px 16px',
+    },
+  },
 });
 export const journalPanel = style({
   width: '100%',
@@ -212,6 +217,13 @@ export const journalDateCell = style([
         fontWeight: 500,
         border: `1px solid ${cssVar('primaryColor')}`,
       },
+
+      '&[data-mobile=true]': {
+        width: 34,
+        height: 34,
+        fontSize: 15,
+        fontWeight: 400,
+      },
     },
   },
 ]);
@@ -225,3 +237,7 @@ export const journalDateCellDot = style({
   left: '50%',
   transform: 'translateX(-50%)',
 });
+
+export const journalDateCellWrapper = style({
+  height: 34,
+});

packages/frontend/core/src/pages/workspace/detail-page/tabs/journal.tsx

@@ -90,6 +90,7 @@ interface JournalBlockProps {
   date: dayjs.Dayjs;
 }
 
+const mobile = environment.isMobile;
 export const EditorJournalPanel = () => {
   const t = useI18n();
   const doc = useService(DocService).doc;
@@ -129,6 +130,7 @@ export const EditorJournalPanel = () => {
           data-selected={cell.selected}
           data-is-journal={isJournal}
           data-has-journal={hasJournal}
+          data-mobile={mobile}
         >
           {cell.label}
           {hasJournal && !cell.selected ? (
@@ -142,7 +144,7 @@ export const EditorJournalPanel = () => {
 
   return (
     <div className={styles.journalPanel} data-is-journal={isJournal}>
-      <div className={styles.calendar}>
+      <div data-mobile={mobile} className={styles.calendar}>
         <DatePicker
           weekDays={t['com.affine.calendar-date-picker.week-days']()}
           monthNames={t['com.affine.calendar-date-picker.month-names']()}
@@ -150,6 +152,8 @@ export const EditorJournalPanel = () => {
           customDayRenderer={customDayRenderer}
           value={date}
           onChange={onDateSelect}
+          monthHeaderCellClassName={styles.journalDateCellWrapper}
+          monthBodyCellClassName={styles.journalDateCellWrapper}
         />
       </div>
       <JournalConflictBlock date={dayjs(date)} />