fix(apps): stop bot permission labels overlapping (#3148)

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));
+	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
-}
-
-@media (max-width: 1080px) {
-	.botPermissionList {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-}
-
-@media (max-width: 720px) {
-	.botPermissionList {
-		grid-template-columns: 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;
+	display: block;
-	align-items: center;
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;

fluxer_app/src/features/user/components/modals/tabs/applications_tab/application_detail/OAuthBuilderSection.tsx

@@ -117,6 +117,7 @@ export const OAuthBuilderSection: React.FC<OAuthBuilderSectionProps> = ({
 											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"
 										>
 											<span
@@ -179,6 +180,7 @@ export const OAuthBuilderSection: React.FC<OAuthBuilderSectionProps> = ({
 												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"
 											>
 												<span