fix: polish list item

Signed-off-by: greta <gretadoci@gmail.com>

src/components/Envelope.vue

@@ -937,7 +937,7 @@ export default {
 	// In message list, but not the one in the action menu
 	&.app-content-list-item-star {
 		background-image: none;
-		left: 5px;
+		left: 1px;
 		top: 8px;
 		opacity: 1;
 
@@ -977,7 +977,7 @@ export default {
 .junk-icon-style {
 	opacity: .2;
 	display: flex;
-	top: 42px;
+	top: 32px;
 	left: 32px;
 	background-size: 16px;
 	height: 20px;
@@ -1011,6 +1011,7 @@ export default {
 	font-weight: bold;
 	padding-left: 2px;
 	padding-right: 2px;
+	white-space: nowrap;
 }
 .tag-group__bg {
 	position: absolute;
@@ -1026,6 +1027,7 @@ export default {
 	position: relative;
 	margin-right: 1px;
 	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .list-item__wrapper:deep() {
 	list-style: none;
@@ -1035,14 +1037,14 @@ export default {
 }
 .icon-important.app-content-list-item-star:deep() {
 	position: absolute;
-	top: 8px;
+	top: 5px;
 	z-index: 1;
 }
 .app-content-list-item-star.favorite-icon-style {
 	display: inline-block;
 	position: absolute;
-	margin-bottom: 45px;
-	margin-left: 30px;
+	top: 3px;
+	left: 30px;
 	cursor: pointer;
 	stroke: var(--color-main-background);
 	stroke-width: 2;
@@ -1070,15 +1072,13 @@ export default {
 	margin-top: 6px;
 	margin-bottom: 6px;
 }
-:deep(.list-item) {
-	flex-wrap: wrap;
-}
 :deep(.line-two__subtitle) {
 	display: flex;
 	flex-basis: 100%;
 	padding-left: 40px;
 	width: 450px;
 }
+
 :deep(.line-one__title) {
 	flex-direction: row;
 	display: flex;

src/components/EnvelopeSkeleton.vue

@@ -437,13 +437,13 @@ export default {
 	flex: 0 0 auto;
 	justify-content: flex-start;
 	// we need to make sure the elements are not cut off by the border
-	padding: var(--list-item-padding);
 	width: 100%;
 	border-radius: var(--border-radius-element, 32px);
 	cursor: pointer;
 	transition: background-color var(--animation-quick) ease-in-out;
 	list-style: none;
 	flex-wrap: nowrap !important;
+	padding: var(--default-grid-baseline);
 
 	&:hover,
 	&:has(:active),
@@ -468,7 +468,8 @@ export default {
 			min-width: 100px;
 			flex: 1 1 10%;
 			font-weight: 500;
-			max-width: 100%;
+			// we changed the time/date and actions to be alighned with the name
+			max-width: 78%;
 			line-height: var(--default-line-height);
 		}
 
@@ -509,6 +510,8 @@ export default {
 				align-items: end;
 				white-space: nowrap;
 				margin-left: calc(var(--default-grid-baseline) * 2);
+				// 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;
@@ -602,16 +605,17 @@ export default {
 
 	&__actions {
 		flex: 0 0 auto;
-		align-self: center;
 		justify-content: center;
+		align-self: start;
+		margin-top: -4px;
 	}
 
 }
 
 // Force icon to be in line with the first two lines
 :deep(.app-content-list-item-icon), :deep(.avatardiv), :deep(.avatardiv__initials-wrapper) {
-	height: calc(var(--default-line-height) * var(--default-font-size) * 2) !important;
-	width: calc(var(--default-line-height) * var(--default-font-size) * 2) !important;
+	height: calc(var(--header-menu-item-height) - 4px);
+	width: calc(var(--header-menu-item-height) - 4px);
 }
 
 :deep(.avatardiv__initials){