Merge pull request #40932 from nextcloud/enh/36965/fix-account-settings

fix profile visibility settings being too wide
nextcloud · Oct 17, 2023 · a21d6c5 · a21d6c5
2 parents 91118a5 + d4415ba
commit a21d6c5
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 27 deletions.
diff --git a/apps/settings/css/settings.css b/apps/settings/css/settings.css
diff --git a/apps/settings/css/settings.css.map b/apps/settings/css/settings.css.map
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -89,7 +89,7 @@ select {
 	display: grid;
 	padding: 20px;
 	max-width: 1700px;
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
 	grid-column-gap: 10px;
 
 	.section {

diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
@@ -292,7 +292,7 @@ section {
 		justify-content: center;
 		align-items: center;
 		gap: 16px 0;
-		width: 300px;
+		width: min(100%, 300px);
 
 		span {
 			color: var(--color-text-lighter);

diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
@@ -69,7 +69,9 @@ html {
 a {
 	display: block;
 	height: 44px;
-	width: 290px;
+	width: min(100%, 290px);
+	overflow: hidden;
+	text-overflow: ellipsis;
 	line-height: 44px;
 	padding: 0 16px;
 	margin: 14px auto;

diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -95,7 +95,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	position: relative;
-	width: 290px;
+	width: min(100%, 290px);
 	height: 116px;
 	margin: 14px auto;
 	border-radius: var(--border-radius-large);

diff --git a/...ettings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/...ettings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
@@ -141,22 +141,5 @@ section {
 			}
 		}
 	}
-
-	.visibility-dropdowns {
-		display: grid;
-		gap: 10px 40px;
-	}
-
-	@media (min-width: 1200px) {
-		width: 940px;
-
-		.visibility-dropdowns {
-			grid-auto-flow: column;
-		}
-	}
-
-	@media (max-width: 1200px) {
-		width: 470px;
-	}
 }
 </style>
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
@@ -149,7 +149,7 @@ export default {
 <style lang="scss" scoped>
 .visibility-container {
 	display: flex;
-	width: max-content;
+	flex-wrap: wrap;
 
 	&.disabled {
 		filter: grayscale(1);

diff --git a/dist/settings-vue-settings-personal-info.js b/dist/settings-vue-settings-personal-info.js
diff --git a/dist/settings-vue-settings-personal-info.js.map b/dist/settings-vue-settings-personal-info.js.map