(fix): search option text shrinking in autocomplete

zubhub_frontend/zubhub/src/assets/js/styles/components/autocomplete/optionStyles.js

@@ -1,50 +1,74 @@
 const styles = theme => ({
  option: {
  display: 'flex',
- flexFlow: 'row nowrap',
+ flexFlow: 'row',
  alignItems: 'center',
- justifyContent: 'space-between',
+ justifyContent: 'flex-start',
+ gap: '8px',
  width: '100%',
  height: '100%',
- margin: '-10px -15px',
- padding: '10px 15px',
+ maxHeight: '54px',
  textDecoration: 'none',
  color: 'black',
  },
  infoWrapper: {
  display: 'flex',
- flexFlow: 'row nowrap',
- alignItems: 'center',
- maxWidth: '50%',
+ flexFlow: 'column',
+ flexGrow: 1,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ alignItems: 'flex-start',
+ justifyContent: 'space-between',
  },
  optionTitleWrapper: {
- flex: '1 1 max-content',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
+ maxWidth: '100%',
+ [theme.breakpoints.down('497')]: {
+ display: '-webkit-box',
+ '-webkit-line-clamp': 2,
+ '-webkit-box-orient': 'vertical',
+ lineHeight: '1.2em'
+ },
  },
  optionTitle: {
  display: 'inline',
  fontFamily: 'inherit',
+ textOverflow: 'ellipsis',
+ [theme.breakpoints.down('497')]: {
+ fontSize: '14px',
+ textWrap: 'wrap',
+ },
  },
  shortInfo: {
  fontSize: '12px',
  color: 'gray',
- marginLeft: '10px',
+ display: '-webkit-box',
+ '-webkit-line-clamp': 1,
+ '-webkit-box-orient': 'vertical',
  },
  optionImageWrapper: {
  display: 'flex',
- flexFlow: 'row nowrap',
+ flexShrink: 0,
  justifyContent: 'center',
  alignItems: 'center',
  height: '40px',
  width: '40px',
  overflow: 'hidden',
- backgroundColor: 'black',
+ borderRadius: '5px',
+ [theme.breakpoints.down('497')]: {
+ width: '54px',
+ height: '54px',
+ },
  },
  optionImage: {
+ width: '40px',
  height: '40px',
- backgroundColor: 'white',
+ objectFit: 'cover',
+ [theme.breakpoints.down('497')]: {
+ width: '54px',
+ height: '54px',
+ },
  },
 });
 

zubhub_frontend/zubhub/src/components/Navbar/Navbar.jsx

@@ -113,7 +113,6 @@ function PageWrapper(props) {
  } else if (searchType === SearchType.PROJECTS) {
  completions = await api.autocompleteProjects({ query, token });
  completions = completions
- .filter(c=>( c.creator.id === props.auth.id && c.publish.type !== 1 ))
  .map(({ id, title, creator, images }) => ({
  title,
  shortInfo: creator.username,

zubhub_frontend/zubhub/src/components/autocomplete/Option.jsx

@@ -30,12 +30,6 @@ const Option = ({ option, inputValue, onOptionClick }) => {
  className={classes.option}
  href={option.link}
  >
- <div className={classes.infoWrapper}>
- <span className={classes.optionTitleWrapper}>{title}</span>
- {option.shortInfo && (
- <span className={classes.shortInfo}>{option.shortInfo}</span>
- )}
- </div>
  {option.image && (
  <div className={classes.optionImageWrapper}>
  <img
@@ -45,6 +39,12 @@ const Option = ({ option, inputValue, onOptionClick }) => {
  />
  </div>
  )}
+ <div className={classes.infoWrapper}>
+ <span className={classes.optionTitleWrapper}>{title}</span>
+ {option.shortInfo && (
+ <span className={classes.shortInfo}>{option.shortInfo}</span>
+ )}
+ </div>
  </OptionWrap>
  );
 };