Page action layout broken when using non-default DPI settings

[simu]

When running Firefox on Linux with a non-default system-wide DPI setting (144dpi in my case), the layout of the page action does not reflow nicely in the page action popup.

A likely culprit is the fixed width styling for the HTML elements of the popup:

passwordhasherplus/popup.css

Lines 1 to 85 in b9c7f7c

	body {
	width: 300px;
	padding: 10px;
	padding-bottom: 2px;
	}
	.left {
	float: left;
	}
	.right {
	float: right;
	}
	label.field {
	text-align: right;
	float: left;
	width: 80px;
	padding-right: 6px;
	}
	select {
	width: 188px;
	vertical-align: middle;
	}
	#strength-requirements {
	width: 270px;
	padding-left:6px;
	}
	.form-group h2 {
	font-size: 12px;
	padding-bottom: 0px;
	margin: 3px 0;
	}
	#tag {
	width:140px;
	}
	#bump {
	text-align: center;
	width:55px;
	}
	#masterpw,
	#hashword {
	width:170px;
	}
	#hasher > p.browser-style {
	clear:left;
	margin-bottom:3px;
	}
	details {
	margin-top:6px;
	}
	details > summary {
	font-weight:bold;
	}
	button.unmask {
	text-align:center;
	vertical-align:top;
	height:24px;
	width:24px;
	}
	#hash-hint,
	#master-hint {
	position:absolute;
	height:16px;
	/* XXX! */
	top:4px;
	right:33px;
	display:inline-block;
	color:#666;
	background-color:#ccc;
	text-align:center;
	padding:1px 3px;
	font-family:monospace;
	}
	#submit,
	#cancel {
	width: 100px;
	text-align: center;
	height:24px;
	}
	.buttonrow {
	width:210px;
	margin: 0 auto;
	padding: 0;
	}
	#hasher {
	margin-bottom:3px;
	}

These should be rewritten using CSS which handles different DPI settings more gracefully.