Merge pull request #11400 from nextcloud/feat/subject-aligments

feat: make thread elements have the same space around them

Author: GretaD

src/components/EnvelopeSkeleton.vue

@@ -429,7 +429,7 @@ export default {
 	--list-item-padding: calc(var(--default-grid-baseline) * 2);
 	// The content are two lines of text and respect the 1.5 line height
 	--list-item-border-radius: var(--border-radius-element, 32px);
-	--list-item-height: calc(4 * var(--default-line-height));
+	--list-item-height: 4.5lh;
 	height: var(--list-item-height);
 
 	// General styles
@@ -484,6 +484,8 @@ export default {
 			&__main {
 				flex: 0 1 auto;
 				min-width: 0;
+				line-height: var(--default-line-height);
+				min-height: var(--default-line-height);
 			}
 
 			&__subname {
@@ -511,12 +513,12 @@ export default {
 				justify-content: start;
 				align-items: end;
 				white-space: nowrap;
-				margin-inline-start: calc(var(--default-grid-baseline) * 2);
+				gap: 4px;
 				// to align details on top instead of in the center. The right way to do it would be to change the template, but that breaks one-line layout
 				margin-top: -22px;
 
 				&__details {
-					margin: 0 9px !important;
+					margin: 0 4px !important;
 					color: var(--color-text-maxcontrast);
 					height: var(--default-line-height);
 					font-weight: normal;
@@ -529,7 +531,7 @@ export default {
 					align-items: center;
 
 					&__indicator {
-						margin: 0 5px;
+						margin: 0 4px;
 					}
 				}
 			}

src/components/Message.vue

@@ -180,7 +180,7 @@ export default {
 }
 
 .reply-buttons {
-	margin: 0 30px 0 50px;
+	margin: 26px 30px 0 50px;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 5px;
@@ -205,6 +205,7 @@ export default {
 
 	&__notsuggested {
 		margin-inline-start: auto;
+		margin-inline-end: -12px;
 	}
 }
 @media screen and (max-width: 600px) {

src/components/Thread.vue

@@ -579,17 +579,27 @@ export default {
 	position: -webkit-sticky; // ios/safari fallback
 	position: sticky;
 	top: 0;
-	background: -webkit-linear-gradient(var(--color-main-background), var(--color-main-background) 80%, rgba(255,255,255,0));
-	background: -o-linear-gradient(var(--color-main-background), var(--color-main-background)  80%, rgba(255,255,255,0));
-	background: -moz-linear-gradient(var(--color-main-background), var(--color-main-background)  80%, rgba(255,255,255,0));
-	background: linear-gradient(var(--color-main-background), var(--color-main-background)  80%, rgba(255,255,255,0));
+	margin-bottom: 5px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		inset-inline-start: 50%;
+		transform: translateX(-50%);
+		width: 100vw;
+		height: 100%;
+		background: var(--color-main-background);
+		border-bottom: var(--border-width-input-focused) solid var(--color-border);
+		z-index: -1;
+	}
 }
 
 #mail-thread-header-fields {
 	// initial width
 	width: 0;
 	// while scrolling, the back button overlaps with subject on small screen
-	padding-inline-start: calc(var(--default-grid-baseline) * 21);
+	padding-inline-start: calc(var(--border-radius-container-large) + var(--header-height));
 	// grow and try to fill 100%
 	flex: 1 1 auto;
 	h2,
@@ -605,7 +615,6 @@ export default {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-
 	.transparency {
 		opacity: 0.6;
 		a {
@@ -669,7 +678,7 @@ export default {
 	display: flex;
 	align-items: stretch;
 
-	::deep(.v-popper--theme-dropdown.v-popper__popper .v-popper__inner) {
+	:deep(.v-popper--theme-dropdown.v-popper__popper .v-popper__inner) {
 		height: 300px;
 		width: 250px;
 		overflow: auto;