feat(hosts): keep compact row actions inline (#1547)

This commit is contained in:
ZacharyZcR authored and GitHub committed 2026-10-03 21:02:54 +08:00
1 parent 2c4de5f705
commit c66702deb1
2 files changed
+26 -2

No files matched your search

+25 -2
View File
@@ -1096,7 +1096,10 @@ export function HostItem({
className={`flex flex-col flex-1 min-w-0 ${tokens.rowPadding} ${isCompact ? "" : "gap-[3.5px]"}`} className={`flex flex-col flex-1 min-w-0 ${tokens.rowPadding} ${isCompact ? "" : "gap-[3.5px]"}`}
> >
{/* Name row */} {/* Name row */}
<div data-drag-label className="flex items-center gap-1.5 min-w-0"> <div
data-drag-label
className={`flex items-center gap-1.5 min-w-0 ${isCompact ? "min-h-[19px]" : ""}`}
>
{onToggleExpand && ( {onToggleExpand && (
<button <button
type="button" type="button"
@@ -1190,6 +1193,23 @@ export function HostItem({
{host.ip} {host.ip}
</span> </span>
)} )}
{isCompact && !selectionMode && (
<div
data-testid="host-inline-actions"
className={`flex items-center gap-[2px] min-w-0 max-w-[60%] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:shrink-0 ${alwaysShowTray || actionsOnly || trayOpenState || hoverTrayOpen ? "" : "hidden"}`}
>
{connectionButtons}
<div
className={
alwaysShowTray || trayOpenState || hoverTrayOpen
? "flex items-center gap-[2px]"
: "hidden"
}
>
{managementButtons}
</div>
</div>
)}
{!selectionMode && (shouldUseClickTray || actionsOnly) && ( {!selectionMode && (shouldUseClickTray || actionsOnly) && (
<button <button
title={ title={
@@ -1239,7 +1259,8 @@ export function HostItem({
)} )}
{/* Connection buttons: permanent in "always"/"actionsOnly" modes, or shown once the chevron opens the tray in click mode */} {/* Connection buttons: permanent in "always"/"actionsOnly" modes, or shown once the chevron opens the tray in click mode */}
{!selectionMode && {!isCompact &&
!selectionMode &&
(alwaysShowTray || (alwaysShowTray ||
actionsOnly || actionsOnly ||
(shouldUseClickTray && isTrayOpen)) && ( (shouldUseClickTray && isTrayOpen)) && (
@@ -1251,6 +1272,7 @@ export function HostItem({
)} )}
{/* Action tray — slides open on hover (default) or via chevron in click-tray mode */} {/* Action tray — slides open on hover (default) or via chevron in click-tray mode */}
{!isCompact && (
<div className={trayVisibilityClass}> <div className={trayVisibilityClass}>
{tokens.showResourceRow && {tokens.showResourceRow &&
isOnline && isOnline &&
@@ -1306,6 +1328,7 @@ export function HostItem({
</div> </div>
</div> </div>
</div> </div>
)}
{authOverrideProtocol && ( {authOverrideProtocol && (
<HostAuthOverrideModal <HostAuthOverrideModal
open open
+1
View File
@@ -754,6 +754,7 @@ export function SidebarTree({
const row = visibleRows[index]; const row = visibleRows[index];
if (!row) return FOLDER_ROW_HEIGHT; if (!row) return FOLDER_ROW_HEIGHT;
if (isFolder(row.item)) return FOLDER_ROW_HEIGHT; if (isFolder(row.item)) return FOLDER_ROW_HEIGHT;
if (isCompactDensity) return 29;
const tagExtra = showTags && row.item.tags?.length ? TAG_ROW_EXTRA : 0; const tagExtra = showTags && row.item.tags?.length ? TAG_ROW_EXTRA : 0;
// The resource bars only render for an online host that reported CPU/RAM. // The resource bars only render for an online host that reported CPU/RAM.
// Reserving their height unconditionally left a gap under every offline // Reserving their height unconditionally left a gap under every offline