gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-09-01 13:18:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: standardize all tooltips to match sidebar RowTooltip design

Browse Source 
Wrapped every TooltipContent child in a font-mono text-xs
tabular-nums text-stat-value span so all tooltips across the app
share a consistent look. Previously some used plain text, others
used <p> elements with different fonts and sizes.
This commit is contained in:
SaelixCode
2026-07-03 14:45:48 -04:00
parent 8494e53e4c
commit 9e1d97d39e
7 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NodeManager.tsx
+6 -6
View File
@@ -333,7 +333,7 @@ export function NodeManager() {
<TooltipTrigger> <TooltipTrigger>
<Star className="w-4 h-4 text-yellow-500 fill-yellow-500" /> <Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Default Node</TooltipContent> <TooltipContent><span className="font-mono text-xs tabular-nums text-stat-value">Default Node</span></TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
)} )}
@@ -395,7 +395,7 @@ export function NodeManager() {
</span> </span>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{new Date(summary.next_run_at).toLocaleString()} <span className="font-mono text-xs tabular-nums text-stat-value">{new Date(summary.next_run_at).toLocaleString()}</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@@ -450,7 +450,7 @@ export function NodeManager() {
<Calendar className="w-4 h-4" strokeWidth={1.5} /> <Calendar className="w-4 h-4" strokeWidth={1.5} />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>View Schedules</TooltipContent> <TooltipContent><span className="font-mono text-xs tabular-nums text-stat-value">View Schedules</span></TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@@ -469,7 +469,7 @@ export function NodeManager() {
<Wifi className={`w-4 h-4 ${testing === node.id ? 'animate-pulse' : ''}`} /> <Wifi className={`w-4 h-4 ${testing === node.id ? 'animate-pulse' : ''}`} />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Test Connection</TooltipContent> <TooltipContent><span className="font-mono text-xs tabular-nums text-stat-value">Test Connection</span></TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
)} )}
@@ -488,7 +488,7 @@ export function NodeManager() {
<Pencil className="w-4 h-4" /> <Pencil className="w-4 h-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Edit Node</TooltipContent> <TooltipContent><span className="font-mono text-xs tabular-nums text-stat-value">Edit Node</span></TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
)} )}
@@ -507,7 +507,7 @@ export function NodeManager() {
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Delete Node</TooltipContent> <TooltipContent><span className="font-mono text-xs tabular-nums text-stat-value">Delete Node</span></TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
)} )}
frontend/src/components/StackAlertSheet.tsx
+1 -1
View File
@@ -384,7 +384,7 @@ function AlertsTab({ stackName }: { stackName: string }) {
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} /> <HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p className="max-w-[200px] text-sm">The system resource or metric to monitor. Select from CPU, Memory, Network I/O, or Restarts.</p> <span className="font-mono text-xs tabular-nums text-stat-value max-w-[200px]">The system resource or metric to monitor. Select from CPU, Memory, Network I/O, or Restarts.</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</div> </div>
frontend/src/components/TopBar.tsx
+1 -1
View File
@@ -90,7 +90,7 @@ export function TopBar({
) : ( ) : (
<Tooltip key={value}> <Tooltip key={value}>
<TooltipTrigger asChild>{button}</TooltipTrigger> <TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent side="bottom">{label}</TooltipContent> <TooltipContent side="bottom"><span className="font-mono text-xs tabular-nums text-stat-value">{label}</span></TooltipContent>
</Tooltip> </Tooltip>
); );
})} })}
frontend/src/components/fleet/FleetConfiguration.tsx
+1 -1
View File
@@ -84,7 +84,7 @@ function PolicySyncRow({ state }: { state: PolicySyncState }) {
{state.kind === 'paused' ? 'paused' : 'degraded'} {state.kind === 'paused' ? 'paused' : 'degraded'}
</span> </span>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>{tooltip}</TooltipContent> <TooltipContent><span className="font-mono text-xs tabular-nums text-stat-value">{tooltip}</span></TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</div> </div>
frontend/src/components/fleet/FleetTopology.tsx
+8 -6
View File
@@ -122,7 +122,7 @@ function FleetNodeCard({ data, selected }: { data: FleetNodeData; selected?: boo
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top"> <TooltipContent side="top">
{node.cordonedReason || 'Cordoned: scheduling paused.'} <span className="font-mono text-xs tabular-nums text-stat-value">{node.cordonedReason || 'Cordoned: scheduling paused.'}</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@@ -141,9 +141,11 @@ function FleetNodeCard({ data, selected }: { data: FleetNodeData; selected?: boo
<Clock className="h-3 w-3 text-warning" strokeWidth={2} aria-label="Pilot heartbeat stale" /> <Clock className="h-3 w-3 text-warning" strokeWidth={2} aria-label="Pilot heartbeat stale" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top"> <TooltipContent side="top">
{node.pilotLastSeen <span className="font-mono text-xs tabular-nums text-stat-value">
? `Pilot heartbeat ${formatRelative(node.pilotLastSeen)}` {node.pilotLastSeen
: 'Pilot heartbeat stale'} ? `Pilot heartbeat ${formatRelative(node.pilotLastSeen)}`
: 'Pilot heartbeat stale'}
</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@@ -179,7 +181,7 @@ function FleetNodeCard({ data, selected }: { data: FleetNodeData; selected?: boo
</span> </span>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top"> <TooltipContent side="top">
{labels.slice(MAX_INLINE_LABELS).join(', ')} <span className="font-mono text-xs tabular-nums text-stat-value">{labels.slice(MAX_INLINE_LABELS).join(', ')}</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@@ -260,7 +262,7 @@ function TopologyToolbar({
</button> </button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="bottom"> <TooltipContent side="bottom">
{spec.description} <span className="font-mono text-xs tabular-nums text-stat-value">{spec.description}</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
frontend/src/components/sidebar/SidebarActions.tsx
+2 -2
View File
@@ -30,7 +30,7 @@ export function SidebarActions({ createStackSlot, onScan, isScanning, bulkMode,
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="bottom"> <TooltipContent side="bottom">
<p>Bulk mode (B)</p> <span className="font-mono text-xs tabular-nums text-stat-value">Bulk mode (B)</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@@ -50,7 +50,7 @@ export function SidebarActions({ createStackSlot, onScan, isScanning, bulkMode,
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="bottom"> <TooltipContent side="bottom">
<p>Scan stacks folder</p> <span className="font-mono text-xs tabular-nums text-stat-value">Scan stacks folder</span>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
frontend/src/components/sidebar/__tests__/StackRow.test.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ describe('StackRow', () => {
}); });
it('wraps the partial pill in a hover tooltip', () => { it('wraps the partial pill in a hover tooltip', () => {
const { container } = render(<StackRow {...base({ status: 'partial', running: 3, total: 5 })} />); render(<StackRow {...base({ status: 'partial', running: 3, total: 5 })} />);
const trigger = screen.getByText('PT'); const trigger = screen.getByText('PT');
// Radix TooltipTrigger adds data-state to the wrapped element. // Radix TooltipTrigger adds data-state to the wrapped element.
expect(trigger.getAttribute('data-state')).toBe('closed'); expect(trigger.getAttribute('data-state')).toBe('closed');