From 81c9571943402e4e7afcc864f73f00065ff4a8a8 Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Fri, 12 Apr 2024 18:46:24 +0530 Subject: [PATCH] Fix responsiveness --- .../keyValueInput/keyValueInput.scss | 6 ++ .../thirdPartyProvidersList.scss | 7 ++ .../tenants/tenantDetail/tenantDetail.scss | 90 ++----------------- .../thirdPartyProviderConfig.scss | 10 +++ .../ThirdPartyProviderInput.tsx | 1 + .../thirdPartyProviderInput.scss | 5 ++ 6 files changed, 38 insertions(+), 81 deletions(-) diff --git a/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss b/src/ui/components/tenants/tenantDetail/keyValueInput/keyValueInput.scss index 9a19c748..603fe751 100644 --- 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 index e67c687f..7c9a7f8f 100644 --- 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 index 569a5fe9..6deeb5fa 100644 --- 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/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss b/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss index bf1c6eee..2f303fa7 100644 --- a/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/thirdPartyProviderConfig.scss +++ b/src/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 index 10e7599d..aaa5fbe9 100644 --- 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} /> + ); diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss b/src/ui/components/tenants/tenantDetail/thirdPartyProviderInput/thirdPartyProviderInput.scss index 2cea1e54..a1dc87ce 100644 --- 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;