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

50
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,27 +23,28 @@ const emit = defineEmits<{
<div class="header-cell">Version</div>
<div class="header-cell actions-cell">Profiles</div>
</div>
<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`" />
<span v-else>{{ extensionMonogram(extension.name) }}</span>
</div>
<div class="row-cell primary-cell">
<strong>{{ extension.name }}</strong>
</div>
<div class="row-cell muted-cell" :title="extension.id">{{ extension.id }}</div>
<div class="row-cell">
<span v-if="extension.version" class="badge neutral">v{{ extension.version }}</span>
<span v-else class="muted-cell">-</span>
</div>
<div class="row-cell actions-cell">
<button class="disclosure-button" type="button" @click="emit('showProfiles', extension.id)">
<span>View</span>
<span class="badge neutral">{{ extension.profileIds.length }}</span>
</button>
</div>
</article>
<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`" />
<span v-else>{{ extensionMonogram(extension.name) }}</span>
</div>
<div class="row-cell primary-cell">
<strong>{{ extension.name }}</strong>
</div>
<div class="row-cell muted-cell" :title="extension.id">{{ extension.id }}</div>
<div class="row-cell">
<span v-if="extension.version" class="badge neutral">v{{ extension.version }}</span>
<span v-else class="muted-cell">-</span>
</div>
<div class="row-cell actions-cell">
<button class="disclosure-button" type="button" @click="emit('showProfiles', extension.id)">
<span>View</span>
<span class="badge neutral">{{ extension.profileIds.length }}</span>
</button>
</div>
</article>
</div>
</div>
<div v-else class="empty-card">
<p>No extensions were discovered for this browser.</p>
@@ -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;
}