Changed more tags button design.

assets/components/releases/tags.vue

@@ -24,25 +24,29 @@
 			v-if="overflowing && !expanded"
 			class="tags-more"
 			@click="expanded = true"
-		>More tags</button>
+		>more tags</button>
 
 		<button
 			v-if="expanded"
 			class="tags-more"
 			@click="expanded = false"
-		>Fewer tags</button>
+		>fewer tags</button>
 	</div>
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 function updateOverflowing() {
-	const containerBoundaries = this.$refs.tags.getBoundingClientRect();
-	const containerBottom = containerBoundaries.top + containerBoundaries.height;
+	nextTick(() => {
+		const containerBoundaries = this.$refs.tags.getBoundingClientRect();
+		const containerBottom = containerBoundaries.top + containerBoundaries.height;
 
-	this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
-		const tagBoundaries = tag.getBoundingClientRect();
+		this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
+			const tagBoundaries = tag.getBoundingClientRect();
 
-		return tagBoundaries.top > containerBottom;
+			return tagBoundaries.top > containerBottom;
+		});
 	});
 }
 
@@ -68,6 +72,9 @@ export default {
 			expanded: false,
 		};
 	},
+	watch: {
+		expanded: updateOverflowing,
+	},
 	mounted,
 	beforeUnmount,
 	methods: {
@@ -88,6 +95,7 @@ export default {
 .tags {
 	max-height: 4.6rem;
 	padding: 2px 1rem 0 1rem;
+	text-align: left;
 	overflow: hidden;
 
 	&.expanded {
@@ -111,19 +119,18 @@ export default {
 }
 
 .tags-more {
-	width: 100%;
-	background: none;
+	background: var(--shadow-touch);
 	padding: .5rem 1rem;
-	border: solid 1px var(--shadow-hint);
-	border-left: none;
-	border-right: none;
-	margin: .25rem 0 .5rem 0;
+	border: none;
+	margin: .25rem 0 .5rem 1rem;
 	color: var(--shadow);
-	font-size: .9rem;
+	font-size: .8rem;
+	font-weight: bold;
 
 	&:hover {
-		cursor: pointer;
+		background: var(--shadow-hint);
 		color: var(--shadow-strong);
+		cursor: pointer;
 	}
 }
 </style>

assets/css/_theme.scss

@@ -61,6 +61,7 @@ $breakpoint4: 1500px;
     --shadow-modest: rgba(0, 0, 0, .3);
     --shadow-weak: rgba(0, 0, 0, .2);
     --shadow-hint: rgba(0, 0, 0, .1);
+    --shadow-touch: rgba(0, 0, 0, .05);
 
     --highlight: rgba(255, 255, 255, .5);
     --highlight-extreme: rgba(255, 255, 255, .9);
@@ -92,6 +93,7 @@ $breakpoint4: 1500px;
     --shadow-modest: rgba(255, 255, 255, .3);
     --shadow-weak: rgba(255, 255, 255, .2);
     --shadow-hint: rgba(255, 255, 255, .075);
+    --shadow-touch: rgba(255, 255, 255, .05);
 
     --highlight: rgba(0, 0, 0, .5);
     --highlight-extreme: rgba(0, 0, 0, .9);