diff --git a/src/public/app/widgets/attachment_detail.js b/src/public/app/widgets/attachment_detail.js index 63dc1ff7e..c0d27dd9e 100644 --- a/src/public/app/widgets/attachment_detail.js +++ b/src/public/app/widgets/attachment_detail.js @@ -14,38 +14,37 @@ const TPL = ` .attachment-detail-widget { height: 100%; } - + .attachment-detail-wrapper { margin-bottom: 20px; display: flex; flex-direction: column; } - + .attachment-title-line { display: flex; align-items: baseline; gap: 1em; } - + .attachment-details { margin-left: 10px; } - + .attachment-content-wrapper { flex-grow: 1; } - + .attachment-content-wrapper .rendered-content { height: 100%; } - + .attachment-content-wrapper pre { - background: var(--accented-background-color); padding: 10px; margin-top: 10px; margin-bottom: 10px; } - + .attachment-detail-wrapper.list-view .attachment-content-wrapper { max-height: 300px; } @@ -57,26 +56,26 @@ const TPL = ` .attachment-detail-wrapper.full-detail .attachment-content-wrapper { height: 100%; } - + .attachment-detail-wrapper.list-view .attachment-content-wrapper pre { max-height: 400px; } - + .attachment-content-wrapper img { margin: 10px; } - + .attachment-detail-wrapper.list-view .attachment-content-wrapper img, .attachment-detail-wrapper.list-view .attachment-content-wrapper video { - max-height: 300px; - max-width: 90%; + max-height: 300px; + max-width: 90%; object-fit: contain; } - + .attachment-detail-wrapper.full-detail .attachment-content-wrapper img { - max-width: 90%; + max-width: 90%; object-fit: contain; } - + .attachment-detail-wrapper.scheduled-for-deletion .attachment-content-wrapper img { filter: contrast(10%); } @@ -85,13 +84,13 @@ const TPL = `
`; diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css index 18db9b537..0bad52b48 100644 --- a/src/public/stylesheets/theme-next/notes/text.css +++ b/src/public/stylesheets/theme-next/notes/text.css @@ -6,12 +6,16 @@ * Code Blocks */ + .attachment-content-wrapper pre, .ck-content pre { border: 0; border-radius: 6px; box-shadow: var(--code-block-box-shadow); padding: 0 !important; - margin-top: 2px !important; + margin-top: 2px !important; +} + +.ck-content pre { overflow: unset; } @@ -28,6 +32,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child { font-weight: bold; } +.attachment-content-wrapper pre code, .ck-content pre code { display: block; padding: 1em;