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

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

@@ -42,7 +42,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</button>
</div>
<div class="modal-table styled-scrollbar">
<div class="modal-table">
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
<div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
@@ -50,7 +50,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
<div v-if="isBookmark" class="header-cell">Bookmark Path</div>
<div class="header-cell actions-cell">Action</div>
</div>
<div class="modal-table-body styled-scrollbar">
<article
v-for="profile in sortedProfiles"
:key="profile.id"
@@ -90,6 +90,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</div>
</article>
</div>
</div>
</section>
</div>
</template>
@@ -137,10 +138,10 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px;
background: var(--panel-strong);
overflow: hidden;
}
.modal-grid {
@@ -155,9 +156,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
}
.modal-table-header {
position: sticky;
top: 0;
z-index: 2;
padding: 10px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(248, 250, 252, 0.94);
@@ -165,6 +163,11 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
-webkit-backdrop-filter: blur(12px);
}
.modal-table-body {
min-height: 0;
overflow: auto;
}
.header-cell {
color: var(--muted);
font-size: 0.81rem;

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

@@ -14,13 +14,13 @@ const emit = defineEmits<{
<template>
<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">
<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>
<div class="header-cell actions-cell">Profiles</div>
</div>
<div class="data-table-body styled-scrollbar">
<article v-for="bookmark in bookmarks" :key="bookmark.url" class="data-table-row bookmarks-grid">
<div class="row-cell primary-cell">
<strong>{{ bookmark.title }}</strong>
@@ -34,6 +34,7 @@ const emit = defineEmits<{
</div>
</article>
</div>
</div>
<div v-else class="empty-card">
<p>No bookmarks were discovered for this browser.</p>
</div>
@@ -56,6 +57,11 @@ const emit = defineEmits<{
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: hidden;
}
.data-table-body {
min-height: 0;
overflow: auto;
}

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

@@ -15,7 +15,7 @@ const emit = defineEmits<{
<template>
<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="header-cell icon-cell">Icon</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -23,7 +23,7 @@ const emit = defineEmits<{
<div class="header-cell">Version</div>
<div class="header-cell actions-cell">Profiles</div>
</div>
<div class="data-table-body styled-scrollbar">
<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) }">
<img v-if="extension.iconDataUrl" :src="extension.iconDataUrl" :alt="`${extension.name} icon`" />
@@ -45,6 +45,7 @@ const emit = defineEmits<{
</div>
</article>
</div>
</div>
<div v-else class="empty-card">
<p>No extensions were discovered for this browser.</p>
</div>
@@ -67,6 +68,11 @@ const emit = defineEmits<{
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: hidden;
}
.data-table-body {
min-height: 0;
overflow: auto;
}

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

@@ -23,7 +23,7 @@ const emit = defineEmits<{
{{ openProfileError }}
</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="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -31,7 +31,7 @@ const emit = defineEmits<{
<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>
<div class="data-table-body styled-scrollbar">
<article v-for="profile in profiles" :key="profile.id" class="data-table-row profiles-grid">
<div class="profile-avatar table-avatar">
<img
@@ -62,6 +62,7 @@ const emit = defineEmits<{
</div>
</article>
</div>
</div>
<div v-else class="empty-card">
<p>No profile directories were found for this browser.</p>
</div>
@@ -84,6 +85,11 @@ const emit = defineEmits<{
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: hidden;
}
.data-table-body {
min-height: 0;
overflow: auto;
}