From 317f7e74021607cc4ba22c9395459793ab3ea475 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 27 Mar 2026 06:47:53 +0530
Subject: [PATCH] feat: Introduce `alwaysShow` prop for MobileBackButton to
 control visibility and apply minor UI refinements to specialization cards and
 chat header.

---
 src/app/(agent)/agent/edit/page.tsx              | 2 +-
 src/app/(user)/user/profile/[id]/page.tsx        | 2 +-
 src/app/support/chat/page.tsx                    | 2 +-
 src/components/layout/MobileBackButton.tsx       | 5 +++--
 src/components/profile/SpecializationCard.tsx    | 2 +-
 src/components/profile/SpecializationSection.tsx | 4 ++--
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app/(agent)/agent/edit/page.tsx b/src/app/(agent)/agent/edit/page.tsx
index 050298b..855bf23 100644
--- a/src/app/(agent)/agent/edit/page.tsx
+++ b/src/app/(agent)/agent/edit/page.tsx
@@ -366,7 +366,7 @@ export default function EditProfilePage() {
 
   return (
     <div>
-      <MobileBackButton label="Back" fallbackHref="/agent/dashboard" />
+      <MobileBackButton label="Back" fallbackHref="/agent/dashboard" alwaysShow />
     <div className="flex gap-6 h-[calc(100vh-180px)]">
       {/* Left Sidebar - Quick Links */}
       <div className="w-[220px] flex-shrink-0 hidden lg:block h-full overflow-y-auto scrollbar-thin">
diff --git a/src/app/(user)/user/profile/[id]/page.tsx b/src/app/(user)/user/profile/[id]/page.tsx
index d61ae53..5ded245 100644
--- a/src/app/(user)/user/profile/[id]/page.tsx
+++ b/src/app/(user)/user/profile/[id]/page.tsx
@@ -278,7 +278,7 @@ export default function AgentProfileView() {
 
   return (
     <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6 space-y-6">
-      <MobileBackButton label="Back" fallbackHref="/user/profiles" />
+      <MobileBackButton label="Back" fallbackHref="/user/profiles" alwaysShow />
       {/* Main Layout - Responsive: Column on mobile, Row on desktop */}
       <div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
         {/* Left Sidebar - Status & Contact */}
diff --git a/src/app/support/chat/page.tsx b/src/app/support/chat/page.tsx
index a4ef733..eea4e1c 100644
--- a/src/app/support/chat/page.tsx
+++ b/src/app/support/chat/page.tsx
@@ -277,7 +277,7 @@ export default function SupportChatPage() {
       {/* Chat Area */}
       <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 w-full flex flex-col">
         {/* Chat Header */}
-        <div className="border border-[#00293d]/10 rounded-t-[15px] px-6 py-4 flex items-center gap-3 bg-[#00293d]">
+        <div className="border border-[#00293d]/10 rounded-t-[15px] px-6 py-4 flex items-center gap-3 bg-[#648188]">
           <Image
             src="/assets/icons/chat-icon.svg"
             alt=""
diff --git a/src/components/layout/MobileBackButton.tsx b/src/components/layout/MobileBackButton.tsx
index fcd66ee..1f0d1f7 100644
--- a/src/components/layout/MobileBackButton.tsx
+++ b/src/components/layout/MobileBackButton.tsx
@@ -5,9 +5,10 @@ import { useRouter } from 'next/navigation';
 interface MobileBackButtonProps {
   label?: string;
   fallbackHref?: string;
+  alwaysShow?: boolean;
 }
 
-export function MobileBackButton({ label, fallbackHref }: MobileBackButtonProps) {
+export function MobileBackButton({ label, fallbackHref, alwaysShow = false }: MobileBackButtonProps) {
   const router = useRouter();
 
   const handleBack = () => {
@@ -23,7 +24,7 @@ export function MobileBackButton({ label, fallbackHref }: MobileBackButtonProps)
   return (
     <button
       onClick={handleBack}
-      className="lg:hidden flex items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer"
+      className={`${alwaysShow ? 'flex' : 'lg:hidden flex'} items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer`}
     >
       <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
         <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
diff --git a/src/components/profile/SpecializationCard.tsx b/src/components/profile/SpecializationCard.tsx
index 2f28b13..c8209a6 100644
--- a/src/components/profile/SpecializationCard.tsx
+++ b/src/components/profile/SpecializationCard.tsx
@@ -29,7 +29,7 @@ export function SpecializationCard({
   };
 
   return (
-    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] h-full">
+    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625]">
       <div className="flex justify-center mb-3">{icon}</div>
       <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
       <div className="flex-1">
diff --git a/src/components/profile/SpecializationSection.tsx b/src/components/profile/SpecializationSection.tsx
index 5317d5a..6197636 100644
--- a/src/components/profile/SpecializationSection.tsx
+++ b/src/components/profile/SpecializationSection.tsx
@@ -29,7 +29,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
 
       {/* Top row - up to 3 cards */}
       {topRowFields.length > 0 && (
-        <div className={`flex flex-col lg:grid lg:items-stretch gap-6 mb-6 ${
+        <div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${
           topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
           topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
           'lg:grid-cols-3'
@@ -54,7 +54,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
 
       {/* Bottom row - remaining cards */}
       {bottomRowFields.length > 0 && (
-        <div className={`flex flex-col lg:grid lg:items-stretch gap-6 ${
+        <div className={`flex flex-col lg:grid lg:items-start gap-6 ${
           bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
           bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
           'lg:grid-cols-3'