fix overflow in authors filter dropdown

Author: ankormoreankor

packages/ui/src/components/filters/filter-box-wrapper.tsx

@@ -52,13 +52,15 @@ const FilterBoxWrapper = ({
     >
       <DropdownMenu.Trigger asChild>
         <Button variant="secondary" size="sm" className="px-2.5 py-1.5">
-          <div className="flex items-center gap-x-1.5 text-1">
-            <Text as="span" color="foreground-1">
+          <Layout.Grid align="center" columns="auto 1fr" gapX="2xs">
+            <Text as="span" color="foreground-1" truncate>
               {filterLabel}
               {!!valueLabel && ': '}
             </Text>
-            <Text as="span">{valueLabel}</Text>
-          </div>
+            <Text as="span" truncate>
+              {valueLabel}
+            </Text>
+          </Layout.Grid>
           <IconV2 className="chevron-down text-icons-1" name="nav-arrow-down" size="2xs" />
         </Button>
       </DropdownMenu.Trigger>

packages/ui/src/views/repo/pull-request/pull-request-list-page.tsx

@@ -126,12 +126,12 @@ const PullRequestListPage: FC<PullRequestPageProps> = ({
     email
   }: Pick<PrincipalType, 'display_name' | 'email'>): React.ReactNode =>
     display_name !== email ? (
-      <Layout.Horizontal gap="3xs" align="center" className="flex-wrap">
-        <Text wrap="nowrap">{display_name}</Text>
-        <Text color="foreground-3" variant="body-single-line-normal" lineClamp={1}>
+      <Layout.Grid gap="3xs" align="center" columns="auto auto">
+        <Text truncate>{display_name}</Text>
+        <Text color="foreground-3" variant="body-single-line-normal" truncate>
           ({email})
         </Text>
-      </Layout.Horizontal>
+      </Layout.Grid>
     ) : (
       <Text lineClamp={1}>{display_name}</Text>
     )