Long code blocks should turn into vertically scrollable text areas #13409

New Issue

GiteaMirror · 2025-11-02T10:41:28-06:00

GiteaMirror commented

2025-11-02 10:41:28 -06:00

Originally created by @minhduc0711 on GitHub (Aug 20, 2024).

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:

Originally created by @minhduc0711 on GitHub (Aug 20, 2024). ### 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: ![image](https://github.com/user-attachments/assets/b9ec9007-6092-44f0-94f4-783fc5687004)

GiteaMirror added the type/proposal topic/ui labels 2025-11-02 10:41:28 -06:00

GiteaMirror commented

2025-11-02 10:41:29 -06:00

@silverwind commented on GitHub (Aug 20, 2024):

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.

@silverwind commented on GitHub (Aug 20, 2024): 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.

GiteaMirror commented

2025-11-02 10:41:29 -06:00

@minhduc0711 commented on GitHub (Aug 21, 2024):

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

@minhduc0711 commented on GitHub (Aug 21, 2024): Sorry for being unclear, what I actually wanted is vertical scrolling. I've updated the title and the description of the issue.

GiteaMirror commented

2025-11-02 10:41:29 -06:00

@silverwind commented on GitHub (Aug 21, 2024):

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

@silverwind commented on GitHub (Aug 21, 2024): Ah, vertical scroll is a different topic, yes. Does GitHub offer something similar?

GiteaMirror commented

2025-11-02 10:41:29 -06:00

@minhduc0711 commented on GitHub (Aug 21, 2024):

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';

@minhduc0711 commented on GitHub (Aug 21, 2024): 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'; ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#13409