small fixes for mobile view (#2805)

LycheeOrg · Dec 11, 2024 · 62fefdf · 62fefdf
1 parent 0e80e3d
commit 62fefdf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/resources/js/components/gallery/thumbs/AlbumThumb.vue b/resources/js/components/gallery/thumbs/AlbumThumb.vue
@@ -44,7 +44,7 @@
 	</router-link>
 </template>
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import ThumbBadge from "@/components/gallery/thumbs/ThumbBadge.vue";
 import AlbumThumbImage from "@/components/gallery/thumbs/AlbumThumbImage.vue";
 import { useAuthStore } from "@/stores/Auth";
@@ -84,9 +84,9 @@ const cssClass = computed(() => {
 
 const linkClass = computed(
 	() =>
-		(lycheeStore.number_albums_per_row_mobile === 1 ? "w-[calc(100%-1rem)] " : "") +
-		(lycheeStore.number_albums_per_row_mobile === 2 ? "w-[calc(50%-1rem)] " : "") +
-		(lycheeStore.number_albums_per_row_mobile === 3 ? "w-[calc(33%-1rem)] " : "") +
+		(lycheeStore.number_albums_per_row_mobile === 1 ? "w-[calc(100%)] " : "") +
+		(lycheeStore.number_albums_per_row_mobile === 2 ? "w-[calc(50%-0.25rem)] " : "") +
+		(lycheeStore.number_albums_per_row_mobile === 3 ? "w-[calc(33%-0.25rem)] " : "") +
 		props.config.album_thumb_css_aspect_ratio +
 		(lycheeStore.is_nsfw_background_blurred && props.album.is_nsfw ? " blurred" : ""),
 );

diff --git a/resources/js/components/gallery/thumbs/PhotoThumb.vue b/resources/js/components/gallery/thumbs/PhotoThumb.vue
@@ -56,7 +56,7 @@
 		<div v-if="user?.id" class="badges absolute mt-[-1px] ml-1 top-0 left-0">
 			<ThumbBadge v-if="props.photo.is_starred" class="bg-yellow-500" icon="star" />
 			<ThumbBadge v-if="is_cover_id" class="bg-yellow-500" icon="folder-cover" />
-			<ThumbBadge v-if="is_header_id" class="bg-slate-400" pi="image" />
+			<ThumbBadge v-if="is_header_id" class="bg-slate-400 hidden sm:block" pi="image" />
 		</div>
 	</router-link>
 </template>

diff --git a/vite/index.html b/vite/index.html
@@ -7,6 +7,7 @@
 >
 	<head>
 		<meta charset="UTF-8" />
+		<meta content="width=device-width, initial-scale=1" name="viewport">
 		<script type="module" src="../resources/js/app.ts"></script>
 	</head>
 	<body class="antialiased">