Fix responsiveness

supertokens · Apr 12, 2024 · 81c9571 · 81c9571
1 parent 35fca6e
commit 81c9571
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 81 deletions.
diff --git a/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss b/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss
@@ -40,6 +40,12 @@
 		.third-party-provider-input-container {
 			gap: 10px;
 		}
+
+		@media screen and (max-width: 480px) {
+			flex-direction: column;
+			gap: 10px;
+			padding-bottom: 10px;
+		}
 	}
 
 	&__divider {

diff --git a/src/ui/components/tenants/tenantDetail/providerListDialog/thirdPartyProvidersList.scss b/src/ui/components/tenants/tenantDetail/providerListDialog/thirdPartyProvidersList.scss
@@ -18,6 +18,9 @@
 	height: fit-content;
 	overflow-y: auto;
 	padding: 24px;
+	@media screen and (max-width: 768px) {
+		height: auto;
+	}
 }
 
 .provider-list-header {
@@ -62,6 +65,10 @@
 		width: 100%;
 		gap: 24px;
 		grid-template-columns: 1fr 1fr 1fr;
+
+		@media screen and (max-width: 768px) {
+			grid-template-columns: 1fr 1fr;
+		}
 	}
 }
 

diff --git a/src/ui/components/tenants/tenantDetail/tenantDetail.scss b/src/ui/components/tenants/tenantDetail/tenantDetail.scss
@@ -123,6 +123,10 @@
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
+
+				@media screen and (max-width: 480px) {
+					max-width: 205px;
+				}
 			}
 
 			&__label-container {
@@ -145,7 +149,7 @@
 				}
 
 				&__text {
-					max-width: 500px;
+					max-width: 260px;
 					padding: 3px 8px;
 					background: var(--color-copy-box-bg);
 					color: var(--color-copy-box);
@@ -226,84 +230,6 @@
 			color: var(--color-secondary-text);
 		}
 
-		// &__row {
-		// 	position: relative;
-		// }
-
-		// &__row-container {
-		// 	background-color: var(--color-config-bg);
-		// 	border-radius: 6px;
-		// 	padding: 10px 24px;
-		// 	border: 1px solid var(--color-secondary);
-		// 	width: 100%;
-
-		// 	&--editing {
-		// 		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
-		// 	}
-
-		// 	&--uneditable {
-		// 		opacity: 0.6;
-		// 	}
-		// }
-
-		// &__row-info {
-		// 	display: flex;
-		// 	align-items: center;
-		// 	justify-content: space-between;
-		// 	width: 100%;
-		// }
-
-		// &__row-name {
-		// 	display: flex;
-		// 	gap: 10px;
-		// 	align-items: center;
-		// 	padding: 4px 10px;
-		// 	border-radius: 3px;
-		// 	background-color: var(--color-config-name-bg);
-		// 	font-size: 14px;
-		// 	line-height: 19px;
-		// 	font-weight: 500;
-		// 	color: var(--color-config-property-label);
-
-		// 	path {
-		// 		fill: var(--color-config-property-label);
-		// 	}
-		// }
-
-		// &__row-buttons {
-		// 	display: flex;
-		// 	gap: 10px;
-		// 	align-items: center;
-		// }
-
-		// &__row-value-container {
-		// 	margin-top: 14px;
-		// 	display: flex;
-		// 	gap: 9px;
-
-		// 	> label {
-		// 		font-family: inherit;
-		// 		font-weight: 500;
-		// 		font-size: 14px;
-		// 		line-height: 19px;
-		// 		color: var(--color-black);
-		// 		transform: translateY(4px);
-		// 	}
-
-		// 	&--toggle {
-		// 		align-items: center;
-		// 		> label {
-		// 			transform: translateY(0);
-		// 		}
-		// 	}
-		// }
-
-		// &__row-field-container {
-		// 	display: flex;
-		// 	flex-direction: column;
-		// 	gap: 8px;
-		// }
-
 		&__button-link {
 			background: none;
 			border: none;
@@ -393,8 +319,10 @@
 				}
 
 				&--fixed-gap {
-					gap: 16px;
-					justify-content: flex-start;
+					@media screen and (min-width: 480px) {
+						gap: 16px;
+						justify-content: flex-start;
+					}
 				}
 			}
 		}

diff --git a/...ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss b/...ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss
@@ -20,6 +20,12 @@
 	width: 100%;
 	align-items: center;
 
+	@media screen and (max-width: 480px) {
+		flex-direction: column;
+		gap: 10px;
+		align-items: flex-start;
+	}
+
 	&__title {
 		display: flex;
 		gap: 20px;
@@ -394,6 +400,10 @@
 .provider-email-select {
 	display: flex;
 	gap: 75px;
+	@media screen and (max-width: 480px) {
+		flex-direction: column;
+		gap: 10px;
+	}
 }
 
 .email-select-container {

diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/ThirdPartyProviderInput.tsx b/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/ThirdPartyProviderInput.tsx
@@ -33,6 +33,7 @@ export const ThirdPartyProviderInput = (props: ThirdPartyProviderInputProps) =>
 				isRequired={props.isRequired}
 				minLabelWidth={props.minLabelWidth}
 			/>
+
 			<InputField {...rest} />
 		</div>
 	);

diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss b/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss
@@ -18,6 +18,11 @@
 	width: 100%;
 	gap: 20px;
 
+	@media screen and (max-width: 480px) {
+		flex-direction: column;
+		gap: 12px;
+	}
+
 	&__label {
 		font-family: inherit;
 		font-weight: 500;