fix scrollbar

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

View File

@@ -14,25 +14,26 @@ 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>
<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>
</div>
<div class="row-cell muted-cell" :title="bookmark.url">{{ bookmark.url }}</div>
<div class="row-cell actions-cell">
<button class="disclosure-button" type="button" @click="emit('showProfiles', bookmark.url)">
<span>View</span>
<span class="badge neutral">{{ bookmark.profileIds.length }}</span>
</button>
</div>
</article>
<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>
</div>
<div class="row-cell muted-cell" :title="bookmark.url">{{ bookmark.url }}</div>
<div class="row-cell actions-cell">
<button class="disclosure-button" type="button" @click="emit('showProfiles', bookmark.url)">
<span>View</span>
<span class="badge neutral">{{ bookmark.profileIds.length }}</span>
</button>
</div>
</article>
</div>
</div>
<div v-else class="empty-card">
<p>No bookmarks were discovered for this browser.</p>
@@ -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;
}