Long code blocks should turn into vertically scrollable text areas

[minhduc0711]

trafficstars

Feature Description

In comments or in the README section of a repository, when a code block wrapped inside triple backticks exceeds a certain line limit, it should be put inside a vertically scrollable block so that the code doesn't span the entire page.

Screenshots

A long code block in GitHub:

[silverwind]

I prefer the wrapping we currently do over any horizontal scrolling because horizontal scroll is not very accessible.

I wouldn't say no to introducing a per-user option whether to wrap or scroll, but it has to work across all code views, not just those inline blocks.

[minhduc0711]

Sorry for being unclear, what I actually wanted is vertical scrolling. I've updated the title and the description of the issue.

[silverwind]

Ah, vertical scroll is a different topic, yes. Does GitHub offer something similar?

[minhduc0711]

Yes, it seems like GitHub automatically makes the block scrollable if the number of lines exceeds a threshold.

Short snippet:

// bootstrap module must be the first one to be imported, it handles webpack lazy-loading and global errors
import './bootstrap.ts';
import './htmx.ts';

import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
import {initDashboardRepoList} from './components/DashboardRepoList.vue';

Longer snippet:

// bootstrap module must be the first one to be imported, it handles webpack lazy-loading and global errors
import './bootstrap.ts';
import './htmx.ts';

import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
import {initDashboardRepoList} from './components/DashboardRepoList.vue';

import {initGlobalCopyToClipboardListener} from './features/clipboard.ts';
import {initContextPopups} from './features/contextpopup.ts';
import {initRepoGraphGit} from './features/repo-graph.ts';
import {initHeatmap} from './features/heatmap.ts';
import {initImageDiff} from './features/imagediff.ts';
import {initRepoMigration} from './features/repo-migration.ts';
import {initRepoProject} from './features/repo-projects.ts';
import {initTableSort} from './features/tablesort.ts';
import {initAutoFocusEnd} from './features/autofocus-end.ts';
import {initAdminUserListSearchForm} from './features/admin/users.ts';
import {initAdminConfigs} from './features/admin/config.ts';
import {initMarkupAnchors} from './markup/anchors.ts';
import {initNotificationCount, initNotificationsTable} from './features/notification.ts';
import {initRepoIssueContentHistory} from './features/repo-issue-content.ts';
import {initStopwatch} from './features/stopwatch.ts';
import {initFindFileInRepo} from './features/repo-findfile.ts';
import {initCommentContent, initMarkupContent} from './markup/content.ts';
import {initPdfViewer} from './render/pdf.ts';