From 2f6909847f18cab710928cecc762faf545664baf Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Sun, 27 Aug 2023 20:58:06 +0200
Subject: [PATCH] Fix mobile login view (#2332)

Before:

<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/27a97d84-1aea-4edd-8816-65693429caf9"
width="300">

<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/efcba454-515c-453e-abce-6cfd63b30dc7"
width="500">

After:

<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/3fa4ee48-f230-4cdb-bdb9-8527477cb4e2"
width="300">

<img
src="https://github.com/woodpecker-ci/woodpecker/assets/3391958/2b327f53-8a33-4506-adb3-1f7ccb64c702"
width="500">
---
 web/src/views/Login.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 77ee56351..cdf8b8ea2 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -9,14 +9,14 @@
     </div>
 
     <div
-      class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:border-wp-background-400 md:bg-wp-background-100 md:dark:bg-wp-background-200 md:flex-row md:w-3xl md:h-sm justify-center"
+      class="flex flex-col w-full overflow-hidden bg-wp-background-100 shadow border border-wp-background-400 dark:bg-wp-background-200 md:m-8 md:rounded-md md:flex-row md:w-3xl md:h-sm"
     >
-      <div class="flex md:bg-wp-primary-200 md:dark:bg-wp-primary-300 md:w-3/5 justify-center items-center">
-        <WoodpeckerLogo class="w-48 h-48" />
+      <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 min-h-48 md:w-3/5">
+        <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 h-30 md:w-48 md:h-48" />
       </div>
-      <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
+      <div class="flex justify-center items-center flex-col md:w-2/5 min-h-48 gap-4 text-center">
         <h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
-        <Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
+        <Button @click="doLogin">{{ $t('login') }}</Button>
       </div>
     </div>
   </main>