fix: misc fixes (#5584)

* fix: PATs editing bug #4908

* fix: gallery edit do not do falsy check on title and description

* feat: add aspect ratio on gallery images

* change aspect ratio to 16:9

* fix: mobile nav bar #5580

* use css::after instead for navbar fix

* adjust after content to fix thin line

* add save area inset for transform

Author: tdgao

apps/frontend/src/layouts/default.vue

@@ -1279,7 +1279,7 @@ const { cycle: changeTheme } = useTheme()
 		left: 0;
 		background-color: var(--color-raised-bg);
 		z-index: 11; // 20 = modals, 10 = svg icons
-		transform: translateY(100%);
+		transform: translateY(calc(100% + env(safe-area-inset-bottom)));
 		transition: transform 0.4s cubic-bezier(0.54, 0.84, 0.42, 1);
 		border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
 		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0);
@@ -1367,6 +1367,17 @@ const { cycle: changeTheme } = useTheme()
 		border-top: 2px solid rgba(0, 0, 0, 0);
 		box-sizing: border-box;
 
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 2px;
+			left: 0;
+			width: 100%;
+			height: 300px;
+			background-color: var(--color-raised-bg);
+			transform: translateY(100%);
+		}
+
 		&.expanded {
 			box-shadow: none;
 			border-radius: 0;

apps/frontend/src/pages/[type]/[id].vue

@@ -2071,10 +2071,10 @@ const createGalleryItemMutation = useMutation({
 			file.type.split('/')[file.type.split('/').length - 1]
 		}&featured=${featured ?? false}`
 
-		if (title) {
+		if (title != null) {
 			url += `&title=${encodeURIComponent(title)}`
 		}
-		if (description) {
+		if (description != null) {
 			url += `&description=${encodeURIComponent(description)}`
 		}
 		if (ordering !== null && ordering !== undefined) {
@@ -2132,10 +2132,10 @@ const editGalleryItemMutation = useMutation({
 	mutationFn: async ({ projectId, imageUrl, title, description, featured, ordering }) => {
 		let url = `project/${projectId}/gallery?url=${encodeURIComponent(imageUrl)}&featured=${featured ?? false}`
 
-		if (title) {
+		if (title != null) {
 			url += `&title=${encodeURIComponent(title)}`
 		}
-		if (description) {
+		if (description != null) {
 			url += `&description=${encodeURIComponent(description)}`
 		}
 		if (ordering !== null && ordering !== undefined) {

apps/frontend/src/pages/[type]/[id]/gallery.vue

@@ -484,8 +484,8 @@ async function editGalleryItem() {
 	const imageUrl = filteredGallery.value[editIndex.value].url
 	const success = await contextEditGalleryItem(
 		imageUrl,
-		editTitle.value || undefined,
-		editDescription.value || undefined,
+		editTitle.value,
+		editDescription.value,
 		editFeatured.value,
 		editOrder.value ? Number(editOrder.value) : undefined,
 	)
@@ -683,7 +683,7 @@ async function deleteGalleryImage() {
 		margin-bottom: 0;
 		border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
 
-		min-height: 10rem;
+		aspect-ratio: 16 / 9;
 		object-fit: cover;
 	}
 

apps/frontend/src/pages/[type]/[id]/settings/gallery.vue

@@ -427,8 +427,8 @@ const editGalleryItem = async () => {
 
 	const success = await editGalleryItemMutation(
 		filteredGallery.value[editIndex.value].url,
-		editTitle.value || undefined,
-		editDescription.value || undefined,
+		editTitle.value,
+		editDescription.value,
 		editFeatured.value,
 		editOrder.value ?? undefined,
 	)
@@ -643,7 +643,7 @@ onUnmounted(() => {
 		margin-bottom: 0;
 		border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
 
-		min-height: 10rem;
+		aspect-ratio: 16 / 9;
 		object-fit: cover;
 	}
 

apps/frontend/src/pages/settings/pats.vue

@@ -10,7 +10,7 @@
 		<Modal
 			ref="patModal"
 			:header="
-				editPatIndex !== null
+				editPatId !== null
 					? formatMessage(createModalMessages.editTitle)
 					: formatMessage(createModalMessages.createTitle)
 			"
@@ -58,7 +58,7 @@
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 					<button
-						v-if="editPatIndex !== null"
+						v-if="editPatId !== null"
 						:disabled="loading || !name || !expires"
 						type="button"
 						class="iconified-button brand-button"
@@ -92,7 +92,7 @@
 						name = null
 						scopesVal = 0
 						expires = null
-						editPatIndex = null
+						editPatId = null
 						$refs.patModal.show()
 					}
 				"
@@ -109,7 +109,7 @@
 				</template>
 			</IntlFormatted>
 		</p>
-		<div v-for="(pat, index) in displayPats" :key="pat.id" class="universal-card recessed token">
+		<div v-for="pat in displayPats" :key="pat.id" class="universal-card recessed token">
 			<div>
 				<div>
 					<strong>{{ pat.name }}</strong>
@@ -162,7 +162,7 @@
 					class="iconified-button raised-button"
 					@click="
 						() => {
-							editPatIndex = index
+							editPatId = pat.id
 							name = pat.name
 							scopesVal = pat.scopes
 							expires = $dayjs(pat.expires).format('YYYY-MM-DD')
@@ -316,7 +316,7 @@ const data = useNuxtApp()
 const { scopesToLabels } = useScopes()
 const patModal = ref()
 
-const editPatIndex = ref(null)
+const editPatId = ref(null)
 
 const name = ref(null)
 const scopesVal = ref(BigInt(0))
@@ -415,7 +415,7 @@ async function editPat() {
 	startLoading()
 	loading.value = true
 	try {
-		await useBaseFetch(`pat/${pats.value[editPatIndex.value].id}`, {
+		await useBaseFetch(`pat/${editPatId.value}`, {
 			method: 'PATCH',
 			body: {
 				name: name.value,