From 9c7fa24fe803529f532183ec85f1510a3038e644 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 27 May 2024 19:02:45 +0530
Subject: [PATCH] fix: made contact & organization page responsive

---
 frontend/src/pages/Contact.vue      | 20 ++++++++++++--------
 frontend/src/pages/Organization.vue | 18 ++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 034689ca..34785258 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -7,7 +7,7 @@
   <div v-if="contact.data" class="flex h-full flex-col overflow-hidden">
     <FileUploader @success="changeContactImage" :validateFile="validateFile">
       <template #default="{ openFileSelector, error }">
-        <div class="flex items-center justify-start gap-6 p-5">
+        <div class="flex items-start justify-start gap-6 p-5 sm:items-center">
           <div class="group relative h-24 w-24">
             <Avatar
               size="3xl"
@@ -50,14 +50,16 @@
               </div>
             </component>
           </div>
-          <div class="flex flex-col gap-0.5 truncate">
+          <div class="flex flex-col gap-2 truncate sm:gap-0.5">
             <div class="truncate text-3xl font-semibold">
               <span v-if="contact.data.salutation">
                 {{ contact.data.salutation + '. ' }}
               </span>
               <span>{{ contact.data.full_name }}</span>
             </div>
-            <div class="flex items-center gap-2 text-base text-gray-700">
+            <div
+              class="flex flex-col flex-wrap gap-3 text-base text-gray-700 sm:flex-row sm:items-center sm:gap-2"
+            >
               <div
                 v-if="contact.data.email_id"
                 class="flex items-center gap-1.5"
@@ -67,7 +69,7 @@
               </div>
               <span
                 v-if="contact.data.email_id"
-                class="text-3xl leading-[0] text-gray-600"
+                class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
               >
                 &middot;
               </span>
@@ -79,7 +81,9 @@
                 <div
                   class="flex items-center gap-1.5"
                   :class="callEnabled ? 'cursor-pointer' : ''"
-                  @click="callEnabled && makeCall(contact.data.actual_mobile_no)"
+                  @click="
+                    callEnabled && makeCall(contact.data.actual_mobile_no)
+                  "
                 >
                   <PhoneIcon class="h-4 w-4" />
                   <span class="">{{ contact.data.actual_mobile_no }}</span>
@@ -87,7 +91,7 @@
               </component>
               <span
                 v-if="contact.data.actual_mobile_no"
-                class="text-3xl leading-[0] text-gray-600"
+                class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
               >
                 &middot;
               </span>
@@ -107,7 +111,7 @@
               </div>
               <span
                 v-if="contact.data.company_name"
-                class="text-3xl leading-[0] text-gray-600"
+                class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
               >
                 &middot;
               </span>
@@ -119,7 +123,7 @@
                 "
                 variant="ghost"
                 :label="__('More')"
-                class="-ml-1 cursor-pointer hover:text-gray-900"
+                class="w-fit cursor-pointer hover:text-gray-900 sm:-ml-1"
                 @click="
                   () => {
                     detailMode = true
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index aaee485d..de97e444 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -10,7 +10,7 @@
       :validateFile="validateFile"
     >
       <template #default="{ openFileSelector, error }">
-        <div class="flex items-center justify-start gap-6 p-5">
+        <div class="flex items-start justify-start gap-6 p-5 sm:items-center">
           <div class="group relative h-24 w-24">
             <Avatar
               size="3xl"
@@ -53,11 +53,13 @@
               </div>
             </component>
           </div>
-          <div class="flex flex-col justify-center gap-0.5">
+          <div class="flex flex-col justify-center gap-2 sm:gap-0.5">
             <div class="text-3xl font-semibold text-gray-900">
               {{ organization.doc.name }}
             </div>
-            <div class="flex items-center gap-2 text-base text-gray-700">
+            <div
+              class="flex flex-col flex-wrap gap-3 text-base text-gray-700 sm:flex-row sm:items-center sm:gap-2"
+            >
               <div
                 v-if="organization.doc.website"
                 class="flex items-center gap-1.5"
@@ -67,7 +69,7 @@
               </div>
               <span
                 v-if="organization.doc.website"
-                class="text-3xl leading-[0] text-gray-600"
+                class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
               >
                 &middot;
               </span>
@@ -80,7 +82,7 @@
               </div>
               <span
                 v-if="organization.doc.industry"
-                class="text-3xl leading-[0] text-gray-600"
+                class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
               >
                 &middot;
               </span>
@@ -93,7 +95,7 @@
               </div>
               <span
                 v-if="organization.doc.territory"
-                class="text-3xl leading-[0] text-gray-600"
+                class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
               >
                 &middot;
               </span>
@@ -106,7 +108,7 @@
               </div>
               <span
                 v-if="organization.doc.annual_revenue"
-                class="text-3xl leading-[0] text-gray-600"
+                class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
               >
                 &middot;
               </span>
@@ -119,7 +121,7 @@
                 "
                 variant="ghost"
                 :label="__('More')"
-                class="-ml-1 cursor-pointer hover:text-gray-900"
+                class="w-fit cursor-pointer hover:text-gray-900 sm:-ml-1"
                 @click="
                   () => {
                     detailMode = true