make note footer wider on smaller screens

README.md

@@ -72,7 +72,9 @@ Sharkey Documentation can be found at [Sharkey Documentation](https://docs.joins
 - Local timeline icon is now a map pin
 - Global timeline icon is now a planet
 ### Misc. UI
-- Thinner bottom navigation bar on mobile
 - Less sharp rounding on reactions w/ Misskey corner roundness setting
 - The Eeper as default favicon
 - Removes channels tab from timeline page since they don't federate
+- Mobile UI improvements
+	- Thinner bottom navigation bar on mobile
+	- Wider spacing between buttons on note footers

packages/frontend/src/components/MkInstanceTicker.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root" :style="bg">
+<div :class="$style.root" :style="bg" v-tooltip="instance.softwareName + ' (' + instance.softwareVersion + ')'">
 	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
 	<div :class="$style.name">{{ instance.name }}</div>
 </div>
@@ -21,6 +21,8 @@ const props = defineProps<{
 		faviconUrl?: string
 		name: string
 		themeColor?: string
+		softwareName?: string
+		softwareVersion?: string
 	}
 }>();
 

packages/frontend/src/components/MkNote.vue

@@ -830,12 +830,13 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
 		position: relative;
 		z-index: 1;
 		margin-top: 0.4em;
-		width: max-content;
-		min-width: min-content;
-		max-width: fit-content;
+		max-width: 400px;
 	}
 
 	&:hover > .article > .main > .footer > .footerButton {

packages/frontend/src/components/SkNote.vue

@@ -841,12 +841,13 @@ defineExpose({
 	}
 
 	.footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
 		position: relative;
 		z-index: 1;
 		margin-top: 0.4em;
-		width: max-content;
-		min-width: min-content;
-		max-width: fit-content;
+		max-width: 400px;
 	}
 
 	&:hover > .article > .main > .footer > .footerButton {