summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/ui/src')
-rw-r--r--packages/ui/src/components/dialog.css3
-rw-r--r--packages/ui/src/components/select-dialog.css9
-rw-r--r--packages/ui/src/components/select-dialog.tsx2
3 files changed, 11 insertions, 3 deletions
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index 267c891f3..1c7cd4f41 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -16,6 +16,7 @@
[data-component="dialog"] {
position: fixed;
inset: 0;
+ margin-left: var(--dialog-left-margin);
z-index: 50;
display: flex;
align-items: center;
@@ -24,7 +25,7 @@
[data-slot="dialog-container"] {
position: relative;
z-index: 50;
- width: min(calc(100vw - 16px), 624px);
+ width: min(calc(100vw - 16px), 480px);
height: min(calc(100vh - 16px), 512px);
display: flex;
flex-direction: column;
diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css
index 696f68bf9..83085e082 100644
--- a/packages/ui/src/components/select-dialog.css
+++ b/packages/ui/src/components/select-dialog.css
@@ -121,12 +121,19 @@
line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal);
+ [data-slot="select-dialog-item-selected-icon"] {
+ display: none;
+ color: var(--icon-strong-base);
+ }
+
&[data-active="true"] {
border-radius: var(--radius-md);
background: var(--surface-raised-base-hover);
}
&[data-selected="true"] {
- background: var(--surface-raised-base-hover);
+ [data-slot="select-dialog-item-selected-icon"] {
+ display: block;
+ }
}
}
}
diff --git a/packages/ui/src/components/select-dialog.tsx b/packages/ui/src/components/select-dialog.tsx
index 381c5f6fc..90c269eea 100644
--- a/packages/ui/src/components/select-dialog.tsx
+++ b/packages/ui/src/components/select-dialog.tsx
@@ -153,7 +153,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
}}
>
{others.children(item)}
- <Icon name="check-small" size="small" />
+ <Icon data-slot="select-dialog-item-selected-icon" name="check-small" />
</button>
)}
</For>