Improved responsiveness of stash header.

assets/components/stashes/stash.vue

@@ -4,14 +4,17 @@
 		class="stash content"
 	>
 		<div class="stash-header">
-			<h2 class="stash-name">{{ stash.name }}</h2>
+			<h2
+				:title="stash.name"
+				class="stash-name"
+			>{{ stash.name }}</h2>
 
 			<span class="header-section">
 				<router-link
 					v-if="stash.user"
 					:to="{ name: 'user', params: { username: stash.user.username } }"
 					class="header-item stash-username nolink"
-				><Icon icon="user3" />{{ stash.user.username }}</router-link>
+				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></router-link>
 
 				<label
 					v-if="isMine"
@@ -133,6 +136,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'breakpoints';
+
 .stash-header {
 	display: flex;
 	justify-content: space-between;
@@ -153,12 +158,29 @@ export default {
 	align-items: center;
 }
 
-.header-item:not(:last-child) {
-	margin: 0 1rem 0 0;
+.stash-name,
+.stash-username {
+	box-sizing: border-box;
+	padding: .5rem 1rem;
+	font-weight: bold;
+}
+
+.stash-username {
+	display: inline-flex;
+	align-items: center;
+	margin: 0 .5rem 0 0;
+}
+
+.stash-name {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin: 0;
 }
 
 .stash-public {
 	cursor: pointer;
+	margin: 0 .5rem 0 0;
 
 	.icon {
 		margin: 0 .75rem 0 0;
@@ -177,15 +199,6 @@ export default {
 	}
 }
 
-.stash-name,
-.stash-username {
-	display: inline-flex;
-	align-items: center;
-	padding: .5rem 1rem;
-	margin: 0;
-	font-weight: bold;
-}
-
 .stash-section:not(:last-child) {
 	border-bottom: solid 1px var(--shadow-hint);
 }
@@ -205,4 +218,18 @@ export default {
 		grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
 	}
 }
+
+@media(max-width: $breakpoint-small) {
+	.stash-name {
+		font-size: 1.25rem;
+	}
+
+	.username-name {
+		display: none;
+	}
+
+	.stash-username {
+		margin: 0;
+	}
+}
 </style>