Make the togglers more obvious when panes are closed.

services/web/public/stylesheets/app/editor.less

@@ -14,6 +14,9 @@
 @import "./editor/review-panel.less";
 @import "./editor/feature-onboarding.less";
 
+@ui-layout-toggler-def-height: 50px;
+@ui-resizer-extra-hit-area: 8px;
+
 @keyframes blink {
 	0% { 
 		opacity: 0.2;
@@ -285,38 +288,37 @@
 }
 
 .ui-layout-resizer when (@is-overleaf = true) {
-	@extra-hit-area: 8px;
-	margin-left: -(@extra-hit-area) !important;
-	margin-right: -(@extra-hit-area - 1px) !important;
-	padding-left: @extra-hit-area !important;
-	padding-right: @extra-hit-area !important;
+	margin-left: -(@ui-resizer-extra-hit-area) !important;
+	margin-right: -(@ui-resizer-extra-hit-area - 1px) !important;
+	padding-left: @ui-resizer-extra-hit-area !important;
+	padding-right: @ui-resizer-extra-hit-area !important;
 	z-index: 5 !important;
 	box-sizing: content-box;
 	background-image: linear-gradient(90deg, 
 		transparent,
-		transparent (@extra-hit-area - 1px),
-		@editor-resizer-bg-color (@extra-hit-area - 1px),
-		@editor-resizer-bg-color (@extra-hit-area + 1px),
-		transparent (@extra-hit-area + 1px),
+		transparent (@ui-resizer-extra-hit-area - 1px),
+		@editor-resizer-bg-color (@ui-resizer-extra-hit-area - 1px),
+		@editor-resizer-bg-color (@ui-resizer-extra-hit-area + 1px),
+		transparent (@ui-resizer-extra-hit-area + 1px),
 		transparent);
 
 	.ui-layout-toggler {
-		padding: 0 @extra-hit-area !important;
+		padding: 0 @ui-resizer-extra-hit-area !important;
 		background-image: linear-gradient(90deg, 
 			transparent,
-			transparent (@extra-hit-area - 1px),
-			@editor-toggler-bg-color (@extra-hit-area - 1px),
-			@editor-toggler-bg-color (@extra-hit-area + 1px),
-			transparent (@extra-hit-area + 1px),
+			transparent (@ui-resizer-extra-hit-area - 1px),
+			@editor-toggler-bg-color (@ui-resizer-extra-hit-area - 1px),
+			@editor-toggler-bg-color (@ui-resizer-extra-hit-area + 1px),
+			transparent (@ui-resizer-extra-hit-area + 1px),
 			transparent);
 
 		&:hover {
 			background-image: linear-gradient(90deg, 
 				transparent,
-				transparent (@extra-hit-area - 2px),
-				@editor-toggler-hover-bg-color (@extra-hit-area - 2px),
-				@editor-toggler-hover-bg-color (@extra-hit-area + 2px),
-				transparent (@extra-hit-area + 2px),
+				transparent (@ui-resizer-extra-hit-area - 2px),
+				@editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area - 2px),
+				@editor-toggler-hover-bg-color (@ui-resizer-extra-hit-area + 2px),
+				transparent (@ui-resizer-extra-hit-area + 2px),
 				transparent);
 		}
 	}
@@ -336,6 +338,38 @@
 		}
 	}
 }
+
+.ui-layout-toggler.ui-layout-toggler-closed when (@is-overleaf = true) {
+	background-color: @editor-resizer-bg-color;
+	background-image: none;
+	line-height: @ui-layout-toggler-def-height;
+	
+	&::before {
+		content: "\22EE"; // Vertical ellipsis
+		display: block;
+		color: #FFF;
+		font-weight: 700;
+		font-size: @font-size-h2;
+		width: @ui-resizer-extra-hit-area / 2;
+	}
+	&:hover {
+		background-color: @editor-toggler-hover-bg-color;
+		background-image: none;
+	}
+	.ui-layout-resizer-west > & {
+		border-radius: 0 @border-radius-base @border-radius-base 0;
+		&::before {
+			margin-left: -2px;
+		}
+	}
+	.ui-layout-resizer-east > & {
+		border-radius: @border-radius-base 0 0 @border-radius-base;
+		&::before {
+			margin-left: (-1 - @ui-resizer-extra-hit-area);
+		}
+	}
+}
+
 .ui-layout-resizer-dragging {
 	background-color: @editor-resizer-bg-color-dragging;
 }