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

fix(app): accordion styles

Browse Source
This commit is contained in:
Adam
2026-02-19 08:44:17 -06:00
parent 8ebdbe0ea2
commit 338393c016
7 changed files with 455 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/ui/src/components/accordion.css
View File

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
gap: 0px;
align-self: stretch;
[data-slot="accordion-item"] {
@@ -11,7 +11,11 @@
flex-direction: column;
align-items: flex-start;
align-self: stretch;
overflow: clip;
overflow: visible;
& + [data-slot="accordion-item"] {
margin-top: -1px;
}
[data-slot="accordion-header"] {
width: 100%;
@@ -31,9 +35,10 @@
cursor: default;
user-select: none;
background-color: var(--surface-base);
background-color: var(--background-stronger);
border: 1px solid var(--border-weak-base);
border-radius: var(--radius-md);
border-radius: 0;
box-shadow: none;
overflow: clip;
color: var(--text-strong);
transition: background-color 0.15s ease;
@@ -47,7 +52,10 @@
letter-spacing: var(--letter-spacing-normal);
&:hover {
background-color: var(--surface-base);
background-color: var(--surface-base-hover);
}
&:active {
background-color: var(--surface-base-active);
}
&:focus-visible {
outline: none;
@@ -58,23 +66,40 @@
}
}
&[data-expanded] {
[data-slot="accordion-trigger"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&:first-child {
[data-slot="accordion-header"] [data-slot="accordion-trigger"] {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
}
&:last-child:not([data-expanded]) {
[data-slot="accordion-header"] [data-slot="accordion-trigger"] {
border-bottom-left-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
}
&[data-expanded] {
[data-slot="accordion-content"] {
border: 1px solid var(--border-weak-base);
border-top: none;
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
border-top: 0;
background-color: var(--background-stronger);
}
}
&:last-child[data-expanded] {
[data-slot="accordion-content"] {
border-bottom-left-radius: var(--radius-lg);
border-bottom-right-radius: var(--radius-lg);
}
}
[data-slot="accordion-content"] {
overflow: hidden;
width: 100%;
border: 0;
background-color: transparent;
}
}
}

1
packages/ui/src/components/message-part.css
View File

@@ -1288,7 +1288,6 @@
}
[data-component="apply-patch-file-diff"] {
border-top: 1px solid var(--border-weaker-base);
max-height: 420px;
overflow-y: auto;
scrollbar-width: none;

64
packages/ui/src/components/session-review.css
View File

@@ -1,7 +1,7 @@
[data-component="session-review"] {
display: flex;
flex-direction: column;
gap: 8px;
gap: 0px;
height: 100%;
overflow-y: auto;
scrollbar-width: none;
@@ -19,7 +19,8 @@
top: 0;
z-index: 20;
background-color: var(--background-stronger);
height: 32px;
height: 40px;
padding-bottom: 8px;
flex-shrink: 0;
display: flex;
justify-content: space-between;
@@ -57,63 +58,7 @@
}
[data-component="sticky-accordion-header"] {
top: 40px;
}
[data-component="sticky-accordion-header"][data-expanded]::before,
[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before {
top: -40px;
}
[data-slot="session-review-diffs-group"] {
background-color: var(--background-stronger);
border-radius: var(--radius-lg);
border: 1px solid var(--border-weak-base);
overflow: clip;
[data-component="accordion"] {
gap: 0;
}
[data-component="accordion"] [data-slot="accordion-item"] {
overflow: visible;
}
[data-component="accordion"]
[data-slot="accordion-item"]
[data-slot="accordion-header"]
[data-slot="accordion-trigger"] {
border: 0;
border-radius: 0;
box-shadow: none;
background-color: transparent;
&:hover {
background-color: var(--surface-base-hover);
}
&:active {
background-color: var(--surface-base-active);
}
}
[data-component="accordion"]
[data-slot="accordion-item"]
+ [data-slot="accordion-item"]
[data-slot="accordion-header"]
[data-slot="accordion-trigger"] {
border-top: 1px solid var(--border-weak-base);
}
[data-component="accordion"] [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
border: 0;
border-top: 1px solid var(--border-weak-base);
border-radius: 0;
}
[data-component="sticky-accordion-header"][data-expanded]::before,
[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before {
top: 0;
--sticky-accordion-top: 40px;
}
[data-slot="session-review-accordion-item"][data-selected]
@@ -121,7 +66,6 @@
[data-slot="accordion-trigger"] {
background-color: var(--surface-base-active);
}
}
[data-slot="accordion-item"] {
[data-slot="accordion-content"] {

2
packages/ui/src/components/session-review.tsx
View File

@@ -320,7 +320,6 @@ export const SessionReview = (props: SessionReviewProps) => {
</div>
<div data-slot="session-review-container" class={props.classes?.container}>
<Show when={hasDiffs()} fallback={props.empty}>
<div data-slot="session-review-diffs-group">
<Accordion multiple value={open()} onChange={handleChange}>
<For each={props.diffs}>
{(diff) => {
@@ -708,7 +707,6 @@ export const SessionReview = (props: SessionReviewProps) => {
}}
</For>
</Accordion>
</div>
</Show>
</div>
</div>

43
packages/ui/src/components/session-turn.css
View File

@@ -129,49 +129,6 @@
flex-direction: column;
}
[data-slot="session-turn-diffs-group"] {
background-color: var(--background-stronger);
border-radius: var(--radius-lg);
border: 1px solid var(--border-weak-base);
overflow: clip;
[data-component="accordion"] {
gap: 0;
}
[data-component="accordion"]
[data-slot="accordion-item"]
[data-slot="accordion-header"]
[data-slot="accordion-trigger"] {
border: 0;
border-radius: 0;
box-shadow: none;
background-color: transparent;
&:hover {
background-color: var(--surface-base-hover);
}
&:active {
background-color: var(--surface-base-active);
}
}
[data-component="accordion"]
[data-slot="accordion-item"]
+ [data-slot="accordion-item"]
[data-slot="accordion-header"]
[data-slot="accordion-trigger"] {
border-top: 1px solid var(--border-weak-base);
}
[data-component="accordion"] [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
border: 0;
border-top: 1px solid var(--border-weak-base);
border-radius: 0;
}
}
[data-slot="session-turn-diff-trigger"] {
display: flex;
align-items: center;

2
packages/ui/src/components/session-turn.tsx
View File

@@ -315,7 +315,6 @@ export function SessionTurn(
<Collapsible.Content>
<Show when={open()}>
<div data-component="session-turn-diffs-content">
<div data-slot="session-turn-diffs-group">
<Accordion
multiple
value={expanded()}
@@ -387,7 +386,6 @@ export function SessionTurn(
</For>
</Accordion>
</div>
</div>
</Show>
</Collapsible.Content>
</Collapsible>

16
packages/ui/src/components/sticky-accordion-header.css
View File

@@ -1,18 +1,14 @@
[data-component="sticky-accordion-header"] {
--sticky-accordion-top: 0px;
position: sticky;
top: 0px;
top: var(--sticky-accordion-top);
}
[data-slot="accordion-item"]:first-child [data-component="sticky-accordion-header"] {
background-color: var(--background-base);
}
[data-component="sticky-accordion-header"][data-expanded],
[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"] {
z-index: 10;
}
[data-component="sticky-accordion-header"][data-expanded]::before,
[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before {
content: "";
z-index: -10;
position: absolute;
inset: 0;
background-color: var(--background-stronger);
}