monadical/opencode
13
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(app): update status popover styling and positioning

Browse Source
This commit is contained in:
David Hill
2026-01-24 19:35:53 +00:00
parent 262084d7e6
commit 2c620e1742
2 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/app/src/components/status-popover.tsx
View File

@@ -138,7 +138,8 @@ export function StatusPopover() {
triggerAs={Button}
triggerProps={{
variant: "ghost",
class: "rounded-sm w-[75px] h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none",
class:
"rounded-sm w-[75px] h-[24px] py-1.5 pr-3 pl-2 gap-2 border-none shadow-none data-[expanded]:bg-surface-raised-base-active",
style: { scale: 1 },
}}
trigger={
@@ -154,8 +155,10 @@ export function StatusPopover() {
<span class="text-12-regular text-text-strong">Status</span>
</div>
}
class="[&_[data-slot=popover-body]]:p-0 w-[360px] max-w-[calc(100vw-40px)] mx-5 bg-transparent border-0 shadow-none rounded-xl"
gutter={12}
class="[&_[data-slot=popover-body]]:p-0 w-[360px] max-w-[calc(100vw-40px)] bg-transparent border-0 shadow-none rounded-xl"
gutter={6}
placement="bottom-end"
shift={-136}
>
<div
class="flex items-center gap-1 w-[360px] rounded-xl"
@@ -200,7 +203,7 @@ export function StatusPopover() {
<Tabs.Content value="servers">
<div class="flex flex-col px-2 pb-2">
<div class="flex flex-col p-2 bg-background-base rounded-sm min-h-14">
<div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
<For each={sortedServers()}>
{(url) => {
const isActive = () => url === server.url
@@ -210,7 +213,7 @@ export function StatusPopover() {
return (
<button
type="button"
class="flex items-center gap-2 w-full px-2 py-1 rounded-md transition-colors text-left"
class="flex items-center gap-2 w-full p-1.5 rounded-md transition-colors text-left"
classList={{
"opacity-50": isBlocked(),
"hover:bg-surface-raised-base-hover": !isBlocked(),
@@ -251,7 +254,7 @@ export function StatusPopover() {
<Button
variant="secondary"
class="mt-2 self-start"
class="mt-3 self-start h-8 px-3 py-1.5"
onClick={() => dialog.show(() => <DialogSelectServer />)}
>
Manage servers
@@ -262,12 +265,10 @@ export function StatusPopover() {
<Tabs.Content value="mcp">
<div class="flex flex-col px-2 pb-2">
<div class="flex flex-col p-2 bg-background-base rounded-sm min-h-14">
<div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
<Show
when={mcpItems().length > 0}
fallback={
<div class="text-14-regular text-text-weak text-center py-4">No MCP servers configured</div>
}
fallback={<div class="text-14-regular text-text-weak text-center">No MCP servers configured</div>}
>
<For each={mcpItems()}>
{(item) => {
@@ -308,13 +309,11 @@ export function StatusPopover() {
<Tabs.Content value="lsp">
<div class="flex flex-col px-2 pb-2">
<div class="flex flex-col p-2 bg-background-base rounded-sm min-h-14">
<div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
<Show
when={lspItems().length > 0}
fallback={
<div class="text-14-regular text-text-weak text-center py-4">
LSPs auto-detected from file types
</div>
<div class="text-14-regular text-text-weak text-center">LSPs auto-detected from file types</div>
}
>
<For each={lspItems()}>
@@ -338,11 +337,11 @@ export function StatusPopover() {
<Tabs.Content value="plugins">
<div class="flex flex-col px-2 pb-2">
<div class="flex flex-col p-2 bg-background-base rounded-sm min-h-14">
<div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
<Show
when={plugins().length > 0}
fallback={
<div class="text-14-regular text-text-weak text-center py-4">
<div class="text-14-regular text-text-weak text-center">
Plugins configured in{" "}
<code class="bg-surface-raised-base px-1.5 py-0.5 rounded-sm">opencode.json</code>
</div>

1
packages/ui/src/components/popover.tsx
View File

@@ -13,6 +13,7 @@ export interface PopoverProps<T extends ValidComponent = "div">
description?: JSXElement
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
style?: ComponentProps<"div">["style"]
portal?: boolean
}