ref(bug reports): better search bar placeholder and email alignment (#58533)

static/app/components/feedback/feedbackSearch.tsx

@@ -2,6 +2,7 @@ import {CSSProperties} from 'react';
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
+import {t} from 'sentry/locale';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -13,7 +14,7 @@ interface Props {
   style?: CSSProperties;
 }
 
-export default function ReplaysSearch({className, style}: Props) {
+export default function FeedbackSearch({className, style}: Props) {
   const {selection} = usePageFilters();
   const {pathname, query} = useLocation();
   const organization = useOrganization();
@@ -21,6 +22,7 @@ export default function ReplaysSearch({className, style}: Props) {
   return (
     <SearchContainer className={className} style={style}>
       <ReplaySearchBar
+        placeholder={t('Search Feedback')}
         disabled
         organization={organization}
         pageFilters={selection}

static/app/components/feedback/list/feedbackListItem.tsx

@@ -71,9 +71,11 @@ const FeedbackListItem = forwardRef<HTMLDivElement, Props>(
           <Flex column style={{gridArea: 'right'}}>
             {''}
           </Flex>
-          <strong style={{gridArea: 'user'}}>
-            <FeedbackItemUsername feedbackItem={feedbackItem} detailDisplay={false} />
-          </strong>
+          <TextOverflow>
+            <span style={{gridArea: 'user'}}>
+              <FeedbackItemUsername feedbackItem={feedbackItem} detailDisplay={false} />
+            </span>
+          </TextOverflow>
           <span style={{gridArea: 'time'}}>
             <TimeSince date={feedbackItem.timestamp} />
           </span>

static/app/views/replays/list/replaySearchBar.tsx

@@ -72,10 +72,11 @@ function getSupportedTags(supportedTags: TagCollection) {
 type Props = React.ComponentProps<typeof SmartSearchBar> & {
   organization: Organization;
   pageFilters: PageFilters;
+  placeholder?: string;
 };
 
 function ReplaySearchBar(props: Props) {
-  const {organization, pageFilters} = props;
+  const {organization, pageFilters, placeholder} = props;
   const api = useApi();
   const projectIdStrings = pageFilters.projects?.map(String);
   const tags = useTags();
@@ -113,9 +114,10 @@ function ReplaySearchBar(props: Props) {
       {...props}
       onGetTagValues={getTagValues}
       supportedTags={getSupportedTags(tags)}
-      placeholder={t(
-        'Search for users, duration, clicked elements, count_errors, and more'
-      )}
+      placeholder={
+        placeholder ??
+        t('Search for users, duration, clicked elements, count_errors, and more')
+      }
       prepareQuery={prepareQuery}
       maxQueryLength={MAX_QUERY_LENGTH}
       searchSource="replay_index"