Minor UI fixes

materialious/electron/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.11.0",
+	"version": "1.11.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.11.0",
+			"version": "1.11.1",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",

materialious/src/lib/components/watch/LikesDislikes.svelte

@@ -9,19 +9,17 @@
 </script>
 
 {#await returnYTDislikes then returnYTDislikes}
-	<nav class="no-space">
-		{#if returnYTDislikes}
-			<button style="cursor: default;margin-right: 0.5em;" class="border">
-				<i class="small">thumb_up</i>
-				<span>{cleanNumber(returnYTDislikes.likes)}</span>
-				<i class="small" style="margin-left: 0.5em;">thumb_down_alt</i>
-				<span>{cleanNumber(returnYTDislikes.dislikes)}</span>
-			</button>
-		{:else}
-			<button style="cursor: default;margin-right: 0.5em;" class="border">
-				<i class="small">thumb_up</i>
-				<span>{cleanNumber(video.likeCount)}</span>
-			</button>
-		{/if}
-	</nav>
+	{#if returnYTDislikes}
+		<button style="cursor: default;margin-left: 0;" class="border">
+			<i class="small">thumb_up</i>
+			<span>{cleanNumber(returnYTDislikes.likes)}</span>
+			<i class="small" style="margin-left: 0.5em;">thumb_down_alt</i>
+			<span>{cleanNumber(returnYTDislikes.dislikes)}</span>
+		</button>
+	{:else}
+		<button style="cursor: default;margin-left: 0;" class="border">
+			<i class="small">thumb_up</i>
+			<span>{cleanNumber(video.likeCount)}</span>
+		</button>
+	{/if}
 {/await}

materialious/src/lib/css/global.css

@@ -29,6 +29,10 @@ button,
 	margin: 1em 0;
 }
 
+.video-actions button {
+	margin: 0.3em;
+}
+
 nav.top {
 	padding-top: calc(var(--safe-area-inset-top) + 1rem) !important;
 	padding-bottom: 1em;

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -366,13 +366,13 @@
 		<h5>{letterCase(data.video.title)}</h5>
 
 		<div class="grid no-padding">
-			<div class="s12 m12 l5">
+			<div class="s12 m12 l5" style="height: 100%;display: flex;align-items: center;">
 				<Author video={data.video} bind:subscribed />
 			</div>
 			<div class="s12 m12 l7 video-actions">
-				<LikesDislikes video={data.video} returnYTDislikes={data.streamed.returnYTDislikes} />
-
 				<div>
+					<LikesDislikes video={data.video} returnYTDislikes={data.streamed.returnYTDislikes} />
+
 					<button onclick={toggleTheatreMode} class="m l" class:border={!theatreMode}>
 						<i>width_wide</i>
 						<div class="tooltip">{$_('player.theatreMode')}</div>
@@ -438,7 +438,7 @@
 							</menu>
 						</button>
 					{:else}
-						<button disabled class="border no-margin">
+						<button disabled class="border">
 							<i>add</i>
 							<div class="tooltip">
 								{#if $authStore}
@@ -676,27 +676,11 @@
 		justify-content: flex-end;
 	}
 
-	.video-actions button:not(.left-round):not(.right-round) {
-		margin: 0.3em;
-	}
-
 	@media screen and (max-width: 1000px) {
 		.video-actions {
 			align-items: flex-start;
 			flex-direction: column;
 		}
-
-		.video-actions > div {
-			margin-top: 1em;
-		}
-
-		nav.group {
-			flex-direction: column;
-		}
-
-		nav.group button {
-			border-radius: 0.5rem !important;
-		}
 	}
 
 	@media screen and (max-width: 1646px) {