checkpoint

Author: abrehamgezahegn

typescript/src/renderer/components/blocks/TableBlockRenderer.tsx

@@ -26,71 +26,45 @@ export const TableBlockRenderer: React.FC<TableBlockRendererProps> = ({
       className={`notion-selectable notion-table-block${className ? ` ${className}` : ""}`}
       data-block-id={block.id}
     >
-      <div>
-        <div>
-          <div className="notion-scroller horizontal">
-            <div className="notion-table-content">
-              <table>
-                <tbody>
-                  {block.children?.map((child: any, index: number) => {
-                    if (child?.type === "table_row") {
-                      const rowData = child.table_row;
-                      const isHeader =
-                        index === 0 && tableData?.has_column_header;
+      <div className="notion-scroller horizontal">
+        <div className="notion-table-content">
+          <table>
+            <tbody>
+              {block.children?.map((child: any, index: number) => {
+                if (child?.type === "table_row") {
+                  const rowData = child.table_row;
+                  const isHeader = index === 0 && tableData?.has_column_header;
 
-                      return (
-                        <tr
-                          key={child.id || index}
-                          className="notion-table-row"
-                          data-block-id={child.id}
-                        >
-                          {rowData?.cells?.map(
-                            (cell: any, cellIndex: number) => {
-                              const CellTag = isHeader ? "th" : "td";
-                              return (
-                                <CellTag
-                                  key={cellIndex}
-                                  scope={isHeader ? "col" : undefined}
-                                >
-                                  <div className="notion-table-cell">
-                                    <div className="notion-table-cell-text notranslate">
-                                      <RichTextRenderer richText={cell || []} />
-                                    </div>
-                                  </div>
-                                </CellTag>
-                              );
-                            }
-                          )}
-                        </tr>
-                      );
-                    }
-                    return null;
-                  })}
-                </tbody>
-              </table>
-            </div>
-          </div>
+                  return (
+                    <tr
+                      key={child.id || index}
+                      className="notion-table-row"
+                      data-block-id={child.id}
+                    >
+                      {rowData?.cells?.map((cell: any, cellIndex: number) => {
+                        const CellTag = isHeader ? "th" : "td";
+                        return (
+                          <CellTag
+                            key={cellIndex}
+                            scope={isHeader ? "col" : undefined}
+                          >
+                            <div className="notion-table-cell">
+                              <div className="notion-table-cell-text notranslate">
+                                <RichTextRenderer richText={cell || []} />
+                              </div>
+                            </div>
+                          </CellTag>
+                        );
+                      })}
+                    </tr>
+                  );
+                }
+                return null;
+              })}
+            </tbody>
+          </table>
         </div>
       </div>
-
-      {/* Render other children blocks recursively (non-table-row blocks) */}
-      {block.children && block.children.length > 0 && (
-        <div
-          className="notion-block-children"
-          style={{ marginLeft: `${depth * 24}px` }}
-        >
-          {block.children
-            .filter((child: any) => child?.type !== "table_row")
-            .map((child: any, index: number) => (
-              <BlockRenderer
-                key={child.id || index}
-                block={child}
-                depth={depth + 1}
-                components={components}
-              />
-            ))}
-        </div>
-      )}
     </div>
   );
 };

typescript/src/renderer/styles/table.css

@@ -7,7 +7,6 @@
 
 .notion-scroller.horizontal {
   overflow-x: auto;
-  overflow-y: hidden;
   width: 100%;
 }
 
@@ -21,16 +20,19 @@
   border-collapse: collapse;
   border-spacing: 0;
   table-layout: auto;
-  min-width: 600px;
+  min-width: max-content;
 }
 
 .notion-table-row th,
 .notion-table-row td {
   border: 1px solid var(--jsondoc-border-medium);
   padding: 8px 12px;
   vertical-align: top;
-  white-space: nowrap;
-  min-width: 120px;
+  white-space: normal;
+  min-width: 80px;
+  max-width: 200px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .notion-table-row th {
@@ -39,7 +41,7 @@
 }
 
 .notion-table-cell-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 300px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
 }