fix up student picker list when the name is really long

hawkrives · Oct 7, 2018 · 05fd78e · 05fd78e
1 parent e72b3df
commit 05fd78e
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/modules/gob-web/modules/student-picker/student-list-item.js b/modules/gob-web/modules/student-picker/student-list-item.js
@@ -44,10 +44,14 @@ const DeleteButton = styled(FlatButton)`
 const GoIcon = styled(Icon)`
 	margin-left: 1em;
 	margin-right: 0.5em;
+	flex-shrink: 0;
 `
 
 const StudentName = styled.div`
 	line-height: 1.5;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 `
 
 const StudentAreas = styled.div`
@@ -69,6 +73,7 @@ const AreaName = styled.span`
 const StudentInfo = styled.span`
 	flex: 1;
 	margin-left: 0.5em;
+	max-width: 90%;
 `
 
 const ListItemLink = styled(Link)`
@@ -81,6 +86,7 @@ const ListItemLink = styled(Link)`
 	flex: 1;
 	display: flex;
 	align-items: center;
+	width: 100%;
 
 	padding: 0.75em 0.5em;
 	position: relative;