Improved user page stash display on narrow pages.

assets/components/users/stash.vue

@@ -130,6 +130,16 @@ export default {
 	flex-grow: 1;
 	display: inline-block;
 	text-decoration: none;
+	overflow: hidden;
+}
+
+.stash-name {
+	padding: .5rem;
+	margin: 0;
+	color: var(--shadow-strong);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .stash-public {
@@ -144,12 +154,6 @@ export default {
 	}
 }
 
-.stash-name {
-	padding: .5rem;
-	margin: 0;
-	color: var(--shadow-strong);
-}
-
 .stash-actors,
 .stash-scenes {
 	display: flex;

assets/components/users/user.vue

@@ -17,6 +17,7 @@
 				<li
 					v-for="stash in user.stashes"
 					:key="stash.id"
+					class="stashes-stash"
 				>
 					<Stash
 						:stash="stash"
@@ -27,7 +28,7 @@
 
 				<li
 					v-if="isMe"
-					class="stashes-add"
+					class="stashes-stash stashes-add"
 					@click="showAddStash = true"
 				>
 					<Icon icon="plus2" />
@@ -118,6 +119,10 @@ export default {
 	color: var(--primary);
 }
 
+.stashes-stash {
+	min-width: 0;
+}
+
 .stashes-add {
 	height: 100%;
 	display: flex;