Align tags in search to right

Author: Ives van Hoorne

src/app/components/sandbox/Tags/index.js

@@ -11,15 +11,17 @@ const TagContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  ${props => props.align === 'right' && `justify-content: flex-end;`};
 `;
 
 type Props = {
+  align: 'right' | 'left',
   tags: Array<string>,
   removeTag: ?(id: string, tag: string) => void,
 };
 
-export default ({ tags, removeTag, ...props }: Props) =>
-  <TagContainer {...props}>
+export default ({ tags, removeTag, align, ...props }: Props) =>
+  <TagContainer align={align || 'left'} {...props}>
     {tags.sort().map(tag =>
       <Margin key={tag} vertical={0.5} horizontal={0.25}>
         <Tag removeTag={removeTag} tag={tag} />

src/app/pages/Search/SandboxCard/index.js

@@ -56,7 +56,7 @@ const Description = styled.p`
 
 const TagContainer = styled.div`
   font-size: .75rem;
-  max-width: 30%;
+  width: 30%;
 `;
 
 type Props = {
@@ -93,6 +93,7 @@ export default ({ hit }: Props) =>
         </Title>
         <TagContainer>
           <Tags
+            align="right"
             style={{ margin: 0, marginTop: -2 }}
             tags={(hit.tags || []).filter(tag => tag.length < 20)}
           />