forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: package page right sidebar scroll (#805)
Co-authored-by: wr <wr@wrtekiMacBook-Pro.local>
Co-authored-by: Daniel Roe <daniel@roe.dev>
+38
-1
+38
-1
app/pages/package/[...package].vue
+38
-1
app/pages/package/[...package].vue
···
1088
1088
1089
1089
<div class="area-sidebar">
1090
1090
<!-- Sidebar -->
1091
-
<div class="sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-hidden xl:(top-22) pt-1">
1091
+
<div
1092
+
class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pr-2.5 hover:pr-0.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)])"
1093
+
>
1092
1094
<!-- Maintainers (with admin actions when connected) -->
1093
1095
<PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
1094
1096
···
1235
1237
1236
1238
.area-sidebar {
1237
1239
grid-area: sidebar;
1240
+
}
1241
+
1242
+
/* Sidebar scrollbar: hidden by default, shown on hover/focus */
1243
+
@media (min-width: 1024px) {
1244
+
.sidebar-scroll {
1245
+
scrollbar-gutter: stable;
1246
+
scrollbar-width: none;
1247
+
}
1248
+
1249
+
.sidebar-scroll::-webkit-scrollbar {
1250
+
width: 0;
1251
+
height: 0;
1252
+
}
1253
+
1254
+
.sidebar-scroll:hover,
1255
+
.sidebar-scroll:focus-within {
1256
+
scrollbar-width: auto;
1257
+
}
1258
+
1259
+
.sidebar-scroll:hover::-webkit-scrollbar,
1260
+
.sidebar-scroll:focus-within::-webkit-scrollbar {
1261
+
width: 8px;
1262
+
height: 8px;
1263
+
}
1264
+
1265
+
.sidebar-scroll:hover::-webkit-scrollbar-thumb,
1266
+
.sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
1267
+
background-color: #cecece;
1268
+
border-radius: 9999px;
1269
+
}
1270
+
1271
+
.sidebar-scroll:hover::-webkit-scrollbar-track,
1272
+
.sidebar-scroll:focus-within::-webkit-scrollbar-track {
1273
+
background: transparent;
1274
+
}
1238
1275
}
1239
1276
1240
1277
/* Improve package name wrapping for narrow screens */