[User script] StackExchange: Responsive post width

stackexchange-responsive-post-width.user.js

// ==UserScript==
// @id stackexchange-responsive-post-width@poke
// @name StackExchange: Responsive post width
// @description Make the post width responsive
// @namespace poke
// @version 1.0.1
// @author Patrick Westerhoff
// @include *://*.stackexchange.com/questions/*
// @include *://meta.serverfault.com/questions/*
// @include *://meta.stackoverflow.com/questions/*
// @include *://meta.superuser.com/questions/*
// @include *://serverfault.com/questions/*
// @include *://stackoverflow.com/questions/*
// @include *://superuser.com/questions/*
// @homepageURL https://gist.github.com/poke/a12f4ae242ff8b5712c9856fbaf91f31
// @updateURL https://gist.github.com/poke/a12f4ae242ff8b5712c9856fbaf91f31/raw/stackexchange-responsive-post-width.user.js
// ==/UserScript==

const style = document.createElement('style');
style.textContent = `
	.question-page .inner-content {
		display: grid;
		grid-template-areas:
			"header  header"
			"content sidebar"
			"_______ feedlink";
		grid-template-columns: 1fr 300px;
	}
	.question-page #question-header {
		grid-area: header;
	}
	.question-page #mainbar {
		grid-area: content;
		width: auto;
	}
	.question-page #sidebar {
		grid-area: sidebar;
	}
	.question-page #feed-link {
		grid-area: feedlink;
	}
	.question-page #question,
	.question-page #answers {
		width: auto;
		padding-right: 39px;
	}
	.question-page .answer,
	.question-page .post-text,
	.question-page .wmd-preview,
	.question-page .comments,
	.question-page #answers-header {
		width: auto;
	}
	.question-page #question > table,
	.question-page .answer > table {
		width: 100%;
	}

	.question-page .post-editor,
	.question-page .wmd-container > .wmd-button-bar,
	.question-page .wmd-container > .wmd-input {
		width: 100%;
	}
	.question-page .wmd-container > .grippie {
		width: calc(100% - 2px);
	}

	.question-page #content {
		width: auto;
		max-width: 1500px;
	}
`;
document.getElementsByTagName('head')[0].appendChild(style);