Skip to content

Add styling for code blocks in notifications - #817

Merged
jmattheis merged 1 commit into
gotify:masterfrom
BerserkeR-Git:BerserkeR-Git-styling-codeblocks
Aug 8, 2025
Merged

Add styling for code blocks in notifications#817
jmattheis merged 1 commit into
gotify:masterfrom
BerserkeR-Git:BerserkeR-Git-styling-codeblocks

Conversation

@BerserkeR-Git

Copy link
Copy Markdown
Contributor

styling for code blocks

@BerserkeR-Git
BerserkeR-Git requested a review from a team as a code owner August 4, 2025 09:12
@BerserkeR-Git BerserkeR-Git changed the title Update Message.tsx Add styling for code blocks in notifications Aug 4, 2025
Comment thread ui/src/message/Message.tsx Outdated
'& img': {
maxWidth: '100%',
},
'& code': {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think this should be enough.

            '& code': {
                display: 'inline-flex',
                backgroundColor: 'rgba(0, 0, 0, 0.25)',
                padding: theme.spacing(1),
                borderRadius: '0.25em',
            },

The color breaks when switching to light-theme. The padding should use the standard spacing. fontsize should be set by the parent. wordBreak/whiteSpace shouldn't be set as the code thingy should have a horizontal scrollbar. Boxshadow seems to much.

I'll change this myself, after #818 is done.

@BerserkeR-Git BerserkeR-Git Aug 4, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Thanks, I'm not that experienced with coding but I thought I'd make this suggestion.
Have a good day.

Edit: The only thing I would like to say is check if there is enough padding so the text doesn't almost jump out of the box, and also not too much where it pushes other notifications down a lot.

And also, a little faint shadow edge at the top and bottom can't hurt, so the code block looks properly embedded something like this

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The GitHub code styling doesn't have box shadow too. I'd rather not have it.

@codecov

codecov Bot commented Aug 8, 2025

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (master@ba3bd1b). Learn more about missing BASE report.
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff            @@
##             master     #817   +/-   ##
=========================================
  Coverage          ?   79.54%           
=========================================
  Files             ?       56           
  Lines             ?     2645           
  Branches          ?        0           
=========================================
  Hits              ?     2104           
  Misses            ?      450           
  Partials          ?       91           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jmattheis
jmattheis merged commit deb383a into gotify:master Aug 8, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants