fx-compat: Fix up Scaffold a bit

- Output pane no longer gets huge after load
- URL box grows
- Metadata grid fills available space (but still needs work re overflow)
- row-resize cursor on Tests splitter

chrome/content/scaffold/scaffold.xhtml

@@ -416,7 +416,7 @@
 			</hbox>
 		</toolbar>
 		<hbox id="appcontent" flex="1">
-			<tabbox id="left-tabbox" flex="1" width="300">
+			<tabbox id="left-tabbox">
 				<tabs id="tabs">
 					<tab id="tab-metadata" label="&scaffold.tabs.metadata.label;"/>
 					<tab id="tab-code" label="&scaffold.tabs.code.label;"/>
@@ -524,7 +524,7 @@
 						<vbox flex="1">
 							<hbox align="center">
 								<label control="textbox-tabUrl" value="&scaffold.tabUrl.label;"/>
-								<html:input id="browser-url" style="-moz-box-flex: 1;"/>
+								<html:input id="browser-url" style="flex: 1;"/>
 								<button observes="validate-tests" label="&scaffold.testing.create.web;" tooltiptext="Create a new test from the current page" oncommand="Scaffold.saveTestFromCurrent('web')"/>
 							</hbox>
 							
@@ -550,7 +550,6 @@
 				</tabpanels>
 			</tabbox>
 			<splitter id="pane-splitter" resizeafter="farthest" />
-
 			<vbox id="right-pane">
 				<html:textarea id="output" readonly="true"/>
 			</vbox>

scss/scaffold.scss

@@ -71,7 +71,7 @@ tab {
 }
 
 #metadata-grid {
-	-moz-box-flex: 1;
+	flex: 1;
 	display: grid;
 	align-content: start;
 	align-items: center;
@@ -119,12 +119,20 @@ browser,
 }
 
 vbox > splitter {
-	cursor: row-rgb(4, 4, 4)e;
+	cursor: row-resize;
 }
 
 #left-tabbox {
+	flex: 1;
+	min-width: 500px;
 	margin: 5px;
-	width: 100% !important;
+	overflow: clip;
+	
+	tabpanel {
+		display: flex;
+		width: 100%;
+		min-width: 0;
+	}
 }
 
 #checkboxes-translatorType {
@@ -138,6 +146,7 @@ vbox > splitter {
 }
 
 #right-pane {
+	min-width: 350px;
 	margin: -16px -16px -16px 0px;
 	border-left: var(--material-panedivider);