.body { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; } /* The compact variant may shrink in toolbars; here it keeps its height above the panes. */ .tabs { flex: none; } .notice, .warning, .error, .empty { margin: 0; font-size: var(--fs-small); overflow-wrap: anywhere; } .notice { color: var(--fg-muted); } .warning { color: var(--warning); } .error { color: var(--danger); white-space: pre-wrap; } .empty { padding: 16px 4px; color: var(--fg-subtle); text-align: center; } .list { flex: 1; min-height: 240px; overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-control); } .loading { height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--fg-muted); font-size: var(--fs-small); } .rows { margin: 0; padding: 0; list-style: none; } .row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); } .row:last-child { border-bottom: none; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .titleLine { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .name { color: var(--fg-strong); font-weight: 600; } .version { color: var(--fg-muted); font-size: var(--fs-small); } .description { margin: 0; color: var(--fg-secondary); font-size: var(--fs-small); overflow-wrap: anywhere; } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--fg-subtle); font-size: var(--fs-tiny); } .link { padding: 0; border: none; background: none; color: var(--link); font: inherit; cursor: pointer; } .link:hover { color: var(--link-hover); text-decoration: underline; } .link:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } .progress { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .progressText { color: var(--fg-muted); font-size: var(--fs-tiny); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .actions { flex: none; display: flex; gap: 6px; }