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(message): adjust layout and overflow properties for better display (#10746)

Browse Source 
* style(CodeBlockView): reduce min-width from 45ch to 35ch to fix layout issues

* style(messages): adjust overflow properties and clean up commented code

Remove commented overflow properties and adjust overflow behavior for better scroll handling in message containers

* style: remove commented overflow css properties
This commit is contained in:
Phantom 2025-10-17 20:24:13 +08:00 committed by GitHub
parent 4eb3aa31ee
commit 33ce41704d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/components/CodeBlockView/view.tsx
View File

@ -326,7 +326,7 @@ const CodeBlockWrapper = styled.div<{ $isInSpecialView: boolean }>`
* 一是 CodeViewer 在气泡样式下的用户消息中无法撑开气泡，
* 二是 代码块内容过少时 toolbar 会和 title 重叠。
*/
min-width: 45ch;
min-width: 35ch;
.code-toolbar {
background-color: ${(props) => (props.$isInSpecialView ? 'transparent' : 'var(--color-background-mute)')};

21
src/renderer/src/pages/home/Messages/MessageGroup.tsx
View File

@ -337,29 +337,18 @@ const GroupContainer = styled.div`
const GridContainer = styled(Scrollbar)<{ $count: number; $gridColumns: number }>`
width: 100%;
display: grid;
overflow-y: visible;
gap: 16px;
&.horizontal {
padding-bottom: 4px;
grid-template-columns: repeat(${({ $count }) => $count}, minmax(420px, 1fr));
overflow-y: hidden;
overflow-x: auto;
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-thumb);
border-radius: var(--scrollbar-thumb-radius);
}
&::-webkit-scrollbar-thumb:hover {
background: var(--color-scrollbar-thumb-hover);
}
}
&.fold,
&.vertical {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 8px;
overflow: hidden;
}
&.grid {
grid-template-columns: repeat(
@ -367,15 +356,11 @@ const GridContainer = styled(Scrollbar)<{ $count: number; $gridColumns: number }
minmax(0, 1fr)
);
grid-template-rows: auto;
overflow-y: auto;
overflow-x: hidden;
}
&.multi-select-mode {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 10px;
overflow-y: auto;
overflow-x: hidden;
.grid {
height: auto;
}
@ -401,7 +386,7 @@ interface MessageWrapperProps {
const MessageWrapper = styled.div<MessageWrapperProps>`
&.horizontal {
padding: 1px;
/* overflow-y: auto; */
overflow-y: auto;
.message {
height: 100%;
border: 0.5px solid var(--color-border);
@ -423,7 +408,7 @@ const MessageWrapper = styled.div<MessageWrapperProps>`
&.grid {
display: block;
height: 300px;
overflow: hidden;
overflow-y: hidden;
border: 0.5px solid var(--color-border);
border-radius: 10px;
cursor: pointer;