diff --git a/desktop/frontend-next/src/design/settings.css b/desktop/frontend-next/src/design/settings.css index 12bc9b2aff..d7c8fe0fa2 100644 --- a/desktop/frontend-next/src/design/settings.css +++ b/desktop/frontend-next/src/design/settings.css @@ -300,7 +300,7 @@ @container (max-width: 720px) { .ext-md { grid-template-columns: minmax(0, 1fr); } .ext-detail-pane { position: static; } } .ext-md-list .srv .srv-sub > .fold::before { display: none; } -.mkt .mkt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } +.mkt .mkt-list:not([data-rows]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .mkt-card { position: relative; min-width: 0; } .mkt-card > .mkt-row { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 14px; box-sizing: border-box; @@ -314,7 +314,7 @@ .mkt-who .nm { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text); font: var(--w-semi) var(--fs-ui) var(--ui); overflow-wrap: anywhere; } .mkt-verified { flex: none; width: 13px; height: 13px; color: var(--ok-ink); } .mkt-who .mkt-id { overflow: hidden; color: var(--faint); font: var(--w-med) var(--fs-micro) var(--ui); white-space: nowrap; text-overflow: ellipsis; } -.mkt-state { position: absolute; top: 20px; inset-inline-end: 14px; color: var(--ok-ink); font: var(--w-med) var(--fs-meta) var(--ui); } +.mkt-card .mkt-state { position: absolute; top: 20px; inset-inline-end: 14px; color: var(--ok-ink); font: var(--w-med) var(--fs-meta) var(--ui); } .mkt-card > .mkt-row > .mkt-sum { display: -webkit-box; overflow: hidden; color: var(--muted); font: var(--w-med) var(--fs-meta)/1.6 var(--ui); -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 3.2em; } .mkt-card-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; } .mkt-card-ft .mkt-pinned { padding: 0 7px; border-radius: var(--r-pill); background: var(--overlay); color: var(--muted); font: var(--w-med) var(--fs-micro)/1.8 var(--ui); } @@ -356,3 +356,7 @@ @container prefsmain (max-width: 900px) { .usage .ucharts, .usage .utiles { grid-template-columns: minmax(0, 1fr); } } .prefs-sheet[data-solo="usage"] #set-usage > :is(.grp-hd, .hint, .apply) { display: none; } .grp[data-setting="market"], .grp[data-setting="market"]:hover { margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; } +.mkt .mkt-list[data-rows] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } +.mkt .mkt-list[data-rows] > .mkt-row { padding: 12px 2px; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; } +.mkt .mkt-list[data-rows] .mkt-meta { overflow: visible; white-space: normal; } +.ext-md-list .grp:focus-within, .grp[data-setting="market"]:focus-within { box-shadow: none; } diff --git a/desktop/frontend-next/src/styles/studio.css b/desktop/frontend-next/src/styles/studio.css index 87dd9152a5..604b7142bf 100644 --- a/desktop/frontend-next/src/styles/studio.css +++ b/desktop/frontend-next/src/styles/studio.css @@ -2798,9 +2798,9 @@ button, input, textarea { font-size: var(--fs-ui); } } .grp { border: 1px solid var(--hair); } @media (hover: hover) { - .grp:hover { background: color-mix(in srgb, var(--float) 84%, var(--surface)) !important; } + .grp:hover:not(.ext-md-list .grp, [data-setting="market"]) { background: color-mix(in srgb, var(--float) 84%, var(--surface)) !important; } } -.grp:focus-within { +.grp:focus-within:not(.ext-md-list .grp, [data-setting="market"]) { background: color-mix(in srgb, var(--float) 94%, var(--accent-wash)) !important; } .advset:not(.appearance-advanced) > .grp { background: transparent !important; box-shadow: none; } @@ -3001,7 +3001,7 @@ button, input, textarea { font-size: var(--fs-ui); } background: color-mix(in srgb, var(--raised) 90%, var(--surface)) !important; border-color: var(--hair) !important; } -:root[data-theme="dark"] .grp:focus-within { +:root[data-theme="dark"] .grp:focus-within:not(.ext-md-list .grp, [data-setting="market"]) { background: color-mix(in srgb, var(--raised) 94%, var(--accent-wash)) !important; } diff --git a/desktop/frontend-next/src/ui/MarketOwn.interaction.test.tsx b/desktop/frontend-next/src/ui/MarketOwn.interaction.test.tsx index ecb3501066..d7a88019a5 100644 --- a/desktop/frontend-next/src/ui/MarketOwn.interaction.test.tsx +++ b/desktop/frontend-next/src/ui/MarketOwn.interaction.test.tsx @@ -21,6 +21,15 @@ async function openMine(port: AgentPort, onInstalled = () => {}, onViewInstalled } describe("the account's own packages", () => { + it("lists each version as a row of its own, not as a market card", async () => { + const port = new MockPort() as unknown as AgentPort; + const { container } = render( {}} />); + await screen.findByText("ship-notes"); + const list = container.querySelector("ul.mkt-list")!; + expect(list.hasAttribute("data-rows")).toBe(true); + expect(list.querySelector(".mkt-card")).toBeNull(); + }); + it.each(["success", "failure"])("ignores a stale list %s after replacing the port", async (outcome) => { const port = new MockPort() as unknown as AgentPort; const next = new MockPort() as unknown as AgentPort; diff --git a/desktop/frontend-next/src/ui/MarketPublish.tsx b/desktop/frontend-next/src/ui/MarketPublish.tsx index e4b8839cda..fa361e66a3 100644 --- a/desktop/frontend-next/src/ui/MarketPublish.tsx +++ b/desktop/frontend-next/src/ui/MarketPublish.tsx @@ -271,7 +271,7 @@ function PackageList({ port, onInstalled, onViewInstalled, onApplying, onPublish )} {rows === null &&
{t("common.loading")}
} {rows?.length === 0 && !error &&
{t("ext.nothing_published_yet")}
} -