CSS editor layout fixes and scrolling

Major CSS improvements to layout at small screen sizes. By adding min-width: 0 and min-height: 0 on the nested display: flex structure, widgets no longer coerce the whole layout into large-scale resizing. Scrollbars are now used to allow correct overflowing of the tab bar (fixes #177), Document Panel options bar, and tool shelf. Improvements to responsive resizing are also included for viewing the UI correctly on mobile now. Additional small fixes to styling of widget colors and corner roundness. The ruler has been darkened one shade to improve text contrast and aesthetics.

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -29,11 +29,16 @@
 	flex-direction: row-reverse;
 
 	label {
-		flex: 0 0 auto;
-		cursor: text;
+		flex: 1 1 100%;
 		line-height: 18px;
 		margin-left: 8px;
 		padding: 3px 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&:not(.disabled) label {
+		cursor: text;
 	}
 
 	input {
@@ -54,7 +59,6 @@
 
 		&:not(:focus).has-label {
 			text-align: right;
-			padding-left: 4px;
 			margin-left: 0;
 			margin-right: 8px;
 		}

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -58,6 +58,11 @@
 	.text-label {
 		margin: 0 4px;
 	}
+
+	&.combined-before button:first-of-type,
+	&.combined-after button:last-of-type {
+		border-radius: 0;
+	}
 }
 </style>