speedrun.com v3 site adjustments

srcadjustments.user.js

// ==UserScript==
// @name        SRC v3 adjustments
// @namespace   Violentmonkey Scripts
// @match       *://www.speedrun.com/*
// @grant       GM_addStyle
// @version     1.1
// @author      ManicJamie
// @description A gentle massage of the proportions of the new SRC layout as of 17/07/2023 to increase density
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
// ==/UserScript==

// WARNING: I am not a frontend dev, I have literally no idea what I'm doing. Do not take this code as an example.

GM_addStyle(`
  /* Config */
  :root {
    --NAVBAR-HEIGHT: 3rem; /* SRC default: 4rem. Recommend a lower bound of 3rem */

    --GAME-BAR-HEIGHT: 2.5rem; /* SRC default: 3rem */
    --LEADERBOARD_HEADER_HEIGHT: 2.5rem; /* SRC default: 3rem */
    --LEADERBOARD_ROW_HEIGHT: 2rem; /* SRC default: 2.25rem */

    --GAME-HEADER-PADDING: 0.75rem;
    --GAME-HEADER-VERTICAL-PADDING: 0rem; /* SRC default: 0.5rem. This is nested inside the overall padding for the game header. */
  }

  /* Maximum width. Change both values. Default 1140px. Higher values may stretch the leaderboard out, but will allow seeing more variables at once */
  @media (min-width: 1140px) {
    .container {
      max-width: 1140px;
    }
  }

  .x-leaderboard-table table tbody tr td {
    height: var(--LEADERBOARD_ROW_HEIGHT) !important;
  }

  #app :is(.p-4) {
    padding: var(--GAME-HEADER-PADDING) !important;
  }

  #app :is(.h-16) {
    height: var(--NAVBAR-HEIGHT) !important;
  }

  #app :is(.top-16) {
    top: var(--NAVBAR-HEIGHT) !important;
  }


  main {
    padding-top: 0rem !important; /* additional padding is added via a flex block */
  }

  #app :is(.py-3) {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .relative.w-full.text-sm.h-12 {
    height: var(--GAME-BAR-HEIGHT) !important;
  }

  .x-sticky-header-row.x-focus-inner.relative.inline-flex.h-12.flex-nowrap.items-center.justify-start {
    height: var(--LEADERBOARD_HEADER_HEIGHT) !important;
}


  :is(.gap-6) {
    padding-top: var(--GAME-HEADER-VERTICAL-PADDING) !important;
    padding-bottom: var(--GAME-HEADER-VERTICAL-PADDING) !important;
  }

  .hidden .flex-none .py-4 .text-on-navbar {
    padding-top: none !important;
    padding-bottom: none !important;
  }
`);

const callback = (mutationList, observer) => {
  var panels = document.getElementsByClassName("x-panel-shadow rounded-lg bg-panel/panel");

  //TODO: force better subcat selectors when many subcats
  //TODO: force better category selectors when many categories
}

const observer = new MutationObserver(callback);

observer.observe(document.body, { attributes: true, childList: true, subtree: true });

A small collection of adjustments to the proportions of speedrun.com to help reduce the massive amount of wasted space. May be updated as I get annoyed by other small details.

(and as I realise I need to make it actually run on document load rather than just once)