updated the minor changes

src/app/(dashboard)/(user)/(privateUser)/account/AccountTab.tsx

@@ -22,7 +22,7 @@ export default function AccountTab() {
     const renderTabContent = () => {
         switch (currentActiveTab) {
             case "account_detail":
-                return <EditUserProfile id={user?.id as string | ""} buttonLabel="Update"/>;
+                return <EditUserProfile id={user?.id as string | ""} buttonLabel="Update" />;
             case "wallet_information":
                 return <EditUserWallet />;
             case "change_password":
@@ -38,13 +38,15 @@ export default function AccountTab() {
                     <UserProfileCard balance={data} loading={isLoading} />
                 </div>
                 <GlassWrapper className="col-span-12 lg:col-span-7" >
-                    <TabController links={[
-                        { value: "account_detail", label: "Account Details" },
-                        { value: "wallet_information", label: "Wallet Information" },
-                        { value: "change_password", label: "Change Password" },
-                    ]} currentTab={currentActiveTab} onTabChange={handleTabChange}
-                        controllerClassName=' px-4 lg:px-8 lg:pt-8 !mb-0'
-                    />
+                    <div className="p-6 lg:p-0">
+                        <TabController links={[
+                            { value: "account_detail", label: "Account Details" },
+                            { value: "wallet_information", label: "Wallet Information" },
+                            { value: "change_password", label: "Change Password" },
+                        ]} currentTab={currentActiveTab} onTabChange={handleTabChange}
+                            controllerClassName=' px-4 lg:px-8 lg:pt-8 !mb-0'
+                        />
+                    </div>
                     {renderTabContent()}
                 </GlassWrapper>
             </div>

src/components/molecules/TabController.tsx

@@ -67,7 +67,7 @@ export default function TabController({
 
             {/* Mobile Tabs as Popper */}
             <Box className="flex md:hidden mb-4">
-                <Button ref={anchorRef} onClick={handleToggle} color="primary" className="!justify-between !p-2 !border !border-solid !border-gray-600 !rounded-lg" endIcon={<ArrowDown2 size={20} />} >
+                <Button ref={anchorRef} onClick={handleToggle} className="!justify-between !p-2 !border !border-solid !border-gray-600 !rounded-lg !text-white !bg-primary" endIcon={<ArrowDown2 size={20} />} >
                     <Typography className="flex gap-4">
                         {currentTabIcon}
                         {currentTabLabel}</Typography>
@@ -77,7 +77,10 @@ export default function TabController({
                     anchorEl={anchorRef.current}
                     placement="bottom-start"
                     transition
-                    style={{ zIndex: 1300 }}
+                    style={{
+                        zIndex: 1300,
+                        width: anchorRef.current ? anchorRef.current.offsetWidth : 'auto'
+                    }}
                 >
                     {({ TransitionProps }) => (
                         <Fade {...TransitionProps} timeout={300}>