From 71073a06ff50ab0669abb5b09763f5a2c5bc813d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 24 Jul 2024 16:45:17 +0530
Subject: [PATCH] fix: Broken connect to facebook page layout (#9830)

# Pull Request Template

## Description

This PR will fix the layout issue in connecting to the Facebook page
layout.

Fixes
https://linear.app/chatwoot/issue/CW-3489/connect-facebook-page-layout-is-broken

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Before**
<img width="1264" alt="image"
src="https://github.com/user-attachments/assets/2b9e412b-f172-4184-b45b-8c97333c3e51">


**After**
<img width="1264" alt="image"
src="https://github.com/user-attachments/assets/035f3468-f611-43ce-a058-fb8eafa1a45d">




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../routes/dashboard/settings/inbox/channels/Facebook.vue    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 18173596c..fdfb8ebd3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -2,7 +2,10 @@
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <div v-if="!hasLoginStarted" class="pt-[30%] h-full">
+    <div
+      v-if="!hasLoginStarted"
+      class="flex flex-col items-center justify-center h-full text-center"
+    >
       <a href="#" @click="startLogin()">
         <img
           class="w-auto h-10"