diff --git a/src/components/BackgroundJobsPanel/BackgroundJobsPanel.tsx b/src/components/BackgroundJobsPanel/BackgroundJobsPanel.tsx index 7444b5b6d9..6b59d604c8 100644 --- a/src/components/BackgroundJobsPanel/BackgroundJobsPanel.tsx +++ b/src/components/BackgroundJobsPanel/BackgroundJobsPanel.tsx @@ -153,9 +153,9 @@ const Job = styled.li<{ themes: Theme }>(({ themes }) => { const { pxToRem, space } = themes.size return css` display: flex; - align-items: flex-start; + align-items: center; flex-wrap: nowrap; - line-height: 1rem; + line-height: normal; :not(:first-child) { margin-top: ${pxToRem(space.XS)}; } @@ -163,6 +163,7 @@ const Job = styled.li<{ themes: Theme }>(({ themes }) => { }) const JobIconWrapper = styled.div` flex-shrink: 0; + line-height: 0; ` const JobName = styled(OmittableJobText)<{ themes: Theme }>(({ themes }) => { const { font, pxToRem, space } = themes.size diff --git a/src/components/BackgroundJobsPanel/JobIcon.tsx b/src/components/BackgroundJobsPanel/JobIcon.tsx index 3656d2554d..a7572071ba 100644 --- a/src/components/BackgroundJobsPanel/JobIcon.tsx +++ b/src/components/BackgroundJobsPanel/JobIcon.tsx @@ -12,7 +12,7 @@ export const JobIcon: FC = ({ status }) => { const name = getIconName(status) const color = useIconColor(status) - return + return } function getIconName(status: Status): ComponentProps['name'] { diff --git a/src/components/BackgroundJobsPanel/OmittableJobText.tsx b/src/components/BackgroundJobsPanel/OmittableJobText.tsx index 618a783265..005efa604b 100644 --- a/src/components/BackgroundJobsPanel/OmittableJobText.tsx +++ b/src/components/BackgroundJobsPanel/OmittableJobText.tsx @@ -35,6 +35,7 @@ const Wrapper = styled.div` overflow: hidden; ` const Tooltip = styled(LightTooltip)` + display: block; text-overflow: ellipsis; overflow: hidden; `