fix: simple table width (#6918)

* fix: adjust min width

* fix: adjust simple table font size

* fix: do not need to run rust-ci and docker-ci when web codes have been changed

.github/workflows/docker_ci.yml

@@ -2,9 +2,9 @@ name: Docker-CI
 
 on:
   push:
-    branches: ["main", "release/*"]
+    branches: [ "main", "release/*" ]
   pull_request:
-    branches: ["main", "release/*"]
+    branches: [ "main", "release/*" ]
   workflow_dispatch:
 
 concurrency:

.github/workflows/tauri2_ci.yaml

@@ -5,6 +5,7 @@ on:
     paths:
       - ".github/workflows/tauri2_ci.yaml"
       - "frontend/rust-lib/**"
+    paths-ignore:
       - "frontend/appflowy_web_app/**"
       - "frontend/resources/**"
 

frontend/appflowy_web_app/src/components/editor/components/blocks/simple-table/SimpleTableCell.tsx

@@ -1,4 +1,4 @@
-import { BlockType, TableAlignType } from '@/application/types';
+import { BlockType } from '@/application/types';
 import { EditorElementProps, SimpleTableCellBlockNode, SimpleTableNode } from '@/components/editor/editor.type';
 import { renderColor } from '@/utils/color';
 import React, { forwardRef, useMemo } from 'react';
@@ -51,8 +51,8 @@ const SimpleTableCell =
 
       const { horizontalAlign, bgColor } = useMemo(() => {
         if (!table || !row) return {
-          bgColor: '',
-          horizontalAlign: TableAlignType.Left,
+          bgColor: undefined,
+          horizontalAlign: undefined,
         };
 
         const [parentElement] = table;

frontend/appflowy_web_app/src/components/editor/components/blocks/simple-table/SimpleTableRow.tsx

@@ -1,4 +1,4 @@
-import { BlockType, TableAlignType } from '@/application/types';
+import { BlockType } from '@/application/types';
 import { EditorElementProps, SimpleTableNode, SimpleTableRowNode } from '@/components/editor/editor.type';
 import { renderColor } from '@/utils/color';
 import React, { forwardRef, useMemo } from 'react';
@@ -38,8 +38,8 @@ const SimpleTableRow =
 
       const { align, bgColor } = useMemo(() => {
         if (!parent) return {
-          align: TableAlignType.Left,
-          bgColor: '',
+          align: undefined,
+          bgColor: undefined,
         };
 
         const [parentElement] = parent;

frontend/appflowy_web_app/src/components/editor/components/blocks/simple-table/simple-table.scss

@@ -1,4 +1,6 @@
 .simple-table {
+  font-size: 14px;
+
   &.enable-header-column {
     tr [data-block-type="simple_table_cell"]:first-child {
       @apply font-semibold;
@@ -32,6 +34,15 @@
     }
   }
 
+  tr[data-table-row-horizontal-align="left"] {
+    .block-element {
+      > div > .text-element {
+        text-align: left;
+        justify-content: flex-start;
+      }
+    }
+  }
+
   tr[data-table-row-horizontal-align="center"] {
     .block-element {
       > div > .text-element {
@@ -50,6 +61,15 @@
     }
   }
 
+  td[data-table-cell-horizontal-align="left"] {
+    .block-element {
+      > div > .text-element {
+        text-align: left;
+        justify-content: flex-start;
+      }
+    }
+  }
+
 
   td[data-table-cell-horizontal-align="center"] {
     .block-element {
@@ -69,11 +89,12 @@
     }
   }
 
+
   td .cell-children {
-    @apply min-w-[120px] leading-[1.8em];
+    @apply leading-[1.7em];
   }
 
   td {
-    @apply p-2;
+    @apply px-2 py-0.5;
   }
 }