Making Twitter responsive with a greasemonkey script

Responsive_Twitter.css

@media (min-width: 701px) {
	.dashboard {
		position: fixed;
	}
}

@media (max-width: 900px) and (min-width: 701px) {
	.wrapper {
		width: 100%;
		padding: 54px 0px 0px 0px;
	}

	.dashboard {
		width: 30%;
	}

	.dashboard {
		position: fixed;
	}

	.dashboard .tweet-content .tweet-box {
		width: 92%;
	}

	ul.js-mini-profile-stats a.js-nav {
		padding: 7px 3%;
	}

	.content-main {
		width: 70%;
	}
}

@media (max-width: 700px) {
	html, body {
		overflow: hidden;
	}

	.route-home {
		overflow: scroll;
		margin-right: -16px;
	}
	.wrapper {
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
	}

	.dashboard>* {
		display: none !important;
		width: 100%
		max-width: 800px;
		border: none;
	}

	.dashboard {
		float: left;
		width: 100%;
		max-width: 800px;
		position: fixed;
		z-index: 5;
		margin-top: -13px;
	}

	.dashboard .tweet-content .tweet-box {
		width: 97%;
	}

	.mini-profile {
		display: block !important;
		width: 100%
		max-width: 800px;
	}

	.component[data-component-term="profile_tweetbox"] {
		display: block !important;
		width: 100%;
	}

	.profile-tweet-box {
		display: block !important;
	}

	.profile-card.profile-header {
		width: 100%;
		float: left;
		border: none;
	}

	.content-main {
		float: left;
		width: 100%;
		max-width: 800px;
		margin-top: 145px;
	}

	.icon.conversation-collapse-btn {
		left: 50%;
		margin-left: -18px;
		top: -20px;
		border: 1px #DDD3D3 solid;
		border-radius: 6px;
	}
}

Responsive_Twitter.user.js

// ==UserScript==
// @name        Responsive Twitter
// @namespace   de.perdana.andy.gm
// @description Making Twitter responsive
// @include     twitter.com/*
// @include     https://twitter.com/*
// @include     http://twitter.com/*
// @version     1
// @grant       none
// ==/UserScript==

//Thanks to http://greasemonkey.win-start.de/patterns/add-css.html for this function
function addGlobalStyle(css) {
	var head, style;
	head = document.getElementsByTagName('head')[0];
	if (!head) { return; }
	style = document.createElement('style');
	style.type = 'text/css';
	style.innerHTML = css;
	head.appendChild(style);
}

addGlobalStyle('\
	@media (min-width: 701px) {\
		.dashboard {\
			position: fixed;\
		}\
	}\
	\
	@media (max-width: 900px) and (min-width: 701px) {\
		.wrapper {\
			width: 100%;\
			padding: 54px 0px 0px 0px;\
		}\
	\
		.dashboard {\
			width: 30%;\
		}\
	\
		.dashboard {\
			position: fixed;\
		}\
	\
		.dashboard .tweet-content .tweet-box {\
			width: 92%;\
		}\
	\
		ul.js-mini-profile-stats a.js-nav {\
			padding: 7px 3%;\
		}\
	\
		.content-main {\
			width: 70%;\
		}\
	}\
	\
	@media (max-width: 700px) {\
		html, body {\
			overflow: hidden;\
		}\
	\
		.route-home {\
			overflow: scroll;\
			margin-right: -16px;\
		}\
	\
		.wrapper {\
			padding-left: 0px;\
			padding-right: 0px;\
			width: 100%;\
		}\
	\
		.dashboard>* {\
			display: none !important;\
			width: 100%\
			max-width: 800px;\
			border: none;\
		}\
	\
		.dashboard {\
			float: left;\
			width: 100%;\
			max-width: 800px;\
			position: fixed;\
			z-index: 5;\
			margin-top: -13px;\
		}\
	\
		.dashboard .tweet-content .tweet-box {\
			width: 97%;\
		}\
	\
		.mini-profile {\
			display: block !important;\
			width: 100%\
		}\
	\
		.component[data-component-term="profile_tweetbox"] {\
			display: block !important;\
			width: 100%;\
		}\
	\
		.profile-tweet-box {\
			display: block !important;\
		}\
	\
		.profile-card.profile-header {\
			width: 100%;\
			float: left;\
			border: none;\
		}\
	\
		.content-main {\
			float: left;\
			width: 100%;\
			max-width: 800px;\
			margin-top: 145px;\
		}\
	\
		.icon.conversation-collapse-btn {\
			left: 50%;\
			margin-left: -18px;\
			top: -20px;\
			border: 1px #DDD3D3 solid;\
			border-radius: 6px;\
		}\
	}\
');