julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix scrollbar

Browse Source
This commit is contained in:
Julian Freeman
2026-04-16 20:25:16 -04:00
parent 16eb25d552
commit 309e2219f5
6 changed files with 130 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/vivaldi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/yandex.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

87
src/components/browser-data/AssociatedProfilesModal.vue
View File

@@ -42,7 +42,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</button> </button>
</div> </div>
<div class="modal-table styled-scrollbar"> <div class="modal-table">
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }"> <div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
<div class="header-cell icon-cell">Avatar</div> <div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
@@ -50,45 +50,46 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
<div v-if="isBookmark" class="header-cell">Bookmark Path</div> <div v-if="isBookmark" class="header-cell">Bookmark Path</div>
<div class="header-cell actions-cell">Action</div> <div class="header-cell actions-cell">Action</div>
</div> </div>
<div class="modal-table-body styled-scrollbar">
<article <article
v-for="profile in sortedProfiles" v-for="profile in sortedProfiles"
:key="profile.id" :key="profile.id"
class="modal-table-row modal-grid" class="modal-table-row modal-grid"
:class="{ bookmark: isBookmark }" :class="{ bookmark: isBookmark }"
>
<div class="modal-profile-avatar">
<img
v-if="profileAvatarSrc(profile, browserFamilyId)"
:src="profileAvatarSrc(profile, browserFamilyId) ?? undefined"
:alt="`${profile.name} avatar`"
/>
<span v-else>{{ profile.avatarLabel }}</span>
</div>
<div class="row-cell primary-cell">
<strong>{{ profile.name }}</strong>
</div>
<div class="row-cell">
<span class="badge neutral">{{ profile.id }}</span>
</div>
<div
v-if="isBookmark && hasBookmarkPath(profile)"
class="row-cell muted-cell"
:title="profile.bookmarkPath"
> >
{{ profile.bookmarkPath }} <div class="modal-profile-avatar">
</div> <img
<div class="row-cell actions-cell"> v-if="profileAvatarSrc(profile, browserFamilyId)"
<button :src="profileAvatarSrc(profile, browserFamilyId) ?? undefined"
class="card-action-button" :alt="`${profile.name} avatar`"
type="button" />
:disabled="isOpeningProfile(browserId, profile.id)" <span v-else>{{ profile.avatarLabel }}</span>
@click="emit('openProfile', browserId, profile.id)" </div>
<div class="row-cell primary-cell">
<strong>{{ profile.name }}</strong>
</div>
<div class="row-cell">
<span class="badge neutral">{{ profile.id }}</span>
</div>
<div
v-if="isBookmark && hasBookmarkPath(profile)"
class="row-cell muted-cell"
:title="profile.bookmarkPath"
> >
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }} {{ profile.bookmarkPath }}
</button> </div>
</div> <div class="row-cell actions-cell">
</article> <button
class="card-action-button"
type="button"
:disabled="isOpeningProfile(browserId, profile.id)"
@click="emit('openProfile', browserId, profile.id)"
>
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
</button>
</div>
</article>
</div>
</div> </div>
</section> </section>
</div> </div>
@@ -137,10 +138,10 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
overflow: auto;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px; border-radius: 18px;
background: var(--panel-strong); background: var(--panel-strong);
overflow: hidden;
} }
.modal-grid { .modal-grid {
@@ -155,9 +156,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
} }
.modal-table-header { .modal-table-header {
position: sticky;
top: 0;
z-index: 2;
padding: 10px 14px; padding: 10px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14); border-bottom: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(248, 250, 252, 0.94); background: rgba(248, 250, 252, 0.94);
@@ -165,6 +163,11 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
} }
.modal-table-body {
min-height: 0;
overflow: auto;
}
.header-cell { .header-cell {
color: var(--muted); color: var(--muted);
font-size: 0.81rem; font-size: 0.81rem;

34
src/components/browser-data/BookmarksList.vue
View File

@@ -14,25 +14,26 @@ const emit = defineEmits<{
<template> <template>
<section class="table-section"> <section class="table-section">
<div v-if="bookmarks.length" class="data-table styled-scrollbar"> <div v-if="bookmarks.length" class="data-table">
<div class="data-table-header bookmarks-grid"> <div class="data-table-header bookmarks-grid">
<button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
<button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button> <button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
<div class="header-cell actions-cell">Profiles</div> <div class="header-cell actions-cell">Profiles</div>
</div> </div>
<div class="data-table-body styled-scrollbar">
<article v-for="bookmark in bookmarks" :key="bookmark.url" class="data-table-row bookmarks-grid"> <article v-for="bookmark in bookmarks" :key="bookmark.url" class="data-table-row bookmarks-grid">
<div class="row-cell primary-cell"> <div class="row-cell primary-cell">
<strong>{{ bookmark.title }}</strong> <strong>{{ bookmark.title }}</strong>
</div> </div>
<div class="row-cell muted-cell" :title="bookmark.url">{{ bookmark.url }}</div> <div class="row-cell muted-cell" :title="bookmark.url">{{ bookmark.url }}</div>
<div class="row-cell actions-cell"> <div class="row-cell actions-cell">
<button class="disclosure-button" type="button" @click="emit('showProfiles', bookmark.url)"> <button class="disclosure-button" type="button" @click="emit('showProfiles', bookmark.url)">
<span>View</span> <span>View</span>
<span class="badge neutral">{{ bookmark.profileIds.length }}</span> <span class="badge neutral">{{ bookmark.profileIds.length }}</span>
</button> </button>
</div> </div>
</article> </article>
</div>
</div> </div>
<div v-else class="empty-card"> <div v-else class="empty-card">
<p>No bookmarks were discovered for this browser.</p> <p>No bookmarks were discovered for this browser.</p>
@@ -56,6 +57,11 @@ const emit = defineEmits<{
border-radius: 22px; border-radius: 22px;
background: var(--panel); background: var(--panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: hidden;
}
.data-table-body {
min-height: 0;
overflow: auto; overflow: auto;
} }

50
src/components/browser-data/ExtensionsList.vue
View File

@@ -15,7 +15,7 @@ const emit = defineEmits<{
<template> <template>
<section class="table-section"> <section class="table-section">
<div v-if="extensions.length" class="data-table styled-scrollbar"> <div v-if="extensions.length" class="data-table">
<div class="data-table-header extensions-grid"> <div class="data-table-header extensions-grid">
<div class="header-cell icon-cell">Icon</div> <div class="header-cell icon-cell">Icon</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -23,27 +23,28 @@ const emit = defineEmits<{
<div class="header-cell">Version</div> <div class="header-cell">Version</div>
<div class="header-cell actions-cell">Profiles</div> <div class="header-cell actions-cell">Profiles</div>
</div> </div>
<div class="data-table-body styled-scrollbar">
<article v-for="extension in extensions" :key="extension.id" class="data-table-row extensions-grid"> <article v-for="extension in extensions" :key="extension.id" class="data-table-row extensions-grid">
<div class="extension-icon table-icon" :class="{ filled: Boolean(extension.iconDataUrl) }"> <div class="extension-icon table-icon" :class="{ filled: Boolean(extension.iconDataUrl) }">
<img v-if="extension.iconDataUrl" :src="extension.iconDataUrl" :alt="`${extension.name} icon`" /> <img v-if="extension.iconDataUrl" :src="extension.iconDataUrl" :alt="`${extension.name} icon`" />
<span v-else>{{ extensionMonogram(extension.name) }}</span> <span v-else>{{ extensionMonogram(extension.name) }}</span>
</div> </div>
<div class="row-cell primary-cell"> <div class="row-cell primary-cell">
<strong>{{ extension.name }}</strong> <strong>{{ extension.name }}</strong>
</div> </div>
<div class="row-cell muted-cell" :title="extension.id">{{ extension.id }}</div> <div class="row-cell muted-cell" :title="extension.id">{{ extension.id }}</div>
<div class="row-cell"> <div class="row-cell">
<span v-if="extension.version" class="badge neutral">v{{ extension.version }}</span> <span v-if="extension.version" class="badge neutral">v{{ extension.version }}</span>
<span v-else class="muted-cell">-</span> <span v-else class="muted-cell">-</span>
</div> </div>
<div class="row-cell actions-cell"> <div class="row-cell actions-cell">
<button class="disclosure-button" type="button" @click="emit('showProfiles', extension.id)"> <button class="disclosure-button" type="button" @click="emit('showProfiles', extension.id)">
<span>View</span> <span>View</span>
<span class="badge neutral">{{ extension.profileIds.length }}</span> <span class="badge neutral">{{ extension.profileIds.length }}</span>
</button> </button>
</div> </div>
</article> </article>
</div>
</div> </div>
<div v-else class="empty-card"> <div v-else class="empty-card">
<p>No extensions were discovered for this browser.</p> <p>No extensions were discovered for this browser.</p>
@@ -67,6 +68,11 @@ const emit = defineEmits<{
border-radius: 22px; border-radius: 22px;
background: var(--panel); background: var(--panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: hidden;
}
.data-table-body {
min-height: 0;
overflow: auto; overflow: auto;
} }

68
src/components/browser-data/ProfilesList.vue
View File

@@ -23,7 +23,7 @@ const emit = defineEmits<{
{{ openProfileError }} {{ openProfileError }}
</div> </div>
<div v-if="profiles.length" class="data-table styled-scrollbar"> <div v-if="profiles.length" class="data-table">
<div class="data-table-header profiles-grid"> <div class="data-table-header profiles-grid">
<div class="header-cell icon-cell">Avatar</div> <div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button> <button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -31,36 +31,37 @@ const emit = defineEmits<{
<button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Profile ID</button> <button class="header-cell sortable" :class="{ active: sortKey === 'id' }" type="button" @click="emit('update:sortKey', 'id')">Profile ID</button>
<div class="header-cell actions-cell">Action</div> <div class="header-cell actions-cell">Action</div>
</div> </div>
<div class="data-table-body styled-scrollbar">
<article v-for="profile in profiles" :key="profile.id" class="data-table-row profiles-grid"> <article v-for="profile in profiles" :key="profile.id" class="data-table-row profiles-grid">
<div class="profile-avatar table-avatar"> <div class="profile-avatar table-avatar">
<img <img
v-if="profileAvatarSrc(profile, browserFamilyId)" v-if="profileAvatarSrc(profile, browserFamilyId)"
:src="profileAvatarSrc(profile, browserFamilyId) ?? undefined" :src="profileAvatarSrc(profile, browserFamilyId) ?? undefined"
:alt="`${profile.name} avatar`" :alt="`${profile.name} avatar`"
/> />
<span v-else>{{ profile.avatarLabel }}</span> <span v-else>{{ profile.avatarLabel }}</span>
</div> </div>
<div class="row-cell primary-cell"> <div class="row-cell primary-cell">
<strong>{{ profile.name }}</strong> <strong>{{ profile.name }}</strong>
</div> </div>
<div class="row-cell muted-cell" :title="profile.email ?? undefined"> <div class="row-cell muted-cell" :title="profile.email ?? undefined">
{{ profile.email || "" }} {{ profile.email || "" }}
</div> </div>
<div class="row-cell"> <div class="row-cell">
<span class="badge neutral">{{ profile.id }}</span> <span class="badge neutral">{{ profile.id }}</span>
</div> </div>
<div class="row-cell actions-cell"> <div class="row-cell actions-cell">
<button <button
class="card-action-button" class="card-action-button"
:disabled="isOpeningProfile(browserId, profile.id)" :disabled="isOpeningProfile(browserId, profile.id)"
type="button" type="button"
@click="emit('openProfile', browserId, profile.id)" @click="emit('openProfile', browserId, profile.id)"
> >
{{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }} {{ isOpeningProfile(browserId, profile.id) ? "Opening..." : "Open" }}
</button> </button>
</div> </div>
</article> </article>
</div>
</div> </div>
<div v-else class="empty-card"> <div v-else class="empty-card">
<p>No profile directories were found for this browser.</p> <p>No profile directories were found for this browser.</p>
@@ -84,6 +85,11 @@ const emit = defineEmits<{
border-radius: 22px; border-radius: 22px;
background: var(--panel); background: var(--panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: hidden;
}
.data-table-body {
min-height: 0;
overflow: auto; overflow: auto;
} }