Merge pull request #2460 from ever-co/2452-bug-settings-|-ui-user-can…

…-scroll-out-of-page [Bug]: dropdown moving to bottom.
ever-co · Apr 29, 2024 · f746ef1 · f746ef1
2 parents 30a3bbd + 963b150
commit f746ef1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/apps/web/app/[locale]/settings/personal/page.tsx b/apps/web/app/[locale]/settings/personal/page.tsx
@@ -19,7 +19,7 @@ const Personal = () => {
 			</Link>
 			<Accordian
 				title={t('pages.settingsPersonal.HEADING_TITLE')}
-				className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+				className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 				id="general"
 			>
 				{/* <Text className="text-base font-normal text-center text-gray-400 sm:text-left">

diff --git a/apps/web/app/[locale]/settings/team/page.tsx b/apps/web/app/[locale]/settings/team/page.tsx
@@ -34,7 +34,7 @@ const Team = () => {
 					{/* General Settings */}
 					<Accordian
 						title={t('pages.settingsTeam.HEADING_TITLE')}
-						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 						id="general-settings"
 					>
 						<div className="flex flex-col">
@@ -47,7 +47,7 @@ const Team = () => {
 					{isTeamManager ? (
 						<Accordian
 							title={t('pages.settingsTeam.INVITATION_HEADING_TITLE')}
-							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 							id="invitations"
 						>
 							<InvitationSetting />
@@ -58,7 +58,7 @@ const Team = () => {
 					{isTeamManager ? (
 						<Accordian
 							title={t('pages.settingsTeam.MEMBER_HEADING_TITLE')}
-							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 							id="member"
 						>
 							<MemberSetting />
@@ -68,7 +68,7 @@ const Team = () => {
 					{isTeamManager && (
 						<Accordian
 							title={t('pages.settingsTeam.INTEGRATIONS')}
-							className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+							className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 							id="integrations"
 						>
 							<IntegrationSetting />
@@ -78,7 +78,7 @@ const Team = () => {
 					{/* Issues Settings */}
 					<Accordian
 						title={t('pages.settingsTeam.ISSUES_HEADING_TITLE')}
-						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 						id="issues-settings"
 					>
 						<IssuesSettings />
@@ -96,7 +96,7 @@ const Team = () => {
 					{/* Danger Zone */}
 					<Accordian
 						title={t('pages.settings.DANDER_ZONE')}
-						className="w-full max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
+						className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 						isDanger={true}
 						id="danger-zones"
 					>

diff --git a/apps/web/lib/settings/table-action-popover.tsx b/apps/web/lib/settings/table-action-popover.tsx
@@ -33,7 +33,7 @@ export const TableActionPopover = ({ member, handleEdit }: Props) => {
 	// 	setIsOpen(!isOpen);
 	// };
 	return (
-		<Popover className="w-full no-underline border-none">
+		<Popover className="w-full relative no-underline border-none">
 			{() => (
 				<>
 					<Transition
@@ -45,7 +45,7 @@ export const TableActionPopover = ({ member, handleEdit }: Props) => {
 						leaveFrom="opacity-100 translate-y-0"
 						leaveTo="opacity-0 translate-y-1"
 					>
-						<Popover.Panel className="z-10 absolute right-16 bg-white rounded-2xl w-[7.5rem] flex flex-col pl-5 pr-5 pt-2 pb-2 shadow-xlcard dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]">
+						<Popover.Panel className="z-10 absolute right-10 bg-white rounded-2xl w-[7.5rem] flex flex-col pl-5 pr-5 pt-2 pb-2 shadow-xlcard dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]">
 							{/* TODO Dynamic */}
 							{/* Edit */}
 							<div
@@ -93,7 +93,7 @@ export const TableActionPopover = ({ member, handleEdit }: Props) => {
 						</Popover.Panel>
 					</Transition>
 					<Popover.Button className="w-full mt-2 outline-none">
-						<ThreeCircleOutlineHorizontalIcon className="w-6 text-[#292D32] dark:text-white" strokeWidth="2.5" />
+						<ThreeCircleOutlineHorizontalIcon className="w-6 text-[#292D32] relative dark:text-white" strokeWidth="2.5" />
 					</Popover.Button>
 					<ConfirmationModal
 						open={isOpen}