Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-19 14:41:24 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(markdown): broken layout in translate page if rendered as long markdown (#10187)

Browse Source 
* 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
This commit is contained in:
Phantom 2025-09-16 02:10:28 +08:00 committed by GitHub
parent d44654f003
commit c641b116ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/src/assets/styles/markdown.css
View File

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

8
src/renderer/src/pages/translate/TranslatePage.tsx
View File

@ -846,7 +846,8 @@ const ContentContainer = styled.div<{ $historyDrawerVisible: boolean }>`
` `
const AreaContainer = styled.div` const AreaContainer = styled.div`
display: flex; display: grid;
grid-template-columns: 1fr 1fr;
flex: 1; flex: 1;
gap: 8px; gap: 8px;
` `
@ -917,6 +918,11 @@ const OutputContainer = styled.div`
border-radius: 10px; border-radius: 10px;
padding: 10px 5px; padding: 10px 5px;
height: calc(100vh - var(--navbar-height) - 70px); height: calc(100vh - var(--navbar-height) - 70px);
overflow: hidden;
& > div > .markdown > pre {
background-color: var(--color-background-mute) !important;
}
&:hover .copy-button { &:hover .copy-button {
opacity: 1; opacity: 1;