Userscript to redesign the file browser as a gallery. Made in a few minutes, the code is bad and intended to just work. Example: https://i.imgur.com/UZZFZqq.jpg

file-browser-as-a-gallery.js

// ==UserScript==
// @name        gallery-file-browser
// @namespace   https://gist.github.com/RoxasShadow/2d6ab73a9dc6515dc905224911c175b4
// @description File browser becomes an image gallery
// @include     file:*
// @author      RoxasShadow
// @version     1
// @grant       none
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==

(function() {
  let imgs = [];
  $('.file').each((i, e) => imgs.push($(e).attr('href')));

  if(!imgs.length) {
    return;
  }

  const exts = ['jpg', 'jpeg', 'png', 'gif'];
  const content = imgs.map((url, i) => {
    const img = `<img alt="${url}" data-index="${i}" src="${url}">`;
    return `<div class="pic"><a href="${url}">${img}</a></div>`;
  }).join('');

  const html = `
    <style>
      body {
        margin-top: 1em;
        padding: 2em;
        min-width: 94vw;
        padding-top: 0.4em;
      }

      .links {
        text-align: center;
        margin: 0.4em;
      }

      .dir::before, .file > img {
        margin-inline-start: -14px;
      }

      #imagesInARow {
        width: 40px;
      }

      .overlay {
        display: none;
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
      }

      .overlaypic img {
        max-width: 100vw;
        max-height: 100vh;
      }

      .overlaypic:target {
        outline: none;
        display: block;
      }

      /*.pics {
        line-height: 0;
        column-count: 5;
        column-gap: 1px;
      }*/

      .pics {
        display: flex;
        flex-wrap: wrap;
      }

      .pic  {
        display: inline-block;
        width: calc(100vw / 5.32);
      }

      .pic img {
        width: 100% !important;
        height: auto !important;
      }
    </style>

    <p class="links">
      ${$('#UI_goUp').html()}
      <input type="number" id="imagesInARow" value="5">
      <br>
      ${$('.dir').toArray().reduce((result, el) => result.concat(el.outerHTML), '')}
    </p>

    <div class="overlay"></div>

    <div class="pics">
      ${content}
    </div>
  `;
  
  $('body').html(html + '</div></body></html>');
  
  //$('#imagesInARow').on('keyup change click', () => $(".pics").css('column-count', $('#imagesInARow')[0].valueAsNumber));
  $('#imagesInARow').on('keyup change click', () => $(".pic").css('width', `calc(100vw / ${$('#imagesInARow')[0].valueAsNumber}.32)`));
  
  $('body').on('click', '.pics a', (e) => {
    e.preventDefault();
    $('.overlay').fadeIn().html(`<div class="overlaypic"></div>`);
    $('.overlaypic').html(e.target.cloneNode(true));
  });
  
  $('.overlay').on('click', () => $('.overlay').html('').fadeOut());
  
  $(document).keydown(function(e){
    if (e.keyCode === 39 || e.keyCode === 37) {
      const curr = Number($('.overlaypic img').attr('data-index'));
      
      let index;
      if(e.keyCode === 39) {
        index = curr === imgs.length - 1 ? 0 : curr + 1;
      }
      else {
        index = curr === 0 ? imgs.length - 1 : curr - 1;
      }
      
      $('.overlaypic').html($(`[data-index="${index}"]`)[0].cloneNode(true));
    }
  });
})();