Can't use drag bar between editor and result pane while editing a model

[zbodi74]

Describe the bug
The draggable bar between the query editor and the result pane can't be dragged while editing the query definition of any notebook editor based model.

Logs

DraggableCore.js:158 Uncaught Error: <DraggableCore> not mounted on DragStart!
    at u.handleDragStart (DraggableCore.js:158:15)
    at DraggableCore.js:305:20
    at Object.c (react-dom.production.min.js:14:84)
    at f (react-dom.production.min.js:14:238)
    at react-dom.production.min.js:14:292
    at m (react-dom.production.min.js:15:72)
    at ct (react-dom.production.min.js:52:170)
    at at (react-dom.production.min.js:51:255)
    at lt (react-dom.production.min.js:52:334)
    at At (react-dom.production.min.js:56:10)

To Reproduce
Steps to reproduce the behavior:

1. Create a notebook editor based model, or open an existing one to edit its query definition.
2. Try to use the draggable bar between the editor and the results pane.
3. When clicked, the bar continues to be greyed out and doesn't work.

Expected behavior
The draggable bar should be enabled and resizing the panes should be possible.

Screenshots
https://github.com/metabase/metabase/assets/11080638/742ae267-fec1-4687-bcc8-012f68564883

Severity
Probably minor. Reported by some users.

Additional context
The same works while editing a model based on native query.

Metabase Diagnostic Info

{
  "browser-info": {
    "language": "en-GB",
    "platform": "MacIntel",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36",
    "vendor": "Google Inc."
  },
  "system-info": {
    "file.encoding": "UTF-8",
    "java.runtime.name": "OpenJDK Runtime Environment",
    "java.runtime.version": "11.0.20.1+1",
    "java.vendor": "Eclipse Adoptium",
    "java.vendor.url": "https://adoptium.net/",
    "java.version": "11.0.20.1",
    "java.vm.name": "OpenJDK 64-Bit Server VM",
    "java.vm.version": "11.0.20.1+1",
    "os.name": "Linux",
    "os.version": "5.10.186-179.751.amzn2.x86_64",
    "user.language": "en",
    "user.timezone": "GMT"
  },
  "metabase-info": {
    "databases": [
      "h2",
      "bigquery-cloud-sdk"
    ],
    "hosting-env": "unknown",
    "application-database": "postgres",
    "application-database-details": {
      "database": {
        "name": "PostgreSQL",
        "version": "14.7"
      },
      "jdbc-driver": {
        "name": "PostgreSQL JDBC Driver",
        "version": "42.5.4"
      }
    },
    "run-mode": "prod",
    "version": {
      "date": "2023-09-07",
      "tag": "v1.47.1",
      "branch": "release-x.47.x",
      "hash": "bd278b9"
    },
    "settings": {
      "report-timezone": null
    }
  }
}

[lionep]

Hello, is there any fix planned for this issue ? Or any workaround to resize the pane ?

I'm on macOS and having this with Chatwoot 0.48.1 with Safari, Firefox and Google Chrome.
When editing a query, I have 20% of screen dedicated to the editor itself and 80% for the results.

Thanks,

[kamilmielnik]

Reproducible on master at 28ab027.

[nemanjaglumac]

This last worked in version 46.
Starting from 47.0 it's broken.

[nemanjaglumac]

Most likely caused by #29414