diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index 352498c5b..e81f574d9 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -2,7 +2,7 @@
   <component
     :is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
     v-bind="btnAttrs"
-    class="relative flex flex-shrink-0 cursor-pointer items-center overflow-hidden whitespace-nowrap rounded-md border px-2 py-1 shadow-sm transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
+    class="relative flex flex-shrink-0 cursor-pointer items-center overflow-hidden whitespace-nowrap rounded-md border px-2 py-1 shadow-sm transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50 text-wrap"
     :class="{
       'border-wp-control-neutral-300 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
         color === 'gray',
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index d1615e10d..a93f9e612 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -19,7 +19,7 @@
       <div class="flex min-h-48 items-center justify-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="h-32 w-32 md:h-48 md:w-48" />
       </div>
-      <div class="flex min-h-48 flex-col items-center justify-center gap-4 text-center md:w-2/5">
+      <div class="flex min-h-48 flex-col items-center justify-center gap-4 text-center md:w-2/5 px-1">
         <h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
         <div class="flex flex-col gap-2">
           <Button