Fix some layout issues and issues in mobile in admin page

Author: Luffyyy

frontend/app/components/site/mod/mod-row.vue

@@ -6,8 +6,8 @@
 			</NuxtLink>
 		</td>
 
-		<td>
-			<NuxtLink class="mod-title" style="min-width: 150px;" :to="!static && `/mod/${mod.id}` || undefined" :title="mod.name">
+		<td style="min-width: 250px;">
+			<NuxtLink class="mod-title" :to="!static && `/mod/${mod.id}` || undefined" :title="mod.name">
 				<mod-status :mod="mod"/>
 				{{ mod.name }}
 			</NuxtLink>

frontend/app/components/site/pages/admin/admin-glance.vue

@@ -1,6 +1,6 @@
 <template>
 	<span v-if="adminData" class="h2">{{ $t('admin_at_a_glance') }}</span>
-	<m-flex v-if="adminData" class="max-md:flex-wrap">
+	<m-flex v-if="adminData" class="max-md:flex-col overflow-hidden">
 		<m-flex class="flex-1" column>
 			<NuxtLink :to="reportsUrl" class="glance-block">
 				<span class="text-2xl text-body">{{ $t('last_reports') }}</span>
@@ -37,12 +37,12 @@
 				<span class="text-2xl text-body">{{ $t('last_suspensions') }}</span>
 				<m-flex v-if="adminData.suspensions" column>
 					<template v-if="adminData.suspensions.length">
-						<m-content-block v-for="sus of adminData.suspensions" :key="sus.id" class="text-body" :column="false">
-							<mod-thumbnail :thumbnail="sus.mod.thumbnail" style="width: 96px; height: 48px;"/>
-							<m-flex column>
+						<m-content-block v-for="sus of adminData.suspensions" :key="sus.id" class="text-body items-center" :column="false" wrap>
+							<m-flex class="items-center">
+								<mod-thumbnail :thumbnail="sus.mod.thumbnail" style="width: 96px; height: 48px;"/>
 								<span>{{ sus.mod.name }}</span>
-								<span>{{ $t('reason') }}: {{ sus.reason }}</span>
 							</m-flex>
+							<span>{{ $t('reason') }}: {{ sus.reason }}</span>
 						</m-content-block>
 					</template>
 					<span v-else class="text-body">

frontend/app/components/ui/layout/m-list.vue

@@ -1,6 +1,6 @@
 <template>
 	<m-flex column gap="4" style="flex: 1;">
-		<m-flex v-if="title || $slots.title" class="items-center">
+		<m-flex v-if="title || $slots.title || $slots.buttons" class="items-center">
 			<slot name="title">
 				<h2 v-if="title">{{ title }}</h2>
 			</slot>
@@ -14,6 +14,8 @@
 			</m-flex>
 		</m-flex>
 
+		<slot name="filters" :items="items"/>
+
 		<m-pagination v-if="pagination" v-model="page" :total="total" :per-page="limit">
 			<slot name="pagination" :items="items"/>
 		</m-pagination>
@@ -71,8 +73,8 @@ const props = withDefaults(defineProps<{
 	column: true
 });
 
-const vmPage = defineModel<number>('page');
-const page = props.query ? useRouteQuery('page', 1) : ref(vmPage.value);
+const vmPage = defineModel<number>('page', { default: undefined });
+const page = !vmPage.value ? useRouteQuery('page', 1) : ref(vmPage.value);
 
 const queryRef = props.query ? useRouteQuery('query', '') : ref('');
 

frontend/app/components/ui/layout/m-list/item.vue

@@ -17,3 +17,9 @@ withDefaults(defineProps<{
 	textBy?: string;
 }>(), { textBy: 'name' });
 </script>
+
+<style scoped>
+.list-button {
+	width: 100%;
+}
+</style>

frontend/app/pages/admin/sessions.vue

@@ -5,9 +5,9 @@
 		<user-select v-model="user" :label="$t('user')" clearable/>
 		<m-list v-model:page="page" query :items="sessions" :loading="loading">
 			<template #before-item="{ item }">
-				<a-user :user="item.user">
+				<a-user :user="item.user" class="overflow-hidden">
 					<template #details>
-						{{ item.ip_address }}
+						<span>{{ item.ip_address }}</span>
 						<m-time :datetime="item.updated_at" relative/>
 					</template>
 				</a-user>

frontend/app/pages/admin/suspensions.vue

@@ -1,6 +1,6 @@
 <template>
-	<m-list :items="data" :loading="loading">
-		<template #buttons>
+	<m-list :items="data" :loading="loading" :title="$t('suspensions')">
+		<template #filters>
 			<m-input v-model="query" :label="$t('search')"/>
 			<user-select v-model="userId" :label="$t('user')" clearable/>
 		</template>