Make Hangfire Dashboard Full Width (and custom styling) - hangfire

Question

For now, there doesn't seem to be a documented way to easily change Hangfire's Dashboard layout and styling to accomplish tasks like:
Use the full browser width (annoying when you have long Job Ids and Names)
Can't tweak the styling to better match a parent's site look, adjust grid column widths, etc
There have been Hangfire pull requests to add this type of feature, but nothing that's been integrated into Hangfire.Core, nor a plugin that I could find. After looking at the core source myself, I figured it would be too much of a pain to maintain my own fork just to add this customization.
So, what's a dev to do?

Answer 1

Here's one way to re-style the Hangfire Dashboard that is fairly lightweight, but requires same origin.
High-level:
Setup Hangfire per usual, setup the Dashboard, make sure things are working
Instead your linking directly to your configured Hangfire Dashboard link (e.g. /Admin/Hangfire), create an page on your site with an iframe that points to the Hangfire Dashboard.
Use a combo of js and css to tweak the dashboard iframe from the parent page.
Quick example:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="iframeTest.aspx.cs" Inherits="WebApp.iframeTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.hf {
border: none;
width: 100%;
height: 500px;
}
</style>
<script type="text/javascript">
function FixHangFireStyling() {
//Set page/container to full width
$("#wrap .container", frames['hf'].document).css("margin-left", "10px"); //adjust the px value as your parent layout requires
$("#wrap .container", frames['hf'].document).css("margin-right", "250px"); //adjust the px value as your parent layout requires
$("#wrap .container", frames['hf'].document).css("width", "100%");
//Remove the word breaking and predefined column (td) widths on the grids
$(".js-jobs-list-row td", frames['hf'].document).css("width", "auto");
$(".js-jobs-list-row td", frames['hf'].document).css("word-break", "normal");
};
function FixHeight(obj) {
//Auto adjust the height of the iframe based on the height of the Hangfire page (adds an extra 250 to account for my page parent page's height/layout)
obj.style.height = (obj.contentWindow.document.documentElement.scrollHeight + 250) + 'px';
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="right_col" role="main">
<div class="col-md-12">
<iframe class="hf" name="hf" id="hf" src="/Admin/Hangfire" onload="FixHangFireStyling(); FixHeight(this)" scrolling="no"></iframe>
</div>
</div>
</asp:Content>
And the result (full width, styling reapplied when navigating within the iframe, grid column adjustments to get rid of annoying text wrapping, and a quick iframe height auto-adjustment):
(24"W Monitor, 1920px resolution)

Answer 2

I currently use Stylus, and create some css for hangfire dashboard.
Here very simple css. Paste into Stylus editor
.container,
.navbar > .container {
width: 90%
}
Before Stylus
After Stylus