add picture comment on lightbox fullscreen

style/_common.scss

@@ -41,6 +41,12 @@
 	-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
 }
 
+@mixin no-text-overflow() {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
 @keyframes spotlogo {
     0% {
         transform: scale(1);

style/_lightbox.scss

@@ -19,7 +19,7 @@
 	justify-content: center;
 	width: 100%;
 	height: 100%;
-	
+
 	&.vertical {
 		flex-direction: column;
 		
@@ -29,16 +29,24 @@
 			
 			.lb-data {
 				.lb-details {
-					display: inline;
+					display: inline-block;
+					width: calc(100% - 1.25rem);
 					
-					.lb-caption-line {
-						padding-right: 1em;
+					.lb-caption {
+						.lb-caption-line {
+							display: inline-block;
+							padding-right: 1em;
+							line-height: 1.33333333333em; //icon height
+							overflow: hidden;
+							
+							&.comment {
+								max-width: 50%;
+							}
+						}
 					}
 				}
 			
 				.lb-closeContainer {
-					display: inline;
-					
 					.lb-close {
 						text-align: right;
 					}
@@ -57,16 +65,20 @@
 				.lb-caption-line {
 					display: block;
 					margin-top: 1em;
+					line-height: 1.33333333em;
 				}
 
 				.lb-closeContainer .lb-close {
 					margin-top: 1em;
 					float: none;
+					text-align: left;
 				}
 			}
 		}
 	}
 	
+	/* Image */
+
 	.lb-outerContainer {
 		margin: 0;
 		border-radius:0;
@@ -124,7 +136,8 @@
 			}
 		}
 	}
-	
+	/* Titles */
+
 	.lb-dataContainer {
 		margin: 0;
 		padding: 0;
@@ -133,27 +146,34 @@
 		
 		.lb-data {
 			text-align: left;
-			padding: 0.5em;
+			padding: 0.5rem 0.5rem 0 0.5rem;
 			
 			.lb-details {
 				float: none;
 				
 				.lb-caption-line {
 					cursor: default;
+
+					&:first-child {
+						margin-top: 0;
+					}
+
+					&.comment {
+						@include no-text-overflow();
+					}
 				}
 			
-				.lb-caption-line:first-child {
-					margin-top: 0;
-				}
-				
 				.lb-number {
 					display: none !important;
 				}
 			}
 			.lb-closeContainer {
 				color: white;
-				font-size: 13px;
+				font-size: 1em;
 				line-height: 1em;
+				width: 1.25em;
+				vertical-align: top;
+				display: inline-block;
 				
 				.lb-close {
 					@include lightbox-icon(close);
@@ -161,7 +181,7 @@
 					width: 1.25em;
 					height: auto;
 					font-size: 1.3333333333em;
-					text-align: center;
+					line-height: 1em;
 				}
 			}
 		}

style/_mask_project.scss

@@ -213,9 +213,7 @@ $legend-color: $post-color;
 				}
 
 				h1, .description {
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
+					@include no-text-overflow();
 				}
 				.body {
 					padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
@@ -303,9 +301,7 @@ $legend-color: $post-color;
 	}
 
 	#title {
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
+		@include no-text-overflow();
 		line-height: $button-width;
 		height: $button-width;
 		padding: 0 $block-spacing;
@@ -491,9 +487,7 @@ $legend-color: $post-color;
 						display: inline-block;
 						cursor: default;
 						font-size: 0.8em;
-						text-overflow: ellipsis;
-						overflow: visible;
-						white-space: nowrap;
+						@include no-text-overflow();
 						padding: $elem-spacing 0px;
 
 						&.index {
@@ -790,9 +784,7 @@ $legend-color: $post-color;
 						cursor: pointer;
 
 						& > div {
-							text-overflow: ellipsis;
-							overflow: hidden;
-							white-space: nowrap;
+							@include no-text-overflow();
 						}
 					}
 

style/_mobile.scss

@@ -3,7 +3,7 @@
 	$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
 
 	.desktop {
-		display: none;
+		display: none !important;
 	}
 
 	#projects {
@@ -67,10 +67,14 @@
 			text-align: center;
 		}
 	}
+
+	.lightbox.vertical .lb-dataContainer .lb-data .lb-details .lb-caption-line.comment {
+		display: none;
+	}
 }
 
 @media only screen and (min-width: 801px) {
 	.mobile {
-		display: none;
+		display: none !important;
 	}
 }