Merge pull request #40907 from nextcloud/enh/36965/fix-personal-settings

fix several personal settings problems

apps/dav/src/views/Availability.vue

@@ -2,7 +2,7 @@
 	<NcSettingsSection :name="$t('dav', 'Availability')"
 		:description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
 		<div class="time-zone">
-			<strong>
+			<strong class="time-zone__heading">
 				{{ $t('dav', 'Time zone:') }}
 			</strong>
 			<span class="time-zone-text">
@@ -126,83 +126,78 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.availability-day {
+:deep(.availability-day) {
 	padding: 0 10px 0 10px;
 	position: absolute;
 }
-.availability-slots {
+:deep(.availability-slots) {
 	display: flex;
-	white-space: nowrap;
+	white-space: normal;
 }
-.availability-slot {
+:deep(.availability-slot) {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	flex-wrap: wrap;
 }
-.availability-slot-group {
+:deep(.availability-slot-group) {
 	display: flex;
 	flex-direction: column;
 }
-::v-deep .mx-input-wrapper {
+:deep(.mx-input-wrapper) {
 	width: 85px;
 }
-::v-deep .mx-datepicker {
+:deep(.mx-datepicker) {
 	width: 97px;
 }
-::v-deep .multiselect {
+:deep(.multiselect) {
 	border: 1px solid var(--color-border-dark);
 	width: 120px;
 }
 .time-zone {
 	padding: 32px 12px 12px 0;
+    display: flex;
+    flex-wrap: wrap;
+
+	&__heading {
+		margin-right: calc(var(--default-grid-baseline) * 2);
+		line-height: var(--default-clickable-area);
+	}
 }
 .grid-table {
 	display: grid;
 	margin-bottom: 32px;
 	grid-column-gap: 24px;
 	grid-row-gap: 6px;
-	grid-template-columns: min-content min-content min-content;
+	grid-template-columns: min-content auto min-content;
+	max-width: 500px;
 }
 .button {
 	align-self: flex-end;
 }
-.label-weekday {
+:deep(.label-weekday) {
 	position: relative;
 	display: inline-flex;
 	padding-top: 4px;
-}
-.delete-slot {
-	background-color: transparent;
-	border: none;
-	padding-bottom: 12px;
-	opacity: .5;
-	&:hover {
-		opacity: 1;
-	}
+	align-self: center;
 }
 
-.add-another {
-	background-color: transparent;
-	border: none;
-	opacity: .5;
-	display: inline-flex;
-	padding: 0;
-	margin: 0;
-	margin-bottom: 3px;
+:deep(.delete-slot) {
+	padding-bottom: unset;
+}
 
-	&:hover {
-		opacity: 1;
-	}
+:deep(.add-another) {
+	align-self: center;
 }
+
 .to-text {
 	padding-right: 12px;
 }
-.time-zone-text{
-	padding-left: 22px;
-}
+
 .empty-content {
 	color: var(--color-text-lighter);
 	margin-top: 4px;
+	align-self: center;
 }
 
 </style>

apps/federatedfilesharing/src/components/PersonalSettings.vue

@@ -58,7 +58,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 						xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M502 197q-96 0-96.5 1.5t-1.5 137-1.5 138-2 2.5T266 432.5 132.5 390t-30 94T74 578l232 77q21 8 21 10t-79.5 117.5T168 899t79.5 56.5T328 1011t81-110 82-110 41 55l83 115q43 60 44 60t79.5-58 79-59-76-112.5-76-113.5T795 632.5t129.5-44-28-94T867 400t-128 42-128.5 43-2.5-7.5-1-38.5l-3-108q-4-133-5-133.5t-97-.5z" /></svg>
 				</template>
 			</NcButton>
-			<NcButton @click="showHtml = !showHtml">
+			<NcButton @click="showHtml = !showHtml"
+				class="social-button__website-button">
 				<template #icon>
 					<Web :size="20" />
 				</template>
@@ -180,10 +181,14 @@ export default {
 			margin-left: 0.5rem;
 			margin-top: 1rem;
 		}
+		&__website-button {
+			width: min(100%, 400px) !important;
+		}
 	}
 	.cloud-id-text {
 		display: flex;
 		align-items: center;
+		flex-wrap: wrap;
 		button {
 			display: inline-flex;
 		}

apps/files/src/components/TransferOwnershipDialogue.vue

@@ -25,7 +25,9 @@
 		<form @submit.prevent="submit">
 			<p class="transfer-select-row">
 				<span>{{ readableDirectory }}</span>
-				<NcButton v-if="directory === undefined" @click.prevent="start">
+				<NcButton v-if="directory === undefined" 
+					class="transfer-select-row__choose_button"
+					@click.prevent="start">
 					{{ t('files', 'Choose file or folder to transfer') }}
 				</NcButton>
 				<NcButton v-else @click.prevent="start">
@@ -225,10 +227,12 @@ p {
 }
 .new-owner-row {
 	display: flex;
+	flex-wrap: wrap;
 
 	label {
 		display: flex;
 		align-items: center;
+		margin-bottom: calc(var(--default-grid-baseline) * 2);
 
 		span {
 			margin-right: 8px;
@@ -244,5 +248,9 @@ p {
 	span {
 		margin-right: 8px;
 	}
+
+	&__choose_button {
+		width: min(100%, 400px) !important;
+	}
 }
 </style>

apps/settings/src/components/AuthTokenSetupDialogue.vue

@@ -189,6 +189,8 @@ export default {
 	.app-password-row {
 		display: flex;
 		align-items: center;
+		flex-wrap: wrap;
+		margin-top: calc(var(--default-grid-baseline) * 2);
 
 		.icon {
 			background-size: 16px 16px;
@@ -203,8 +205,8 @@ export default {
 
 	.app-password-label {
 		display: table-cell;
-		padding-right: 1em;
-		text-align: right;
+		margin-right: 1em;
+		text-align: left;
 		vertical-align: middle;
 		width: 100px;
 	}