☰

Figma scroll fix

https://forum.figma.com/t/horizontal-scroll-on-the-layers-panel/643/54

  1. // ==UserScript==
  2. // @name         Figma scroll fix
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.3
  5. // @description  https://forum.figma.com/t/horizontal-scroll-on-the-layers-panel/643/54
  6. // @author       aolko + https://forum.figma.com/u/Toni_Andric & https://forum.figma.com/u/Gomes_Ivan
  7. // @match        *://www.figma.com/file/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=figma.com
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Old way
  16.     /*
  17.     GM_addStyle(`
  18.     [class*="object_row--indent--"] {
  19.         margin: 0 !important;
  20.         width: 8px;
  21.     }
  22.     `);
  23.     */
  24.  
  25.     GM_addStyle(`
  26.         [data-testid="layer-row-with-children"],
  27.         [data-testid="layer-row"],
  28.         [class|='scroll_container--innerScrollContainer']:not([class|='object_row--instance--']) {
  29.             /* Make each row take up as much horizontal space as it can. */
  30.             width: 100% !important;
  31.         }
  32.         [class|=pages_panel--objectPanelContent-] {
  33.             /* this is what enables scrolling (if needed) in both directions */
  34.             overflow: auto;
  35.         }
  36.         [class*=js-fullscreen-wheel-event-capture][class*=objects_panel--scrollContainer][class*=objects_panel--scrollContainerWithBorder][class*=scroll_container--clipContainer] {
  37.             /* This overrides the inline styles that get added on sidebar resizing. */
  38.             width: 1000px !important;
  39.             position: relative;
  40.         }
  41.         [class|=object_row--indent-]:not([class|=object_row--indent-]:first-of-type) {
  42.             /* This reduces the indentation of nested layers */
  43.             width: 5px;
  44.         }
  45.     `);
  46.     // Additionally, fix the Layers panel label. Prevent overlaying the main area in certain edge cases
  47.     var header = document.querySelector("[class|=pages_panel--objectPanelContent-] [style*='translate3d(0px, 0px, 0px)']");
  48.     header.style.position = 'absolute';
  49.     header.style.transform = 'translate3d(0px, 0px, 0px);';
  50. })();