forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): make package provenance section responsive (#938)
authored by
Nico Kempe
and committed by
GitHub
0b55ca4f
4d42b136
+39
-29
+39
-29
app/components/PackageProvenanceSection.vue
+39
-29
app/components/PackageProvenanceSection.vue
···
7
7
</script>
8
8
9
9
<template>
10
-
<section aria-labelledby="provenance-heading" class="scroll-mt-20">
10
+
<section id="provenance" aria-labelledby="provenance-heading" class="scroll-mt-20">
11
11
<h2 id="provenance-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
12
12
<a
13
13
href="#provenance"
···
21
21
</a>
22
22
</h2>
23
23
24
-
<div class="space-y-3 border border-border rounded-lg p-5">
25
-
<p class="flex items-center gap-2 text-sm text-fg m-0">
26
-
<span class="i-lucide-shield-check w-4 h-4 shrink-0 text-emerald-500" aria-hidden="true" />
27
-
<i18n-t keypath="package.provenance_section.built_and_signed_on" tag="span">
28
-
<template #provider>
29
-
<strong>{{ details.providerLabel }}</strong>
30
-
</template>
31
-
</i18n-t>
32
-
</p>
33
-
<a
34
-
v-if="details.buildSummaryUrl"
35
-
:href="details.buildSummaryUrl"
36
-
target="_blank"
37
-
rel="noopener noreferrer"
38
-
class="link text-sm text-fg-muted block mt-1"
39
-
>
40
-
{{ $t('package.provenance_section.view_build_summary') }}
41
-
</a>
24
+
<div class="space-y-3 border border-border rounded-lg p-4 sm:p-5">
25
+
<div class="space-y-1">
26
+
<p class="flex items-start gap-2 text-sm text-fg m-0">
27
+
<span
28
+
class="i-lucide-shield-check w-4 h-4 shrink-0 text-emerald-500 mt-0.5"
29
+
aria-hidden="true"
30
+
/>
31
+
<i18n-t keypath="package.provenance_section.built_and_signed_on" tag="span">
32
+
<template #provider>
33
+
<strong>{{ details.providerLabel }}</strong>
34
+
</template>
35
+
</i18n-t>
36
+
</p>
42
37
43
-
<dl class="m-0 mt-4 flex justify-between">
44
-
<div v-if="details.sourceCommitUrl" class="flex flex-col gap-0.5">
38
+
<a
39
+
v-if="details.buildSummaryUrl"
40
+
:href="details.buildSummaryUrl"
41
+
target="_blank"
42
+
rel="noopener noreferrer"
43
+
class="link text-sm text-fg-muted inline-flex"
44
+
>
45
+
{{ $t('package.provenance_section.view_build_summary') }}
46
+
</a>
47
+
</div>
48
+
49
+
<dl class="m-0 mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
50
+
<div v-if="details.sourceCommitUrl" class="min-w-0 flex flex-col gap-0.5">
45
51
<dt class="font-mono text-xs text-fg-muted m-0">
46
52
{{ $t('package.provenance_section.source_commit') }}
47
53
</dt>
48
-
<dd class="m-0">
54
+
<dd class="m-0 min-w-0">
49
55
<a
50
56
:href="details.sourceCommitUrl"
51
57
target="_blank"
52
58
rel="noopener noreferrer"
53
-
class="link font-mono text-sm break-all"
59
+
class="link font-mono text-sm block min-w-0 truncate"
60
+
:title="details.sourceCommitSha ?? details.sourceCommitUrl"
54
61
>
55
62
{{
56
63
details.sourceCommitSha
···
60
67
</a>
61
68
</dd>
62
69
</div>
63
-
<div v-if="details.buildFileUrl" class="flex flex-col gap-0.5">
70
+
71
+
<div v-if="details.buildFileUrl" class="min-w-0 flex flex-col gap-0.5">
64
72
<dt class="font-mono text-xs text-fg-muted m-0">
65
73
{{ $t('package.provenance_section.build_file') }}
66
74
</dt>
67
-
<dd class="m-0">
75
+
<dd class="m-0 min-w-0">
68
76
<a
69
77
:href="details.buildFileUrl"
70
78
target="_blank"
71
79
rel="noopener noreferrer"
72
-
class="link font-mono text-sm break-all"
80
+
class="link font-mono text-sm block min-w-0 break-words"
81
+
:title="details.buildFilePath ?? details.buildFileUrl"
73
82
>
74
83
{{ details.buildFilePath ?? details.buildFileUrl }}
75
84
</a>
76
85
</dd>
77
86
</div>
78
-
<div v-if="details.publicLedgerUrl" class="flex flex-col gap-0.5">
87
+
88
+
<div v-if="details.publicLedgerUrl" class="min-w-0 flex flex-col gap-0.5">
79
89
<dt class="font-mono text-xs text-fg-muted m-0">
80
90
{{ $t('package.provenance_section.public_ledger') }}
81
91
</dt>
82
-
<dd class="m-0">
92
+
<dd class="m-0 min-w-0">
83
93
<a
84
94
:href="details.publicLedgerUrl"
85
95
target="_blank"
86
96
rel="noopener noreferrer"
87
-
class="link text-sm"
97
+
class="link text-sm inline-flex"
88
98
>
89
99
{{ $t('package.provenance_section.transparency_log_entry') }}
90
100
</a>