update ui update and fix layout issue

src/features/loyaly-ai/components/response/SummaryCard.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import {Markdown} from '@astryxdesign/core/Markdown';
+import {Heading} from '@astryxdesign/core/Text';
+
+export function SummaryCard({
+  title,
+  summary,
+  isStreaming,
+}: {
+  title?: string;
+  summary: string;
+  isStreaming?: boolean;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-4 sm:p-5 shadow-sm space-y-3">
+      {title ? (
+        <Heading level={3} className="text-base font-semibold text-primary">
+          {title}
+        </Heading>
+      ) : null}
+      <div className="text-sm text-primary leading-relaxed">
+        <Markdown density="compact" isStreaming={isStreaming} headingLevelStart={4}>
+          {summary}
+        </Markdown>
+      </div>
+    </div>
+  );
+}