fix: accordion styles

ever-co · Feb 5, 2024 · ca9538e · ca9538e
1 parent 42b9c68
commit ca9538e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/apps/web/app/[locale]/settings/personal/page.tsx b/apps/web/app/[locale]/settings/personal/page.tsx
@@ -29,7 +29,10 @@ const Personal = () => {
 			{!user ? (
 				<SettingsPersonalSkeleton />
 			) : (
-				<MainLayout className="items-start pb-1 h-screen " childrenClassName="overflow-hidden h-full w-screen flex flex-col items-start">
+				<MainLayout
+					className="items-start pb-1 h-screen "
+					childrenClassName="overflow-hidden h-full w-screen flex flex-col items-start"
+				>
 					<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
 						<Container fullWidth={fullWidth}>
 							<div className="flex flex-row items-center justify-start gap-8">
@@ -44,16 +47,16 @@ const Personal = () => {
 
 					<Container fullWidth={fullWidth} className="mb-10 flex-1">
 						<div className="flex flex-col w-full h-full lg:flex-row">
-							<LeftSideSettingMenu className="h-[72vh] pb-4"/>
-							<div className="flex flex-col flex-1 h-[72vh] mr-[20px] lg:mr-0">
+							<LeftSideSettingMenu className="h-[72vh] pb-4" />
+							<div className="flex flex-col flex-1 h-[72vh] sm:mr-[20px] lg:mr-0 overflow-y-scroll">
 								<Link href={'/settings/team'} className="w-full">
 									<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
 										Go to Team settings
 									</button>
 								</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 md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 									id="general"
 								>
 									{/* <Text className="text-base font-normal text-center text-gray-400 sm:text-left">
@@ -64,7 +67,7 @@ const Personal = () => {
 								</Accordian>
 								<Accordian
 									title={t('pages.settings.DANDER_ZONE')}
-									className="p-4 mt-4 dark:bg-dark--theme"
+									className="p-4 mt-4  md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw]  dark:bg-dark--theme"
 									isDanger={true}
 									id="danger-zone"
 								>

diff --git a/apps/web/app/[locale]/settings/team/page.tsx b/apps/web/app/[locale]/settings/team/page.tsx
@@ -37,7 +37,10 @@ const Team = () => {
 			{!user ? (
 				<SettingsTeamSkeleton />
 			) : (
-				<MainLayout className="items-start pb-1 h-screen " childrenClassName="overflow-hidden h-full w-screen flex flex-col items-start">
+				<MainLayout
+					className="items-start pb-1 h-screen "
+					childrenClassName="overflow-hidden h-full w-screen flex flex-col items-start"
+				>
 					<div className="pt-12 w-full pb-4 bg-white dark:bg-dark--theme">
 						<Container fullWidth={fullWidth}>
 							<div className="flex flex-row items-center justify-start gap-8">
@@ -52,7 +55,7 @@ const Team = () => {
 
 					<Container fullWidth={fullWidth} className="mb-10 flex-1">
 						<div className="flex flex-col w-full h-full lg:flex-row">
-							<LeftSideSettingMenu className="h-[72vh] pb-4"/>
+							<LeftSideSettingMenu className="h-[72vh] pb-4" />
 							{isTeamMember ? (
 								<div className="flex flex-col flex-1 h-[72vh] sm:mr-[20px] lg:mr-0 overflow-y-scroll">
 									<Link href={'/settings/personal'} className="w-full">
@@ -63,7 +66,7 @@ const Team = () => {
 									{/* General Settings */}
 									<Accordian
 										title={t('pages.settingsTeam.HEADING_TITLE')}
-										className="w-full max-w-[66vw] p-4 mt-8 dark:bg-dark--theme"
+										className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] p-4 mt-8 dark:bg-dark--theme"
 										id="general-settings"
 									>
 										<div className="flex flex-col">
@@ -76,7 +79,7 @@ const Team = () => {
 									{isTeamManager ? (
 										<Accordian
 											title={t('pages.settingsTeam.INVITATION_HEADING_TITLE')}
-											className="w-full max-w-[66vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
+											className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
 											id="invitations"
 										>
 											<InvitationSetting />
@@ -89,7 +92,7 @@ const Team = () => {
 									{isTeamManager ? (
 										<Accordian
 											title={t('pages.settingsTeam.MEMBER_HEADING_TITLE')}
-											className="w-full max-w-[66vw]  p-4 mt-4 dark:bg-dark--theme"
+											className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw]  p-4 mt-4 dark:bg-dark--theme"
 											id="member"
 										>
 											<MemberSetting />
@@ -101,7 +104,7 @@ const Team = () => {
 									{isTeamManager && (
 										<Accordian
 											title={t('pages.settingsTeam.INTEGRATIONS')}
-											className="w-full max-w-[66vw] p-4 mt-4 dark:bg-dark--theme"
+											className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] p-4 mt-4 dark:bg-dark--theme"
 											id="integrations"
 										>
 											<IntegrationSetting />
@@ -111,7 +114,7 @@ const Team = () => {
 									{/* Issues Settings */}
 									<Accordian
 										title={t('pages.settingsTeam.ISSUES_HEADING_TITLE')}
-										className="w-full max-w-[66vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
+										className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
 										id="issues-settings"
 									>
 										<IssuesSettings />
@@ -129,7 +132,7 @@ const Team = () => {
 									{/* Danger Zone */}
 									<Accordian
 										title={t('pages.settings.DANDER_ZONE')}
-										className="w-full max-w-[66vw] p-4 mt-4 dark:bg-dark--theme"
+										className="w-full md:min-w-[50vw] lg:min-w-[60vw] xl:min-w-[75vw] max-w-[80vw] p-4 mt-4 dark:bg-dark--theme"
 										isDanger={true}
 										id="danger-zones"
 									>