Skip to content

fix(ui): make messages layout responsive #960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Victor-root wants to merge 1 commit into
base: master
Choose a base branch
from
+10 −1
Open

fix(ui): make messages layout responsive #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/src/common/DefaultPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React, {FC} from 'react';
interface IProps {
title: string;
rightControl?: React.ReactNode;
maxWidth?: number;
maxWidth?: number | string;
}

const DefaultPage: FC<React.PropsWithChildren<IProps>> = ({
Expand Down
8 changes: 8 additions & 0 deletions ui/src/message/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
},
'& pre': {
overflow: 'auto',
maxWidth: '100%',
borderRadius: '0.25em',
backgroundColor:
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
Expand All @@ -88,6 +89,13 @@ const useStyles = makeStyles()((theme: Theme) => ({
'& img': {
maxWidth: '100%',
},
[theme.breakpoints.down('sm')]: {
'& pre': {
whiteSpace: 'pre-wrap',
Copy link
Copy Markdown
Member

@jmattheis jmattheis May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pre must continue to have no word wrap. It's basically the feature of code formatting to keep it as it. I'd say almost every markdown renderer doesn't do this. E.g.

REALLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLY LOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG LINNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNE

overflowWrap: 'anywhere',
wordBreak: 'break-word',
},
},
},
}));

Expand Down
1 change: 1 addition & 0 deletions ui/src/message/Messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const Messages = observer(() => {
return (
<DefaultPage
title={name}
maxWidth={1600}
Copy link
Copy Markdown
Member

@jmattheis jmattheis May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this works for wide messages, shorter, text only messages now look bad and aren't that readable anymore.

The width of the message should depend on the content. If there is a wide <code> block inside, the message can be wider, but smaller text only messages should continue having the small width.

Also mentioned here: #744 (comment)

rightControl={
<div>
{app && (
Expand Down