فهرست منبع

fix(ui): stabilize dropdown menu item layout

David Hill 1 ماه پیش
والد
کامیت
23980fb62d
2فایلهای تغییر یافته به همراه10 افزوده شده و 1 حذف شده
  1. 1 1
      packages/app/src/components/session/session-header.tsx
  2. 9 0
      packages/ui/src/components/dropdown-menu.css

+ 1 - 1
packages/app/src/components/session/session-header.tsx

@@ -364,7 +364,7 @@ export function SessionHeader() {
                             aria-label={language.t("session.header.open.menu")}
                             aria-label={language.t("session.header.open.menu")}
                           />
                           />
                           <DropdownMenu.Portal>
                           <DropdownMenu.Portal>
-                            <DropdownMenu.Content>
+                            <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1">
                               <DropdownMenu.Group>
                               <DropdownMenu.Group>
                                 <DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
                                 <DropdownMenu.GroupLabel>{language.t("session.header.openIn")}</DropdownMenu.GroupLabel>
                                 <DropdownMenu.RadioGroup
                                 <DropdownMenu.RadioGroup

+ 9 - 0
packages/ui/src/components/dropdown-menu.css

@@ -58,6 +58,11 @@
     }
     }
   }
   }
 
 
+  [data-slot="dropdown-menu-checkbox-item"],
+  [data-slot="dropdown-menu-radio-item"] {
+    padding-right: 28px;
+  }
+
   [data-slot="dropdown-menu-sub-trigger"] {
   [data-slot="dropdown-menu-sub-trigger"] {
     &[data-expanded] {
     &[data-expanded] {
       background: var(--surface-raised-base-hover);
       background: var(--surface-raised-base-hover);
@@ -70,6 +75,10 @@
     justify-content: center;
     justify-content: center;
     width: 16px;
     width: 16px;
     height: 16px;
     height: 16px;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
   }
   }
 
 
   [data-slot="dropdown-menu-item-label"] {
   [data-slot="dropdown-menu-item-label"] {