Long text preview too small?  Not anymore!

This script lets you resize the modal and set your own default width / height.  To use it, you’ll need to use Tampermonkey (https://www.tampermonkey.net/)

Happy to fix any bugs or issues, please let me know about them and I’ll do what I can!

Inspired by this post here: 

// ==UserScript==
// @name         Resizable Airtable Multiline/RichText Modal
// @namespace    adam@thetimesaving.company
// @version      0.1
// @description  Make multiline/richText modals resizable with default size
// @match        *://*.airtable.com/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  // === config ===
  const DEFAULT_WIDTH = '500px';
  const DEFAULT_HEIGHT = '500px';
  const MAX_TEXTBOX_HEIGHT = '80vh';

  const css = `
    .cell.expanded.shadow-elevation-highadata-columntype="multilineText"] .contentEditableTextbox,
    .cell.expanded.shadow-elevation-highadata-columntype="richText"] .contentEditableTextbox {
      height: 100% !important;
      max-height: ${MAX_TEXTBOX_HEIGHT} !important;
    }
  `;

  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

  const observer = new MutationObserver(() => {
    const modal = document.querySelector(
      '.cell.expanded.shadow-elevation-highadata-columntype="multilineText"], .cell.expanded.shadow-elevation-highadata-columntype="richText"]'
    );
    if (!modal || modal.dataset.resizableAttached) return;

    modal.dataset.resizableAttached = 'true';
    modal.style.position = 'absolute';
    modal.style.resize = 'both';
    modal.style.overflow = 'auto';
    modal.style.width = DEFAULT_WIDTH;
    modal.style.height = DEFAULT_HEIGHT;

    console.log(`modal resized to ${DEFAULT_WIDTH} x ${DEFAULT_HEIGHT}`);
  });

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