Skip to content

Commit a28b82b

Browse files
jog1tjog1t
authored
fix(fe): beautify tabs in actor details (#3309)
* docs: use correct port in examples * fix(fe): remove stickiness of headers * fix(fe): make changelog non blocking resource * fix(fe): beautify tabs in actor details
1 parent a30948b commit a28b82b

File tree

3 files changed

+101
-82
lines changed

3 files changed

+101
-82
lines changed

‎frontend/src/components/actors/actor-status-label.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ export const ACTOR_STATUS_LABEL_MAP = {
1313
} satisfies Record<ActorStatus, string>;
1414

1515
export const ActorStatusLabel = ({ status }: { status?: ActorStatus }) => {
16-
return <span>{status ? ACTOR_STATUS_LABEL_MAP[status] : "Unknown"}</span>;
16+
return (
17+
<span data-slot="status-label">
18+
{status ? ACTOR_STATUS_LABEL_MAP[status] : "Unknown"}
19+
</span>
20+
);
1721
};
1822

1923
export const QueriedActorStatusLabel = ({ actorId }: { actorId: ActorId }) => {

‎frontend/src/components/actors/actors-actor-details.tsx‎

Lines changed: 90 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { memo, type ReactNode, Suspense } from "react";
44
import {
55
cn,
66
Flex,
7+
ScrollArea,
78
Tabs,
89
TabsContent,
910
TabsList,
@@ -52,7 +53,7 @@ export const ActorsActorDetails = memo(
5253
return (
5354
<GuardConnectableInspector actorId={actorId}>
5455
<ActorDetailsSettingsProvider>
55-
<div className="flex flex-col h-full flex-1">
56+
<div className="flex flex-col h-full flex-1 @container/actor">
5657
<ActorTabs
5758
features={features}
5859
actorId={actorId}
@@ -133,90 +134,98 @@ export function ActorTabs({
133134
value={value}
134135
onValueChange={onTabChange}
135136
defaultValue={value}
136-
className={cn(className, "flex-1 min-h-0 min-w-0 flex flex-col ")}
137+
className={cn(className, "flex-1 min-h-0 min-w-0 flex flex-col")}
137138
>
138139
<div className="flex justify-between items-center border-b h-[45px]">
139-
<div className="flex flex-1 items-center h-full w-full ">
140-
<TabsList className="overflow-auto border-none h-full items-end">
141-
{supportsState ? (
142-
<TabsTrigger
143-
disabled={disabled}
144-
value="state"
145-
className="text-xs px-3 py-1 pb-2"
140+
<ScrollArea
141+
className="h-full items-end"
142+
viewportProps={{
143+
className: "h-full [&>div]:h-full",
144+
}}
145+
>
146+
<div className="flex flex-1 items-center h-full w-full relative">
147+
<TabsList className="border-none h-full items-safe-end w-full flex-nowrap mr-2.5">
148+
{supportsState ? (
149+
<TabsTrigger
150+
disabled={disabled}
151+
value="state"
152+
className="text-xs px-3 py-1 pb-3"
153+
>
154+
State
155+
</TabsTrigger>
156+
) : null}
157+
{supportsConnections ? (
158+
<TabsTrigger
159+
disabled={disabled}
160+
value="connections"
161+
className="text-xs px-3 py-1 pb-3"
162+
>
163+
Connections
164+
</TabsTrigger>
165+
) : null}
166+
{supportsEvents ? (
167+
<TabsTrigger
168+
disabled={disabled}
169+
value="events"
170+
className="text-xs px-3 py-1 pb-3"
171+
>
172+
Events
173+
</TabsTrigger>
174+
) : null}
175+
{supportsDatabase ? (
176+
<TabsTrigger
177+
disabled={disabled}
178+
value="database"
179+
className="text-xs px-3 py-1 pb-3"
180+
>
181+
Database
182+
</TabsTrigger>
183+
) : null}
184+
{supportsLogs ? (
185+
<TabsTrigger
186+
disabled={disabled}
187+
value="logs"
188+
className="text-xs px-3 py-1 pb-3"
189+
>
190+
Logs
191+
</TabsTrigger>
192+
) : null}
193+
{supportsMetadata ? (
194+
<TabsTrigger
195+
disabled={disabled}
196+
value="metadata"
197+
className="text-xs px-3 py-1 pb-3"
198+
>
199+
Metadata
200+
</TabsTrigger>
201+
) : null}
202+
{supportsMetrics ? (
203+
<TabsTrigger
204+
disabled={disabled}
205+
value="metrics"
206+
className="text-xs px-3 py-1 pb-3"
207+
>
208+
Metrics
209+
</TabsTrigger>
210+
) : null}
211+
</TabsList>
212+
{actorId ? (
213+
<Flex
214+
gap="2"
215+
justify="between"
216+
items="center"
217+
className="h-full pb-3 pt-2 pr-4 sticky right-0 bg-card"
146218
>
147-
State
148-
</TabsTrigger>
219+
<div className="w-4 bg-gradient-to-r from-transparent to-card absolute inset-y-0 left-0 -translate-x-full" />
220+
<QueriedActorStatus
221+
className="min-h-7 text-sm h-auto [&_[data-slot=status-label]]:hidden @lg:[&_[data-slot=status-label]]:inline-block"
222+
actorId={actorId}
223+
/>
224+
<ActorStopButton actorId={actorId} />
225+
</Flex>
149226
) : null}
150-
{supportsConnections ? (
151-
<TabsTrigger
152-
disabled={disabled}
153-
value="connections"
154-
className="text-xs px-3 py-1 pb-2"
155-
>
156-
Connections
157-
</TabsTrigger>
158-
) : null}
159-
{supportsEvents ? (
160-
<TabsTrigger
161-
disabled={disabled}
162-
value="events"
163-
className="text-xs px-3 py-1 pb-2"
164-
>
165-
Events
166-
</TabsTrigger>
167-
) : null}
168-
{supportsDatabase ? (
169-
<TabsTrigger
170-
disabled={disabled}
171-
value="database"
172-
className="text-xs px-3 py-1 pb-2"
173-
>
174-
Database
175-
</TabsTrigger>
176-
) : null}
177-
{supportsLogs ? (
178-
<TabsTrigger
179-
disabled={disabled}
180-
value="logs"
181-
className="text-xs px-3 py-1 pb-2"
182-
>
183-
Logs
184-
</TabsTrigger>
185-
) : null}
186-
{supportsMetadata ? (
187-
<TabsTrigger
188-
disabled={disabled}
189-
value="metadata"
190-
className="text-xs px-3 py-1 pb-2"
191-
>
192-
Metadata
193-
</TabsTrigger>
194-
) : null}
195-
{supportsMetrics ? (
196-
<TabsTrigger
197-
disabled={disabled}
198-
value="metrics"
199-
className="text-xs px-3 py-1 pb-2"
200-
>
201-
Metrics
202-
</TabsTrigger>
203-
) : null}
204-
</TabsList>
205-
{actorId ? (
206-
<Flex
207-
gap="2"
208-
justify="between"
209-
items="center"
210-
className="h-[36px] pb-3 pt-2 pr-4"
211-
>
212-
<QueriedActorStatus
213-
className="text-sm h-auto"
214-
actorId={actorId}
215-
/>
216-
<ActorStopButton actorId={actorId} />
217-
</Flex>
218-
) : null}
219-
</div>
227+
</div>
228+
</ScrollArea>
220229
</div>
221230
{actorId ? (
222231
<>

‎frontend/src/components/tailwind-base.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,12 @@ const config = {
183183
".justify-safe-center": {
184184
"justify-content": "safe center",
185185
},
186+
".items-safe-start": {
187+
"align-items": "safe start",
188+
},
189+
".items-safe-end": {
190+
"align-items": "safe end",
191+
},
186192
});
187193
}),
188194
],

0 commit comments

Comments
 (0)