From c641b116baed315d6de722dbb11cb31f201c722a Mon Sep 17 00:00:00 2001
From: Phantom <59059173+EurFelux@users.noreply.github.com>
Date: Tue, 16 Sep 2025 02:10:28 +0800
Subject: [PATCH] fix(markdown): broken layout in translate page if rendered as
 long markdown (#10187)

* style(markdown): improve code block styling and layout

- Add text-wrap to pre elements for better readability
- Force background color for code blocks with !important
- Change display to grid in translate page for consistent layout
- Add overflow hidden to output container

* style(markdown): remove redundant !important from code block styling

Move !important declaration to output container's markdown pre selector where it's actually needed
---
 src/renderer/src/assets/styles/markdown.css        | 1 +
 src/renderer/src/pages/translate/TranslatePage.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/assets/styles/markdown.css b/src/renderer/src/assets/styles/markdown.css
index 5a1ca236d..395247c0b 100644
--- a/src/renderer/src/assets/styles/markdown.css
+++ b/src/renderer/src/assets/styles/markdown.css
@@ -121,6 +121,7 @@
   border-radius: 5px;
   word-break: keep-all;
   white-space: pre;
+  text-wrap: wrap;
 }
 
 .markdown code {
diff --git a/src/renderer/src/pages/translate/TranslatePage.tsx b/src/renderer/src/pages/translate/TranslatePage.tsx
index 91171fd44..e883955eb 100644
--- a/src/renderer/src/pages/translate/TranslatePage.tsx
+++ b/src/renderer/src/pages/translate/TranslatePage.tsx
@@ -846,7 +846,8 @@ const ContentContainer = styled.div<{ $historyDrawerVisible: boolean }>`
 `
 
 const AreaContainer = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   flex: 1;
   gap: 8px;
 `
@@ -917,6 +918,11 @@ const OutputContainer = styled.div`
   border-radius: 10px;
   padding: 10px 5px;
   height: calc(100vh - var(--navbar-height) - 70px);
+  overflow: hidden;
+
+  & > div > .markdown > pre {
+    background-color: var(--color-background-mute) !important;
+  }
 
   &:hover .copy-button {
     opacity: 1;