Improve Issue Reporter UI

* improve scrollbar margin * add cursor property * no wrapping of label text
wminos · Feb 15, 2018 · 0ace6ef · 0ace6ef
1 parent 861c6bf
commit 0ace6ef
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/vs/code/electron-browser/issue/issueReporterMain.ts b/src/vs/code/electron-browser/issue/issueReporterMain.ts
@@ -187,15 +187,15 @@ export class IssueReporter extends Disposable {
 		}
 
 		if (styles.sliderBackgroundColor) {
-			content.push(`.issues-container::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background-color: ${styles.sliderBackgroundColor}; }`);
+			content.push(`::-webkit-scrollbar-thumb { background-color: ${styles.sliderBackgroundColor}; }`);
 		}
 
 		if (styles.sliderActiveColor) {
-			content.push(`.issues-container::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active { background-color: ${styles.sliderActiveColor}; }`);
+			content.push(`::-webkit-scrollbar-thumb:active { background-color: ${styles.sliderActiveColor}; }`);
 		}
 
 		if (styles.sliderHoverColor) {
-			content.push(`.issues-container::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background-color: ${styles.sliderHoverColor}; }`);
+			content.push(`::--webkit-scrollbar-thumb:hover { background-color: ${styles.sliderHoverColor}; }`);
 		}
 
 		styleTag.innerHTML = content.join('\n');

diff --git a/src/vs/code/electron-browser/issue/media/issueReporter.css b/src/vs/code/electron-browser/issue/media/issueReporter.css
@@ -116,6 +116,7 @@ html {
 
 body {
 	margin: 0;
+	overflow: scroll;
 }
 
 .hidden {
@@ -223,16 +224,11 @@ summary {
 
 .include-data {
 	display: inline-block;
-	position: relative;
 }
 
 .include-data > .caption {
 	display: inline-block;
 	font-size: 12px;
-	position: absolute;
-	width: 80px;
-	top: 2px;
-	left: 30px;
 	cursor: pointer;
 }
 
@@ -263,9 +259,12 @@ input:disabled {
 	margin-top: .5em;
 }
 
+.workbenchCommand {
+	cursor: pointer;
+}
 .workbenchCommand:disabled {
 	color: #868e96;
-	cursor: pointer;
+	cursor: default
 }
 
 .block-extensions .block-info {
@@ -303,6 +302,7 @@ button {
 
 #issue-type {
 	width: calc(100% - 100px);
+	cursor: pointer;
 }
 
 #issue-title-label {
@@ -348,14 +348,18 @@ button {
 	}
 }
 
-.issues-container::-webkit-scrollbar, body::-webkit-scrollbar {
+::-webkit-scrollbar {
 	width: 14px;
 }
 
-.issues-container::-webkit-scrollbar, body::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
 	min-height: 20px;
 }
 
+::-webkit-scrollbar-corner {
+	display: none;
+}
+
 .issues-container {
 	margin-top: .5em;
 	height: 108px;
@@ -397,4 +401,4 @@ div.issues-container {
 
 .issues-container > .issue > .issue-state .octicon {
 	padding-right: 5px;
-}
+}