<commit_before>.messageList {
	&:not(.messageReducedList) {
		@include screen-md-up {
			border-top: 1px solid $wcfContentBorder;
			
			> li {
				border-bottom: 1px solid $wcfContentBorder;
				padding: 30px 0;
				
				&.messageListPagination:last-child {
					border-bottom-width: 0;
				}
			}
		}
		
		@include screen-sm-down {
			.messageSidebar {
				border-top: 1px solid $wcfContentBorder;
			}
			
			> .messageListPagination {
				border-top: 1px solid $wcfContentBorder;
				margin: 0 -10px;
				padding: 20px 10px;
			}
		}
	}
	
	&.messageReducedList {
		@include screen-md-up {
			> li:not(:last-child) {
				padding-bottom: 30px;
			}
		}
	}
	
	> .anchorFixedHeader:target {
		margin-top: -49px;
		pointer-events: none;
		position: relative;
		z-index: 10;
		
		&::after {
			content: "";
			display: block;
			height: 50px;
		}
		
		> .message {
			pointer-events: all;
			transform: translateY(49px);
		}
	}
	
	@include screen-sm-down {
		> li:not(:last-child) {
			padding-bottom: 30px;
		}
	}
}

.messageCheckboxLabel {
	cursor: pointer;
	display: block;
	position: relative;
	
	&::before {
		content: $fa-var-square-o;
		display: block;
		font-family: FontAwesome;
		position: absolute;
	}
	
	&::after {
		color: rgb(0, 150, 0);
		content: $fa-var-check;
		display: none;
		font-family: FontAwesome;
		position: absolute;
	}
	
	> input[type="checkbox"] {
		display: none;
	}
}

.message {
	@include screen-md-up {
		display: flex;
	}
	
	.messageClipboardCheckbox {
		height: 24px;
		width: 24px;
		
		@extend .messageCheckboxLabel;
		
		&::before {
			font-size: 25px;
			left: 2px;
			top: -6px;
		}
	}
	
	&.jsMarked .messageClipboardCheckbox::after {
		display: block;
		font-size: 14px;
		left: 5px;
		top: 1px;
	}
}

/* sidebar */
.messageSidebar {
	background-color: $wcfSidebarBackground;
	color: $wcfSidebarText;
	position: relative;
	
	@include screen-md-up {
		align-self: flex-start;
		border-radius: 3px;
		flex: 0 0 240px;
		padding: 20px;
		text-align: center;
		
		& + .messageContent {
			flex-basis: calc(100% - 270px);
			margin-left: 30px;
			max-width: calc(100% - 270px);
		}
	}
	
	@include screen-sm-down {
		margin: 0 -10px;
		padding: 10px;
		
		.messageAuthor {
			flex: 0 0 auto;
			position: relative;
			
			.userAvatar {
				display: block;
				margin: 0;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				
				.userAvatarImage {
					max-height: 48px;
					max-width: 48px;<commit_msg>Work-around for very long usernames<commit_after>.messageList {
	&:not(.messageReducedList) {
		@include screen-md-up {
			border-top: 1px solid $wcfContentBorder;
			
			> li {
				border-bottom: 1px solid $wcfContentBorder;
				padding: 30px 0;
				
				&.messageListPagination:last-child {
					border-bottom-width: 0;
				}
			}
		}
		
		@include screen-sm-down {
			.messageSidebar {
				border-top: 1px solid $wcfContentBorder;
			}
			
			> .messageListPagination {
				border-top: 1px solid $wcfContentBorder;
				margin: 0 -10px;
				padding: 20px 10px;
			}
		}
	}
	
	&.messageReducedList {
		@include screen-md-up {
			> li:not(:last-child) {
				padding-bottom: 30px;
			}
		}
	}
	
	> .anchorFixedHeader:target {
		margin-top: -49px;
		pointer-events: none;
		position: relative;
		z-index: 10;
		
		&::after {
			content: "";
			display: block;
			height: 50px;
		}
		
		> .message {
			pointer-events: all;
			transform: translateY(49px);
		}
	}
	
	@include screen-sm-down {
		> li:not(:last-child) {
			padding-bottom: 30px;
		}
	}
}

.messageCheckboxLabel {
	cursor: pointer;
	display: block;
	position: relative;
	
	&::before {
		content: $fa-var-square-o;
		display: block;
		font-family: FontAwesome;
		position: absolute;
	}
	
	&::after {
		color: rgb(0, 150, 0);
		content: $fa-var-check;
		display: none;
		font-family: FontAwesome;
		position: absolute;
	}
	
	> input[type="checkbox"] {
		display: none;
	}
}

.message {
	@include screen-md-up {
		display: flex;
	}
	
	.messageClipboardCheckbox {
		height: 24px;
		width: 24px;
		
		@extend .messageCheckboxLabel;
		
		&::before {
			font-size: 25px;
			left: 2px;
			top: -6px;
		}
	}
	
	&.jsMarked .messageClipboardCheckbox::after {
		display: block;
		font-size: 14px;
		left: 5px;
		top: 1px;
	}
}

/* sidebar */
.messageSidebar {
	background-color: $wcfSidebarBackground;
	color: $wcfSidebarText;
	position: relative;
	
	@include screen-md-up {
		align-self: flex-start;
		border-radius: 3px;
		flex: 0 0 240px;
		padding: 20px;
		text-align: center;
		
		& + .messageContent {
			flex-basis: calc(100% - 270px);
			margin-left: 30px;
			max-width: calc(100% - 270px);
		}
		
		.username {
			/* required to fix wrapping behavior in combination with
			   `overflow-wrap` / `word-wrap` */
			display: block;
		}
	}
	
	@include screen-sm-down {
		margin: 0 -10px;
		padding: 10px;
		
		.messageAuthor {
			flex: 0 0 auto;
			position: relative;
			
			.userAvatar {
				display: block;
				margin: 0;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				
				.userAvatarImage {
					max-height: 48px;
					max-width: 48px;
{'fraction_non_alphanumeric': 0.14032670734107458, 'fraction_numerical': 0.03227711080495965, 'mean_word_length': 2.648241206030151, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1736', 'n_tokens_mistral': 2500, 'n_tokens_neox': 1912, 'n_words': 396}