diff --git a/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/ApplicationDetail.module.css b/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/ApplicationDetail.module.css index d291b2090..25e2b1dc9 100644 --- a/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/ApplicationDetail.module.css +++ b/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/ApplicationDetail.module.css @@ -331,19 +331,7 @@ } .botPermissionList { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -@media (max-width: 1080px) { - .botPermissionList { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 720px) { - .botPermissionList { - grid-template-columns: 1fr; - } + grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .scopeItem { @@ -354,9 +342,19 @@ min-width: 0; } +.scopeCheckbox { + flex: 1 1 auto; + min-width: 0; +} + +.scopeCheckbox > div, +.scopeCheckbox > div > div { + min-width: 0; + max-width: 100%; +} + .scopeLabel { - display: inline-flex; - align-items: center; + display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; diff --git a/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/OAuthBuilderSection.tsx b/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/OAuthBuilderSection.tsx index da524fc69..e559641c9 100644 --- a/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/OAuthBuilderSection.tsx +++ b/fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/OAuthBuilderSection.tsx @@ -117,6 +117,7 @@ export const OAuthBuilderSection: React.FC = ({ checked={!!field.value} onChange={(checked) => field.onChange(checked)} size="small" + className={styles.scopeCheckbox} data-flx="user.applications-tab.application-detail.o-auth-builder-section.checkbox.change" > = ({ checked={!!field.value} onChange={(checked) => field.onChange(checked)} size="small" + className={styles.scopeCheckbox} data-flx="user.applications-tab.application-detail.o-auth-builder-section.checkbox.change--2" >