Make details page responsive

src/ui/components/tenants/tenantDetail/CoreConfigSection.tsx

@@ -50,59 +50,52 @@ export const CoreConfigSection = () => {
 		setCurrentConfig(tenantInfo.coreConfig);
 	}, [tenantInfo.coreConfig]);
 
-	const handleEditOrSave = async () => {
-		if (!isEditing) {
-			setIsEditing(true);
-		} else {
-			const errors = Object.entries(currentConfig).reduce((acc: Record<string, string>, [key, value]) => {
-				const propertyObj = coreConfigOptions.find((property) => property.name === key);
-
-				if (value === "" || value === undefined) {
-					acc[key] = "Value cannot be empty";
-					return acc;
-				}
-				if (propertyObj?.type === "number" && isNaN(Number(value))) {
-					acc[key] = "Value must be a number";
-					return acc;
-				}
+	const handleSave = async () => {
+		const errors = Object.entries(currentConfig).reduce((acc: Record<string, string>, [key, value]) => {
+			const propertyObj = coreConfigOptions.find((property) => property.name === key);
 
+			if (value === "" || value === undefined) {
+				acc[key] = "Value cannot be empty";
 				return acc;
-			}, {});
+			}
+			if (propertyObj?.type === "number" && isNaN(Number(value))) {
+				acc[key] = "Value must be a number";
+				return acc;
+			}
 
-			setConfigErrors(errors);
+			return acc;
+		}, {});
 
-			if (Object.keys(errors).length > 0) {
-				return;
-			}
+		setConfigErrors(errors);
 
-			try {
-				const parsedConfig = Object.entries(currentConfig).reduce(
-					(acc: Record<string, unknown>, [key, value]) => {
-						const propertyObj = coreConfigOptions.find((property) => property.name === key);
-						if (propertyObj?.type === "number") {
-							acc[key] = Number(value);
-						} else {
-							acc[key] = value;
-						}
-						return acc;
-					},
-					{}
-				);
-				setIsSavingProperties(true);
-				await updateTenant(tenantInfo.tenantId, {
-					coreConfig: parsedConfig,
-				});
-				setIsEditing(false);
-				await refetchTenant();
-			} catch (_) {
-				showToast({
-					iconImage: getImageUrl("form-field-error-icon.svg"),
-					toastType: "error",
-					children: <>Something went wrong!, Failed to fetch tenants login methods!</>,
-				});
-			} finally {
-				setIsSavingProperties(false);
-			}
+		if (Object.keys(errors).length > 0) {
+			return;
+		}
+
+		try {
+			const parsedConfig = Object.entries(currentConfig).reduce((acc: Record<string, unknown>, [key, value]) => {
+				const propertyObj = coreConfigOptions.find((property) => property.name === key);
+				if (propertyObj?.type === "number") {
+					acc[key] = Number(value);
+				} else {
+					acc[key] = value;
+				}
+				return acc;
+			}, {});
+			setIsSavingProperties(true);
+			await updateTenant(tenantInfo.tenantId, {
+				coreConfig: parsedConfig,
+			});
+			setIsEditing(false);
+			await refetchTenant();
+		} catch (_) {
+			showToast({
+				iconImage: getImageUrl("form-field-error-icon.svg"),
+				toastType: "error",
+				children: <>Something went wrong!, Failed to fetch tenants login methods!</>,
+			});
+		} finally {
+			setIsSavingProperties(false);
 		}
 	};
 
@@ -114,9 +107,10 @@ export const CoreConfigSection = () => {
 				</PanelHeaderTitleWithTooltip>
 				{hasProperties && (
 					<PanelHeaderAction
-						setIsEditing={handleEditOrSave}
+						setIsEditing={setIsEditing}
 						isEditing={isEditing}
 						isSaving={isSavingProperties}
+						handleSave={handleSave}
 					/>
 				)}
 			</PanelHeader>

src/ui/components/tenants/tenantDetail/tenantDetail.scss

@@ -73,6 +73,12 @@
 		border-radius: 6px;
 		width: 100%;
 
+		@media screen and (max-width: 480px) {
+			padding: 0px;
+			border: none;
+			margin-top: 20px;
+		}
+
 		&__header {
 			display: flex;
 			margin-bottom: 16px;
@@ -88,13 +94,21 @@
 				text-transform: uppercase;
 				flex: 1;
 			}
+
+			@media screen and (max-width: 480px) {
+				display: none;
+			}
 		}
 
 		&__body {
 			display: flex;
 			flex-direction: column;
 			gap: 16px;
 			margin-top: 20px;
+
+			@media screen and (max-width: 480px) {
+				margin-top: 0px;
+			}
 		}
 
 		&__row {
@@ -109,6 +123,13 @@
 			font-weight: 500;
 			line-height: normal;
 
+			@media screen and (max-width: 480px) {
+				flex-direction: column;
+				align-items: flex-start;
+				justify-content: space-between;
+				height: 75px;
+			}
+
 			&__label {
 				display: flex;
 				align-items: center;
@@ -123,6 +144,11 @@
 				justify-content: space-between;
 				align-items: center;
 
+				@media screen and (max-width: 480px) {
+					padding-left: 0px;
+					width: 100%;
+				}
+
 				&__text {
 					max-width: 195px;
 					padding: 3px 8px;
@@ -166,6 +192,15 @@
 		margin-top: 16px;
 		align-items: center;
 
+		@media screen and (max-width: 480px) {
+			flex-direction: column;
+			gap: 16px;
+			align-items: stretch;
+			button {
+				justify-content: center;
+			}
+		}
+
 		&__footer-link {
 			font-size: 14px;
 			font-weight: 500;
@@ -234,13 +269,21 @@
 			grid-template-columns: 1fr 1fr 1fr;
 			gap: 16px;
 
+			@media screen and (max-width: 480px) {
+				grid-template-columns: 1fr;
+			}
+
 			&__factor {
 				display: flex;
 				align-items: center;
 
 				max-width: 185px;
 				justify-content: space-between;
 
+				@media screen and (max-width: 480px) {
+					max-width: 100%;
+				}
+
 				&__label-container {
 					display: flex;
 					gap: 10px;

src/ui/components/tenants/tenantDetail/tenantDetailPanel/TenantDetailPanel.tsx

@@ -69,10 +69,12 @@ export const PanelHeaderTitleWithTooltip = ({
 
 export const PanelHeaderAction = ({
 	setIsEditing,
+	handleSave,
 	isEditing,
 	isSaving,
 }: {
 	setIsEditing: (isEditing: boolean) => void;
+	handleSave: () => void;
 	isEditing: boolean;
 	isSaving?: boolean;
 }) => {
@@ -87,13 +89,22 @@ export const PanelHeaderAction = ({
 			}}
 		/>
 	) : (
-		<Button
-			size="sm"
-			color="secondary"
-			isLoading={isSaving}
-			disabled={isSaving}
-			onClick={() => setIsEditing(false)}>
-			Save
-		</Button>
+		<div className="panel-root__header__actions">
+			<Button
+				size="sm"
+				color="gray-outline"
+				disabled={isSaving}
+				onClick={() => setIsEditing(false)}>
+				Cancel
+			</Button>
+			<Button
+				size="sm"
+				color="secondary"
+				isLoading={isSaving}
+				disabled={isSaving}
+				onClick={handleSave}>
+				Save
+			</Button>
+		</div>
 	);
 };

src/ui/components/tenants/tenantDetail/tenantDetailPanel/tenantDetailPanel.scss

@@ -49,6 +49,11 @@
 				}
 			}
 		}
+
+		&__actions {
+			display: flex;
+			gap: 16px;
+		}
 	}
 
 	&__divider {