fix: simple table buttons

Author: appflowy

src/components/editor/components/blocks/simple-table/SimpleTableActionButtons.tsx

@@ -54,10 +54,14 @@ export function SimpleTableActionButtons() {
       const scrollRect = scrollContainer.getBoundingClientRect();
       const tableRect = table.getBoundingClientRect();
 
+      // Use the smaller of scroll container width and actual table width
+      // so buttons stick to the table edge when the table is narrow
+      const effectiveWidth = Math.min(scrollRect.width, tableRect.width);
+
       setLayout({
         scrollLeft: scrollRect.left - rootRect.left,
         scrollTop: scrollRect.top - rootRect.top,
-        scrollWidth: scrollRect.width,
+        scrollWidth: effectiveWidth,
         scrollHeight: scrollRect.height,
         tableHeight: tableRect.height,
       });

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

@@ -154,7 +154,7 @@
     @apply absolute flex items-center justify-center cursor-pointer pointer-events-auto;
     height: 16px;
     border-radius: 4px;
-    background-color: #2D3036;
+    background-color: var(--fill-list-active);
     opacity: 0;
     transition: opacity 0.15s ease;
 
@@ -167,7 +167,7 @@
     @apply absolute flex items-center justify-center cursor-pointer pointer-events-auto;
     width: 16px;
     border-radius: 4px;
-    background-color: #2D3036;
+    background-color: var(--fill-list-active);
     opacity: 0;
     transition: opacity 0.15s ease;
 
@@ -181,7 +181,7 @@
     width: 18px;
     height: 18px;
     border-radius: 4px;
-    background-color: #2D3036;
+    background-color: var(--fill-list-active);
     opacity: 0;
     transition: opacity 0.15s ease;