github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-20 00:17:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(plugins): stop marketplace card version badge clipping in narrow panel

Browse Source
This commit is contained in:
弈秋
2026-09-26 06:46:59 +08:00
committed by GitHub
parent ec9935d3ea
commit 8da0c59f42
2 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/plugins/PluginContributionsPanel.vue
+2 -2
View File
@@ -1022,7 +1022,7 @@ onBeforeUnmount(() => {
</div>
<div v-else-if="marketplaceViewMode === 'grid'" class="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
<article v-for="listing in sortedMarketplaceListings" :key="listing.key" class="group flex min-w-0 min-h-48 flex-col rounded-xl border bg-card p-4 transition-colors hover:border-primary/40">
<div class="flex items-start gap-3">
<div class="flex flex-wrap items-start gap-3">
<button
v-if="batchMode && isBatchSelectableListing(listing.status)"
type="button"
@@ -1067,7 +1067,7 @@ onBeforeUnmount(() => {
<Globe class="size-3.5" />
</button>
<span v-if="listing.latestVersionReleasedAt" class="shrink-0 text-[10px] text-muted-foreground">{{ formatMarketplaceReleasedDate(listing.latestVersionReleasedAt, appLocale) }}</span>
<Badge variant="outline" class="h-5 px-1.5 text-[10px]">v{{ listing.plugin.latestVersion }}</Badge>
<Badge variant="outline" class="h-5 shrink-0 px-1.5 text-[10px]">v{{ listing.plugin.latestVersion }}</Badge>
</div>
</div>
<div class="mt-3 flex flex-wrap gap-1.5">
apps/desktop/src/components/plugins/__tests__/PluginContributionsPanelBatch.spec.ts
Vendored
+22
View File
@@ -855,6 +855,28 @@ describe("PluginContributionsPanel marketplace sort", () => {
});
});
describe("PluginContributionsPanel marketplace card layout", () => {
it("wraps the grid card header and pins the version badge so it never clips in a narrow panel", async () => {
state.batchMode = false;
state.marketplaceViewMode = "grid";
await nextTick();
const card = host.querySelector("article");
expect(card, "a marketplace grid card should render").not.toBeNull();
// The header row (icon + name + github/globe/date/version cluster) must be allowed to wrap,
// otherwise the non-shrinkable right cluster overflows the narrow column and the version
// badge is clipped (e.g. "v0.1.C") when the plugin center shares width with the AI panel.
const header = card!.querySelector(":scope > div");
expect(header?.classList.contains("flex-wrap"), "grid card header row should wrap").toBe(true);
// The version badge must not shrink, so it is never squished even when it stays on one line.
const versionBadge = [...host.querySelectorAll<HTMLElement>("[data-stub='Badge']")].find((element) => element.textContent?.trim() === "v3.0.0");
expect(versionBadge, "version badge should render").toBeDefined();
expect(versionBadge!.classList.contains("shrink-0"), "version badge should be shrink-0").toBe(true);
});
});
describe("PluginContributionsPanel single uninstall outcomes", () => {
it("re-reads the installed list and notifies listeners when a single uninstall fails", async () => {
const changed = vi.fn();