From 46797a07573b60783e5f4081591d9a60f705b6b8 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Fri, 12 Dec 2025 20:40:04 +0800
Subject: [PATCH] fix(theme): fix render overflow of code block within Card on
 mobile, close #782 (#787)

---
 theme/src/client/components/global/VPCard.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/theme/src/client/components/global/VPCard.vue b/theme/src/client/components/global/VPCard.vue
index 8cf5c2d1..1aa2c8c8 100644
--- a/theme/src/client/components/global/VPCard.vue
+++ b/theme/src/client/components/global/VPCard.vue
@@ -78,4 +78,16 @@ const iconName = computed<string | { svg: string }>(() => {
 .vp-card-wrapper .body > :last-child {
   margin-bottom: 0;
 }
+
+@media (max-width: 419px) {
+  .vp-card-wrapper .body :where(div[class*="language-"], .vp-block) {
+    margin: 16px -20px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .vp-card-wrapper .body :deep(.code-block-title-bar) {
+    margin-inline: -20px;
+  }
+}
 </style>