From 30440ec780f61dbf4867bf9ba8ab71e1848b93bd Mon Sep 17 00:00:00 2001
From: Vaibhav Raizada <varaizad@microsoft.com>
Date: Fri, 11 Jun 2021 12:55:29 +0530
Subject: [PATCH] supporting 200% and 400% zoom scenarios

---
 .../expandFromRightAnimationStrategy.ts       |  6 ++--
 src/styles/clipper.less                       | 28 ++++++++++++++++++-
 src/styles/previewStyles.less                 |  3 +-
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/scripts/clipperUI/animations/expandFromRightAnimationStrategy.ts b/src/scripts/clipperUI/animations/expandFromRightAnimationStrategy.ts
index de929e72..be00abec 100644
--- a/src/scripts/clipperUI/animations/expandFromRightAnimationStrategy.ts
+++ b/src/scripts/clipperUI/animations/expandFromRightAnimationStrategy.ts
@@ -38,8 +38,7 @@ export class ExpandFromRightAnimationStrategy extends TransitioningAnimationStra
 
 			Velocity.animate(el, {
 				opacity: 1,
-				right: 20,
-				width: Constants.Styles.clipperUiWidth
+				right: 20
 			}, {
 				complete: () => {
 					// The first transition is reversed; once it is done, do the normal transitions
@@ -58,8 +57,7 @@ export class ExpandFromRightAnimationStrategy extends TransitioningAnimationStra
 			this.animationTimeoutId = setTimeout(() => {
 				Velocity.animate(el, {
 					opacity: 0,
-					right: 0,
-					width: 0
+					right: 0
 				}, {
 					complete: () => {
 						resolve();
diff --git a/src/styles/clipper.less b/src/styles/clipper.less
index a9e3c7b6..d1affa19 100644
--- a/src/styles/clipper.less
+++ b/src/styles/clipper.less
@@ -131,7 +131,12 @@
 	position: fixed;
 	top: @ClipperUITopRightOffset;
 	right: @ClipperUITopRightOffset;
-	width: 100px;
+	// width: 100px;
+	width: 25%;
+	max-width: @ClipperUIWidth;
+	height: 70%;
+	max-height: 470px;
+	overflow: scroll;
 	background: @OneNotePurpleTransparent;
 	border-radius: @ClipperBorderRadius;
 	box-shadow: @ClipperBoxShadow;
@@ -144,6 +149,27 @@
 	-o-user-select: none;
 	user-select: none;
 
+	::-webkit-scrollbar, ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+		-webkit-border-radius: @ClipperBorderRadius;
+		border-radius: @ClipperBorderRadius;
+	}
+
+	::-webkit-scrollbar {
+		// Corresponds to the vertical and horizontal scrollbars respectively
+		width: 10px;
+		height: 10px;
+	}
+
+	// The pointy ends of the scrollbar's bar
+	::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+		background: @ClipperScrollbarDark;
+		-moz-background-clip: padding-box;
+		-webkit-background-clip: padding-box;
+		background-clip: padding-box;
+		border: 2px solid rgba(0, 0, 0, 0);
+		min-height: 10px;
+	}
+
 	#optionLabel {
 		margin: 5px;
 	}
diff --git a/src/styles/previewStyles.less b/src/styles/previewStyles.less
index 244c960b..78c8e4dd 100644
--- a/src/styles/previewStyles.less
+++ b/src/styles/previewStyles.less
@@ -44,7 +44,8 @@
 
 	#previewInnerWrapper {
 		position: fixed;
-		width: @OneNotePageWidth;
+		width: 70%;
+		max-width: @OneNotePageWidth;
 		top: @ClipperUITopRightOffset;
 		bottom: @ClipperUITopRightOffset;
 		right: @ClipperUIWidth + @ClipperUITopRightOffset + @ClipperUITopRightOffset;