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

@@ -121,6 +121,7 @@
   border-radius: 5px;
   word-break: keep-all;
   white-space: pre;
+  text-wrap: wrap;
 }
 
 .markdown code {

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;