Preventing scene poster, stash header and bottom navigation overflow.

pages/stashes/@username/+Page.vue

@@ -22,7 +22,7 @@
 				<img
 					:src="stash.user.avatar"
 					class="avatar"
-				>{{ stash.user.username }}
+				><span class="userame ellipsis">{{ stash.user.username }}</span>
 			</a>
 		</div>
 
@@ -56,6 +56,7 @@ console.log(stash);
 	padding: .5rem 1rem;
 	color: var(--text-light);
 	background: var(--grey-dark-40);
+	flex-shrink: 0;
 }
 
 .title {
@@ -63,11 +64,13 @@ console.log(stash);
 	text-transform: capitalize;
 	display: flex;
 	align-items: center;
+	font-size: 1.2rem;
+	margin-right: 1rem;
 
 	.icon {
-		width: 1.5rem;
-		height: 1.5rem;
-		margin-right: 1rem;
+		width: 1.25rem;
+		height: 1.25rem;
+		margin-right: .75rem;
 		fill: var(--text-light);
 	}
 }
@@ -76,16 +79,32 @@ console.log(stash);
 	display: flex;
 	align-items: center;
 	font-weight: bold;
+	overflow: hidden;
 }
 
 .avatar {
 	width: 1.5rem;
 	height: 1.5rem;
-	margin-right: 1rem;
+	margin-right: .75rem;
 	border-radius: .25rem;
 }
 
 .scenes-container {
 	overflow-y: auto;
 }
+
+@media(--small-50) {
+	.title {
+		font-size: 1rem;
+
+		.icon {
+			width: 1rem;
+			height: 1rem;
+		}
+	}
+
+	.avatar {
+		display: none;
+	}
+}
 </style>