From 10b92705e8c7d0a9fb3cb2eaae4b73a59ec866cd Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 20 Apr 2022 16:07:39 +0200
Subject: [PATCH] Improve instance admin view for mobile

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Admin/Instance.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/js/src/views/Admin/Instance.vue b/js/src/views/Admin/Instance.vue
index e424cd9e9..fb58c27cd 100644
--- a/js/src/views/Admin/Instance.vue
+++ b/js/src/views/Admin/Instance.vue
@@ -8,7 +8,9 @@
       ]"
     />
     <h1 class="text-2xl">{{ instance.domain }}</h1>
-    <div class="grid md:grid-cols-4 gap-2 content-center text-center mt-2">
+    <div
+      class="grid md:grid-cols-2 xl:grid-cols-4 gap-2 content-center text-center mt-2"
+    >
       <div class="bg-gray-50 rounded-xl p-8">
         <router-link
           :to="{
@@ -64,7 +66,7 @@
         <span class="text-sm block">{{ $t("Uploaded media size") }}</span>
       </div>
     </div>
-    <div class="mt-3 grid md:grid-cols-2 gap-4" v-if="instance.hasRelay">
+    <div class="mt-3 grid xl:grid-cols-2 gap-4" v-if="instance.hasRelay">
       <div class="border bg-white p-6 shadow-md rounded-md">
         <button
           @click="removeInstanceFollow"
@@ -88,7 +90,7 @@
           {{ $t("Follow instance") }}
         </button>
       </div>
-      <div class="border bg-white p-6 shadow-md rounded-md">
+      <div class="border bg-white p-6 shadow-md rounded-md flex flex-col gap-2">
         <button
           @click="acceptInstance"
           v-if="instance.followerStatus == InstanceFollowStatus.PENDING"