Some last CSS fixes

app/lib/components/FileSharing/SharedFilesList.jsx

@@ -13,14 +13,21 @@ class SharedFilesList extends Component
 {
 	render()
 	{
+		const { sharing } = this.props;
+
 		return (
 			<div className='shared-files'>
-				{this.props.sharing.map((entry, i) => (
-					<FileEntry
-						data={entry}
-						key={i}
-					/>
-				))}
+				{ sharing.length > 0 ?
+					sharing.map((entry, i) => (
+						<FileEntry
+							data={entry}
+							key={i}
+						/>
+					))
+					:<div className='empty'>
+						<p>No one has shared files yet...</p>
+					</div>
+				}
 			</div>
 		);
 	}

app/stylus/components/FileSharing.styl

@@ -20,7 +20,7 @@
 
 	> .shared-files {
 		flex-grow: 1;
-		overflow-y: scroll;
+		overflow-y: auto;
 		margin-top: 0.5rem;
 
 		> .file-entry {
@@ -75,6 +75,23 @@
 				}
 			}
 		}
+
+		> .empty {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			padding-top: 20vmin;
+
+			> p {
+				padding: 6px 12px;
+				border-radius: 6px;
+				user-select: none;
+				pointer-events: none;
+				font-size: 20px;
+				color: #000;
+			}
+		}
 	}
 }
 

app/stylus/components/ParticipantList.styl

@@ -1,9 +1,10 @@
 [data-component='ParticipantList'] {
 	width: 100%;
+	overflow-y: auto;
+	padding: 6px;
 
 	> .list {
-		box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), \
-					0 4px 20px 0 rgba(0,0,0,0.19);
+		box-shadow: 0 2px 5px 2px rgba(0,0,0,0.2);
 		background-color: #fff;
 
 		> .list-header {
@@ -22,7 +23,7 @@
 			}
 
 			&.selected {
-				border-bottom-color: #377EFF;
+				background-color: #377eff;
 			}
 		}
 	}

app/stylus/components/ToolArea.styl

@@ -202,5 +202,6 @@
 		padding: 0.5rem;
 		display: flex;
 		flex-direction: column;
+		min-height: 0;
 	}
 }