diff --git a/src/assets/icons/cross.svg b/src/assets/icons/cross.svg
new file mode 100644
index 0000000..e3f4776
--- /dev/null
+++ b/src/assets/icons/cross.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/sidebar/FollowTarget.vue b/src/components/sidebar/FollowTarget.vue
index 1ea01dd..423ea3a 100644
--- a/src/components/sidebar/FollowTarget.vue
+++ b/src/components/sidebar/FollowTarget.vue
@@ -25,7 +25,9 @@
{{ messageHidden }}
+ @click.prevent="unfollow" :aria-label="messageUnfollow">
+
+
@@ -37,9 +39,12 @@ import {computed, defineComponent, onMounted, ref, watch} from "@vue/runtime-cor
import {getMinecraftHead} from '@/util';
import defaultImage from '@/assets/images/player_face.png';
import {LiveAtlasPlayer} from "@/index";
+import SvgIcon from "@/components/SvgIcon.vue";
+import "@/assets/icons/cross.svg";
export default defineComponent({
name: 'FollowTarget',
+ components: {SvgIcon},
props: {
target: {
type: Object as () => LiveAtlasPlayer,
@@ -97,8 +102,20 @@ export default defineComponent({
.target__unfollow {
position: absolute;
- top: 2rem;
- right: 1.5rem;
+ top: 1.5rem;
+ right: 1rem;
+ width: 2.5rem;
+ height: 2.5rem;
+
+ &:before {
+ content: '';
+ position: absolute;
+ display: block;
+ top: -1rem;
+ right: -1rem;
+ bottom: -1rem;
+ left: -1rem;
+ }
}
.target__info {
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index b900ac9..276dbff 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -51,6 +51,8 @@
position: absolute;
width: calc(100% - 1.6rem);
height: calc(100% - 1.6rem);
+ min-width: 1.5rem;
+ min-height: 1.5rem;
top: 0;
right: 0;
bottom: 0;