fix several personal settings problems

Signed-off-by: Simon L <szaimen@e.mail.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

1 files changed, 29 insertions, 34 deletions

diff --git a/apps/dav/src/views/Availability.vue b/apps/dav/src/views/Availability.vue
index a02945b0073..634e33189fb 100644
--- a/apps/dav/src/views/Availability.vue
+++ b/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>