forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: clickable rows & mobile scrollbar overflow & dynamic line width (#1080)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
rygrit
Daniel Roe
and committed by
GitHub
4640f271
fb225fe2
+22
-15
+11
-11
app/components/Code/DirectoryListing.vue
+11
-11
app/components/Code/DirectoryListing.vue
···
74
74
v-if="parentPath !== null"
75
75
class="border-b border-border hover:bg-bg-subtle transition-colors"
76
76
>
77
-
<td class="py-2 px-4">
77
+
<td colspan="2">
78
78
<NuxtLink
79
79
:to="getCodeRoute(parentPath || undefined)"
80
-
class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
80
+
class="flex items-center gap-2 py-2 px-4 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
81
81
>
82
82
<span class="i-carbon:folder w-4 h-4 text-yellow-600" />
83
83
<span>..</span>
84
84
</NuxtLink>
85
85
</td>
86
-
<td />
87
86
</tr>
88
87
89
88
<!-- Directory/file rows -->
···
92
91
:key="node.path"
93
92
class="border-b border-border hover:bg-bg-subtle transition-colors"
94
93
>
95
-
<td class="py-2 px-4">
94
+
<td colspan="2">
96
95
<NuxtLink
97
96
:to="getCodeRoute(node.path)"
98
-
class="flex items-center gap-2 font-mono text-sm hover:text-fg transition-colors"
97
+
class="flex items-center gap-2 py-2 px-4 font-mono text-sm hover:text-fg transition-colors"
99
98
:class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
100
99
>
101
100
<span
···
103
102
class="i-carbon:folder w-4 h-4 text-yellow-600"
104
103
/>
105
104
<span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
106
-
<span>{{ node.name }}</span>
105
+
<span class="flex-1">{{ node.name }}</span>
106
+
<span
107
+
v-if="node.type === 'file' && node.size"
108
+
class="text-end font-mono text-xs text-fg-subtle"
109
+
>
110
+
{{ formatBytes(node.size) }}
111
+
</span>
107
112
</NuxtLink>
108
-
</td>
109
-
<td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
110
-
<span v-if="node.type === 'file' && node.size">
111
-
{{ formatBytes(node.size) }}
112
-
</span>
113
113
</td>
114
114
</tr>
115
115
</tbody>
+10
-3
app/components/Code/Viewer.vue
+10
-3
app/components/Code/Viewer.vue
···
16
16
return Array.from({ length: props.lines }, (_, i) => i + 1)
17
17
})
18
18
19
+
// Used for CSS calculation of line number column width
20
+
const lineDigits = computed(() => {
21
+
return String(props.lines).length
22
+
})
23
+
19
24
// Check if a line is selected
20
25
function isLineSelected(lineNum: number): boolean {
21
26
if (!props.selectedLines) return false
···
55
60
</script>
56
61
57
62
<template>
58
-
<div class="code-viewer flex min-h-full">
63
+
<div class="code-viewer flex min-h-full max-w-full">
59
64
<!-- Line numbers column -->
60
65
<div
61
-
class="line-numbers shrink-0 bg-bg-subtle border-ie border-border text-end select-none"
66
+
class="line-numbers shrink-0 bg-bg-subtle border-ie border-solid border-border text-end select-none relative"
67
+
:style="{ '--line-digits': lineDigits }"
62
68
aria-hidden="true"
63
69
>
64
70
<a
···
94
100
}
95
101
96
102
.line-numbers {
97
-
min-width: 3.5rem;
103
+
/* 1ch per digit + 1.5rem (px-3 * 2) padding */
104
+
min-width: calc(var(--line-digits) * 1ch + 1.5rem);
98
105
}
99
106
100
107
.code-content :deep(pre) {
+1
-1
app/pages/package-code/[...path].vue
+1
-1
app/pages/package-code/[...path].vue
···
408
408
409
409
<!-- File content / Directory listing - sticky with internal scroll on desktop -->
410
410
<div
411
-
class="flex-1 min-w-0 md:sticky md:top-28 md:self-start md:h-[calc(100vh-7rem)] md:overflow-y-auto"
411
+
class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
412
412
>
413
413
<!-- File viewer -->
414
414
<template v-if="isViewingFile && fileContent">