fix: use md: breakpoint for 2-column grid layouts in DetailSection

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/plugin-detail/src/DetailSection.tsx

@@ -200,9 +200,9 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
       className={cn(
         "grid gap-3 sm:gap-4",
         effectiveColumns === 1 ? "grid-cols-1" :
-        effectiveColumns === 2 ? "grid-cols-1 sm:grid-cols-2" :
-        effectiveColumns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" :
-        "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+        effectiveColumns === 2 ? "grid-cols-1 md:grid-cols-2" :
+        effectiveColumns === 3 ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" :
+        "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       )}
     >
       {layoutFields.map(renderField)}

packages/plugin-detail/src/__tests__/DetailSection.test.tsx

@@ -112,7 +112,7 @@ describe('DetailSection', () => {
     const { container } = render(
       <DetailSection section={section} data={{}} />
     );
-    // The grid container should have the sm:grid-cols-2 class
+    // The grid container should have the md:grid-cols-2 class
     const grid = container.querySelector('.grid');
     expect(grid).toBeTruthy();
     expect(grid!.className).toContain('md:grid-cols-2');