From c01b1aeb834e5c79ef1f9a34b36afe5231862383 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Sat, 9 May 2026 22:04:51 +0200
Subject: [PATCH] feat(PBI-49): add BEM sub-element data-debug-id to
 components/dashboard/* + components/markdown.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/dashboard/product-list.tsx | 3 ++-
 components/markdown.tsx               | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/product-list.tsx b/components/dashboard/product-list.tsx
index 8a5cd41..8968144 100644
--- a/components/dashboard/product-list.tsx
+++ b/components/dashboard/product-list.tsx
@@ -78,8 +78,9 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
           className={`group bg-surface-container-low border border-border rounded-xl p-4 transition-colors ${
             showArchived ? 'opacity-60' : 'cursor-pointer hover:border-primary'
           }`}
+          data-debug-id="product-list__items"
         >
-          <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start justify-between gap-4" data-debug-id="product-list__header">
             <div className="min-w-0">
               <div className="flex items-center gap-2">
                 {product.code && <CodeBadge code={product.code} />}
diff --git a/components/markdown.tsx b/components/markdown.tsx
index 2b07fa8..1541d7e 100644
--- a/components/markdown.tsx
+++ b/components/markdown.tsx
@@ -1,6 +1,7 @@
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 interface MarkdownProps {
   children: string
@@ -9,7 +10,7 @@ interface MarkdownProps {
 
 export function Markdown({ children, className }: MarkdownProps) {
   return (
-    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)} {...debugProps('markdown', 'Markdown', 'components/markdown.tsx')}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         disallowedElements={['script', 'iframe']}