| author |  maria <maria@kuuro.net> 2026-10-10 02:16:42-03:00 |
| committer |  GitHub <noreply@github.com> 2026-10-10 02:16:42-03:00 |
| log | c2a301b12af6e18148eb1d46123c4187f4bdb78e |
| tree | 00391f8e7ac5ababedc94d54c723183324c7d860 |
| parent | c572cb71d2711d8cdb4ff7e0ba88af5e9a23aa81 |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): nested corners follow their container's radius (#17695)
Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>4 files changed, 13 insertions(+), 3 deletions(-)
apps
web
src
components
- pierre-tree-theme.ts
apps/web/src/components/chat/ComposerBanner.tsx+10
| ... | @@ -165,6 +165,16 @@ function Root({ | ... | @@ -165,6 +165,16 @@ function Root({ |
| 165 | density === "comfortable" && "[--composer-banner-padding-block:--spacing(1.25)]", | 165 | density === "comfortable" && "[--composer-banner-padding-block:--spacing(1.25)]", |
| 166 | density === "spacious" && "px-3 [--composer-banner-padding-block:--spacing(3)]", | 166 | density === "spacious" && "px-3 [--composer-banner-padding-block:--spacing(3)]", |
| 167 | width === "content" ? "w-fit max-w-full flex-none" : "@container", | 167 | width === "content" ? "w-fit max-w-full flex-none" : "@container", |
| 168 | // The first row's last action sits in the banner's corner: its outer corner follows the | ||
| 169 | // banner's curve (2xl minus the 1 spacing inset), and floating banners curve below too. | ||
| 170 | // Actions may also arrive grouped in one wrapper element (usage-limit recovery). | ||
| 171 | "[&>[data-composer-banner-row]:first-child>[data-slot=composer-banner-actions]>[data-slot=button]:last-child]:rounded-se-xl", | ||
| 172 | "[&>[data-composer-banner-row]:first-child>[data-slot=composer-banner-actions]>:last-child>[data-slot=button]:last-of-type]:rounded-se-xl", | ||
| 173 | "[&>:first-child>[data-composer-banner-row]:first-child>[data-slot=composer-banner-actions]>[data-slot=button]:last-child]:rounded-se-xl", | ||
| 174 | placement === "floating" && [ | ||
| 175 | "[&>[data-composer-banner-row]:only-child>[data-slot=composer-banner-actions]>[data-slot=button]:last-child]:rounded-ee-xl", | ||
| 176 | "[&>[data-composer-banner-row]:only-child>[data-slot=composer-banner-actions]>:last-child>[data-slot=button]:last-of-type]:rounded-ee-xl", | ||
| 177 | ], | ||
| 168 | className, | 178 | className, |
| 169 | )} | 179 | )} |
| 170 | data-slot="composer-banner" | 180 | data-slot="composer-banner" |
apps/web/src/components/chat/ComposerCommandMenu.tsx+1-1
| ... | @@ -110,7 +110,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: { | ... | @@ -110,7 +110,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: { |
| 110 | > | 110 | > |
| 111 | <ComposerBanner.Surface | 111 | <ComposerBanner.Surface |
| 112 | ref={listRef} | 112 | ref={listRef} |
| 113 | className="flex min-h-0 w-full flex-col overflow-hidden pb-(--chat-composer-attachment-overlap) **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4" | 113 | className="flex min-h-0 w-full flex-col overflow-hidden pb-(--chat-composer-attachment-overlap) **:data-[slot=command-item]:rounded-lg **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4" |
| 114 | data-composer-command-drawer="true" | 114 | data-composer-command-drawer="true" |
| 115 | > | 115 | > |
| 116 | {props.items.length > 0 ? ( | 116 | {props.items.length > 0 ? ( |
apps/web/src/components/search/ProjectContentSearchDialog.tsx+1-1
| ... | @@ -173,7 +173,7 @@ function OpenContentSearchDialog(props: { | ... | @@ -173,7 +173,7 @@ function OpenContentSearchDialog(props: { |
| 173 | escapeLabel="Back" | 173 | escapeLabel="Back" |
| 174 | footerActionLabel="Open file" | 174 | footerActionLabel="Open file" |
| 175 | inputAccessory={ | 175 | inputAccessory={ |
| 176 | <div className="absolute inset-e-2.5 top-1/2 flex shrink-0 -translate-y-1/2 items-center gap-0.5 rounded-md border bg-muted/30 p-0.5"> | 176 | <div className="absolute inset-e-2.5 top-1/2 flex shrink-0 -translate-y-1/2 items-center gap-0.5 rounded-lg border bg-muted/30 p-0.5"> |
| 177 | <SearchOptionButton | 177 | <SearchOptionButton |
| 178 | active={caseSensitive} | 178 | active={caseSensitive} |
| 179 | disabled={!search.canReadFiles} | 179 | disabled={!search.canReadFiles} |
apps/web/src/pierre-tree-theme.ts+1-1
| ... | @@ -10,7 +10,7 @@ export const PIERRE_TREE_UNSAFE_CSS = ` | ... | @@ -10,7 +10,7 @@ export const PIERRE_TREE_UNSAFE_CSS = ` |
| 10 | --trees-font-family-override: var(--font-sans); | 10 | --trees-font-family-override: var(--font-sans); |
| 11 | --trees-font-size-override: 0.75rem; | 11 | --trees-font-size-override: 0.75rem; |
| 12 | } | 12 | } |
| 13 | button[data-type='item'] { border-radius: 5px; } | 13 | button[data-type='item'], button[data-type='item']::before { border-radius: var(--radius-md); } |
| 14 | svg[data-icon-name='t3-tree-icon-loading'] { opacity: 0.6; } | 14 | svg[data-icon-name='t3-tree-icon-loading'] { opacity: 0.6; } |
| 15 | @media (prefers-reduced-motion: no-preference) { | 15 | @media (prefers-reduced-motion: no-preference) { |
| 16 | svg[data-icon-name='t3-tree-icon-loading'] { animation: t3-tree-spin 1s linear infinite; } | 16 | svg[data-icon-name='t3-tree-icon-loading'] { animation: t3-tree-spin 1s linear infinite; } |