🐛 fix(markdown): remove background from table body (#503)

* 🐛 fix(sortable-list): fix DragOverlay position issues and add renderOverlay prop (#420)

Apply changes from PR #420 resolved against current master:
- Add closestCenter collision detection and MeasuringStrategy.Always to fix overlay positioning
- Add renderOverlay prop for custom drag overlay rendering
- Add demo controls for custom overlay

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* 🐛 fix(markdown): remove background from table body

Drop the table-level background so tbody renders transparent.
Thead keeps its own explicit background rule and is unaffected.

Also replace deprecated `word-break: break-word` with
`overflow-wrap: break-word` to satisfy stylelint.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: arvinxx

src/Markdown/markdown.style.ts

@@ -19,7 +19,7 @@ export const styles = createStaticStyles(({ cssVar, css }) => {
 
     font-size: var(--lobe-markdown-font-size);
     line-height: var(--lobe-markdown-line-height);
-    word-break: break-word;
+    overflow-wrap: break-word;
   `;
   const a = css`
     a {
@@ -57,7 +57,7 @@ export const styles = createStaticStyles(({ cssVar, css }) => {
         font-family: ${cssVar.fontFamilyCode};
         font-size: 0.875em;
         line-height: 1;
-        word-break: break-word;
+        overflow-wrap: break-word;
         white-space: break-spaces;
 
         background: ${cssVar.colorFillSecondary};
@@ -301,11 +301,10 @@ export const styles = createStaticStyles(({ cssVar, css }) => {
       word-break: auto-phrase;
       overflow-wrap: break-word;
 
-      background: ${cssVar.colorFillQuaternary};
       box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};
 
       code {
-        word-break: break-word;
+        overflow-wrap: break-word;
       }
 
       thead {

src/SortableList/SortableList.tsx

@@ -2,8 +2,10 @@
 
 import {
   type Active,
+  closestCenter,
   DndContext,
   KeyboardSensor,
+  MeasuringStrategy,
   PointerSensor,
   useSensor,
   useSensors,
@@ -25,8 +27,14 @@ import SortableOverlay from './components/SortableOverlay';
 import { styles } from './style';
 import { type SortableListItem, type SortableListProps } from './type';
 
+const measuringConfig = {
+  droppable: {
+    strategy: MeasuringStrategy.Always,
+  },
+};
+
 const SortableListParent = memo<SortableListProps>(
-  ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {
+  ({ ref, items, onChange, renderItem, renderOverlay, gap = 8, ...rest }) => {
     const [active, setActive] = useState<Active | null>(null);
     const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
     const sensors = useSensors(
@@ -36,8 +44,12 @@ const SortableListParent = memo<SortableListProps>(
       }),
     );
 
+    const overlayRenderer = renderOverlay ?? renderItem;
+
     return (
       <DndContext
+        collisionDetection={closestCenter}
+        measuring={measuringConfig}
         modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}
         sensors={sensors}
         onDragCancel={() => {
@@ -63,7 +75,7 @@ const SortableListParent = memo<SortableListProps>(
             ))}
           </Flexbox>
         </SortableContext>
-        <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>
+        <SortableOverlay>{activeItem ? overlayRenderer(activeItem) : null}</SortableOverlay>
       </DndContext>
     );
   },

src/SortableList/demos/index.tsx

@@ -24,14 +24,15 @@ export default () => {
   const [items, setItems] = useState(data);
 
   const store = useCreateStore();
-  const { gap, ...control }: any = useControls(
+  const { gap, useCustomOverlay, ...control }: any = useControls(
     {
       gap: {
         max: 20,
         min: 0,
         step: 1,
         value: 4,
       },
+      useCustomOverlay: false,
       variant: {
         options: ['borderless', 'filled', 'outlined'],
         value: 'borderless',
@@ -51,6 +52,24 @@ export default () => {
             {item.name}
           </SortableList.Item>
         )}
+        renderOverlay={
+          useCustomOverlay
+            ? (item) => (
+                <div
+                  style={{
+                    background: 'rgba(0, 100, 255, 0.1)',
+                    border: '2px dashed #0064ff',
+                    borderRadius: 8,
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    padding: '8px 12px',
+                    transform: 'rotate(2deg)',
+                  }}
+                >
+                  📦 {item.name}
+                </div>
+              )
+            : undefined
+        }
         onChange={setItems}
       />
     </StoryBook>

src/SortableList/type.ts

@@ -14,4 +14,9 @@ export interface SortableListProps<T extends SortableListItem = SortableListItem
   onChange: (items: T[]) => void;
   ref?: Ref<HTMLUListElement>;
   renderItem: (item: T) => ReactNode;
+  /**
+   * Custom render function for the drag overlay
+   * If not provided, renderItem will be used
+   */
+  renderOverlay?: (item: T) => ReactNode;
 }