Hide ugly default browser scrollbar without affecting functionality

hide-scrollbar.js

// ==UserScript==
// @name        Hide Scrollbar
// @namespace   http://example.com
// @version     1
// @grant       GM_addStyle
// @include     https://twitter.com/*
// @include     https://x.com/*
// @include     https://warpcast.com/*
// ==/UserScript==

GM_addStyle(`
  *::-webkit-scrollbar {
    height: 0.3rem;
    width: 0.5rem;
  }

  *::-webkit-scrollbar-track {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }

  *::-webkit-scrollbar-thumb {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }

  input[data-testid="SearchBox_Search_Input"] {
    width: 100% !important;
  }
`);