Skip to content

fix: clickable rows & mobile scrollbar overflow & dynamic line width #1080

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

Merged
danielroe merged 7 commits into from
Feb 7, 2026
Merged

fix: clickable rows & mobile scrollbar overflow & dynamic line width #1080

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9435ba8
fix: clickable rows & mobile scroll overflow & dynamic line width
RYGRIT Feb 6, 2026
8ef515d
Merge branch 'main' into fix/issue-1073-viewer-layout
RYGRIT Feb 7, 2026
a19ca2d
Merge branch 'main' into fix/issue-1073-viewer-layout
RYGRIT Feb 7, 2026
a895176
fix: mobile viewer scrolling & line number layer z-index were too high
RYGRIT Feb 7, 2026
ad15e27
chore: remove accidental .vscode/tasks.json
RYGRIT Feb 7, 2026
d95b297
chore: use rtl class
danielroe Feb 7, 2026
b98c28b
refactor: use css variable for line width calc
RYGRIT Feb 7, 2026
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
22 changes: 11 additions & 11 deletions app/components/Code/DirectoryListing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,15 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
v-if="parentPath !== null"
class="border-b border-border hover:bg-bg-subtle transition-colors"
>
<td class="py-2 px-4">
<td colspan="2">
<NuxtLink
:to="getCodeRoute(parentPath || undefined)"
class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
class="flex items-center gap-2 py-2 px-4 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
>
<span class="i-carbon:folder w-4 h-4 text-yellow-600" />
<span>..</span>
</NuxtLink>
</td>
<td />
</tr>

<!-- Directory/file rows -->
Expand All @@ -92,25 +91,26 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
:key="node.path"
class="border-b border-border hover:bg-bg-subtle transition-colors"
>
<td class="py-2 px-4">
<td colspan="2">
<NuxtLink
:to="getCodeRoute(node.path)"
class="flex items-center gap-2 font-mono text-sm hover:text-fg transition-colors"
class="flex items-center gap-2 py-2 px-4 font-mono text-sm hover:text-fg transition-colors"
:class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
>
<span
v-if="node.type === 'directory'"
class="i-carbon:folder w-4 h-4 text-yellow-600"
/>
<span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
<span>{{ node.name }}</span>
<span class="flex-1">{{ node.name }}</span>
<span
v-if="node.type === 'file' && node.size"
class="text-end font-mono text-xs text-fg-subtle"
>
{{ formatBytes(node.size) }}
</span>
</NuxtLink>
</td>
<td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
<span v-if="node.type === 'file' && node.size">
{{ formatBytes(node.size) }}
</span>
</td>
</tr>
</tbody>
</table>
Expand Down
16 changes: 10 additions & 6 deletions app/components/Code/Viewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@ const lineNumbers = computed(() => {
return Array.from({ length: props.lines }, (_, i) => i + 1)
})

// Dynamically compute line number column width based on digit count
const lineNumberWidth = computed(() => {
Copy link
Copy Markdown
Member

@danielroe danielroe Feb 7, 2026

Choose a reason for hiding this comment

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

I think this could be more performant if we set a css variable on the entire column, and reference it in each line....

Copy link
Copy Markdown
Contributor Author

@RYGRIT RYGRIT Feb 7, 2026

Choose a reason for hiding this comment

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

Ah, I see your point. Moving the calc() logic to CSS keeps the styling concerns (like the 1.5rem padding offset) out of the JavaScript, which improves maintainability.

I'll update it to pass the digit count as a CSS variable (e.g. --line-digits) to the container, and let CSS handle the width calculation. Thanks!

const digits = String(props.lines).length
// ch unit matches monospace digit width + 1.5rem for px-3 padding
return `calc(${digits}ch + 1.5rem)`
})

// Check if a line is selected
function isLineSelected(lineNum: number): boolean {
if (!props.selectedLines) return false
Expand Down Expand Up @@ -55,10 +62,11 @@ watch(
</script>

<template>
<div class="code-viewer flex min-h-full">
<div class="code-viewer flex min-h-full max-w-full">
<!-- Line numbers column -->
<div
class="line-numbers shrink-0 bg-bg-subtle border-ie border-border text-end select-none"
class="line-numbers shrink-0 bg-bg-subtle border-ie border-solid border-border text-end select-none relative"
:style="{ minWidth: lineNumberWidth }"
aria-hidden="true"
>
<a
Expand Down Expand Up @@ -93,10 +101,6 @@ watch(
font-size: 14px;
}

.line-numbers {
min-width: 3.5rem;
}

.code-content :deep(pre) {
margin: 0;
padding: 0;
Expand Down
2 changes: 1 addition & 1 deletion app/pages/package-code/[...path].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,7 @@ defineOgImageComponent('Default', {

<!-- File content / Directory listing - sticky with internal scroll on desktop -->
<div
class="flex-1 min-w-0 md:sticky md:top-28 md:self-start md:h-[calc(100vh-7rem)] md:overflow-y-auto"
class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
>
<!-- File viewer -->
<template v-if="isViewingFile && fileContent">
Expand Down
Loading