Fixes: Mobile - Login - Thirdparty buttons not completley aligned.

zammad · Mar 24, 2023 · e911a75 · e911a75
1 parent 10bde65
commit e911a75
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 14 deletions.
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
@@ -3596,25 +3596,20 @@ ol.tabs li {
 .auth-providers {
   display: flex;
   flex-wrap: wrap;
+  padding: 7px;
+  margin: -14px;
 
   > form {
     display: flex;
     flex-grow: 1;
-    min-width: calc(100% / 2 - 8px);
-
-    &:last-child {
-      .auth-provider {
-        margin-bottom: initial;
-      }
-    }
+    min-width: 50%;
   }
 }
 
 .auth-provider {
   height: 40px;
   padding: 0 10px 0 7px;
-  margin-bottom: 14px;
-  margin-right: 14px;
+  margin: 7px;
   color: white !important;
   line-height: 23px;
   border-radius: 4px;

diff --git a/app/frontend/apps/mobile/pages/login/components/LoginThirdParty.vue b/app/frontend/apps/mobile/pages/login/components/LoginThirdParty.vue
@@ -25,17 +25,17 @@ const { fingerprint } = useFingerprint()
           : $t('Sign in using')
       }}
     </p>
-    <div class="flex flex-wrap gap-2">
+    <div class="-m-2 flex flex-wrap p-1">
       <form
         v-for="provider of props.providers"
         :key="provider.name"
-        class="min-w-1/2-2 grow"
+        class="min-w-1/2 flex grow"
         method="post"
         :action="`${provider.url}?fingerprint=${fingerprint}`"
       >
         <input type="hidden" name="authenticity_token" :value="csrfToken" />
         <button
-          class="flex h-14 w-full cursor-pointer select-none items-center justify-center rounded-xl bg-gray-600 py-2 px-4 text-white"
+          class="m-1 flex h-14 w-full cursor-pointer select-none items-center justify-center rounded-xl bg-gray-600 py-2 px-4 text-white"
         >
           <CommonIcon
             :name="`mobile-${provider.icon}`"

diff --git a/app/frontend/apps/mobile/pages/login/views/Login.vue b/app/frontend/apps/mobile/pages/login/views/Login.vue
@@ -283,7 +283,7 @@ const { forceDesktop } = useForceDesktop()
       </template>
     </nav>
     <footer
-      class="mt-8 mb-14 flex w-full max-w-md items-center justify-center border-t border-gray-600 pt-2.5 align-middle font-medium leading-4 text-gray"
+      class="mt-8 flex w-full max-w-md items-center justify-center border-t border-gray-600 py-2.5 align-middle font-medium leading-4 text-gray"
     >
       <CommonLink
         v-if="application.hasCustomProductBranding"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -65,7 +65,7 @@ module.exports = {
       orange: '#F39804',
     },
     minWidth: {
-      '1/2-2': 'calc(100% / 2 - theme(spacing.2))',
+      '1/2': '50%',
     },
   },
   plugins: [