fix(DetailSection): use responsive breakpoints for grid columns instead of hardcoding

Use sm:grid-cols-2 (640px) instead of md:grid-cols-2 (768px) so larger
phones get 2 columns, while narrow screens still fall back to 1 column.
Progressive: 1 col → sm:2 cols → lg:3 cols.

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

Author: Copilot

packages/plugin-detail/src/DetailSection.tsx

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