Hello, I got frustrated with the sites UI and decided to fiddle with the CSS to fix some of my outstanding issues, and I thought I'd share the CSS here so if anyone else is frustrated with the same issues, they can get some relief.

I used the Stylebot add on for firefox to apply these changes, there's a version of it for chrome as well.
I'll list what frustrated me, then what I did to fix them and then the actual code.

1. The sidebar overlaps with my character sheet when using vertical tabs
2. When not using vertical tabs, there's a bunch of empty space between my character sheet and the side bar
3. The character sheet doesn't fit on one page
4. Nested vertical scroll bars

To fix these...

1. I moved my character sheet to the left.
2. I scaled the width of the sidebar to consume empty space
3. I removed a ton of unused or not useful space in the top menu bars and scaled some items slightly
4. Now that the sheet fits on one page, I removed the general scrollbar

Before:

After:

Here's the code. When you go to add it to stylebot, add it to the url "^.*www.dndbeyond.com/profile/.*/characters/[^/]*$" without the quotes.
You WILL need to adjust numbers on this to suit your display and personal preferences. I've left comments on the code so you know what number has what effect.
It's not perfect, I'm not a web developer, but this has made the site way more usable for me.

div.ct-character-sheet-desktop {
  position:relative;
  left:-160px; /* Move character sheet left */
  transform: scale(1); /* Scale character sheet down to fit on your screen. 0 to 1 */
  transform-origin: top left;
}

div.mm-mega-menu{
  display: none;
}

div.ct-sidebar.ct-sidebar--right.ct-sidebar--visible {
  max-height: 95%; /* restrict sidebar height */
  top: 40px; /* Adjust where side bar starts */
  width: 21.75%; /* Adjust side bar width */
}

div.ct-character-header-desktop__group.ct-character-header-desktop__group-tidbits {
  transform: scale(.7); /* Scale down character info */
  transform-origin: top;
}

div.site-interactions-group {
  height: inherit;  /* Move top bar stuff to top */
}

.es-form {
  padding: 0; /* Remove padding from search bar */
}

div.ct-character-header-desktop {
  align-items: flex-start;
  padding-top: 1px;
  height: 60px; /* Character sheet offset from top bar */    
}

div.user-interactions-profile {
  align-items: flex-start;
  height: inherit; /* Move profile stuff to top of top bar */
}

div.site-bar__container {
  align-items: flex-start; /* Move top bar items to top */
}

div.user-interactions {
  align-items: flex-start; /* Move top bar items to top */
}

div.site-bar {
  height: 42px; /* Size down top bar */
}

body {
  overflow: hidden; /* hide main site scrollbar */
}

It is certainly a more usable setup than the default.  I'm not into coding and such, so can't say if or how this might be viewed by site admins and stuff, but it looks a LOT more user-friendly than what you get by default.

You can also use this to scale the site up, if you're using a higher resolution monitor than 1920x1080.

My 2k monitor before:

 My 2k monitor after:

I'm (mostly) a forever DM, so I don't get to use the character sheets all that much, but nice work with this; very well done.

If anyone has any requests, let me know and I can try to make it work!

I have updated the content to match the current sheet as of 2023/06/04. In addition the url match regex is different now:

^.*www.dndbeyond.com/characters/[^/]*$

div.ct-character-sheet-desktop {
  position:relative;
  /* Move character sheet left */
  left:-285px; 
  /* Scale character sheet down to fit on your screen. 0 to 1 */
  transform: scale(1.1); 
  transform-origin: top left;
}

div.mm-mega-menu {
  display: none;
}

div.ct-sidebar.ct-sidebar--right.ct-sidebar--visible {
  /* restrict sidebar height */
  max-height: 100%;
  /* Adjust where side bar starts */
  top: 34px;
  right: 15px;
  /* Adjust side bar width */
  width: 35.50%;
}

div.ct-character-header-desktop__group.ct-character-header-desktop__group-tidbits {
  /* Scale down character info */
  transform: scale(.7); 
  transform-origin: top;
}

div.site-interactions-group {
  /* Move top bar stuff to top */
  height: inherit;
}

.es-form {
  /* Remove padding from search bar */
  padding: 0;
}

div.ct-character-header-desktop {
  align-items: flex-start;
  padding-top: 1px;
  /* Character sheet offset from top bar */ 
  height: 60px;   
}

div.user-interactions-profile {
  align-items: flex-start;
  /* Move profile stuff to top of top bar */
  height: inherit;
}

div.site-bar__container {
  /* Move top bar items to top */
  align-items: flex-start;
}

div.user-interactions {
  /* Move top bar items to top */
  align-items: flex-start;
}

div.site-bar {
  /* Size down top bar */
  height: 32px;
}

body {
  /* hide main site scrollbar */
  overflow: hidden;
}

.site-bar__container > a[href='/'] {
  line-height: 0 !important;
}

a > svg.site-bar__logo {
  height: 30px !important;
  margin: 0px 1px !important;
}

.site-search {
  padding: 1px !important;
  line-height: 1;
}
.site-search__form {
  padding: 0px !important;
}
.site-search__icon {
  padding: 1px !important;
}
.react-autosuggest__input {
  margin: 3px !important;
  vertical-align: middle;
}

ul.socials {
  padding: 7px;
}

.user-interactions,
.user-details,
.user-details__preview,
.user-details__avatar,
.user-details__name,
.user-details__profile-link {
  line-height: 1 !important;
}

.user-interactions,
.user-details {
  height: 32px;
}

.user-details__menu {
  top: 31px;
}

1080p screen, maximized window, 90% zoom:

Before:

 After:

 requires "min-width: 35rem !important;" added to the sidebar in order t0 modify the width now.

Thank you!