feat(explorer): multi-line sql editor

[karooolis]

[changeset-bot]

🦋 Changeset detected

Latest commit: 53d90c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 25 packages

Name	Type
@latticexyz/explorer	Patch
@latticexyz/abi-ts	Patch
@latticexyz/block-logs-stream	Patch
@latticexyz/cli	Patch
@latticexyz/common	Patch
@latticexyz/config	Patch
create-mud	Patch
@latticexyz/dev-tools	Patch
@latticexyz/faucet	Patch
@latticexyz/gas-report	Patch
@latticexyz/protocol-parser	Patch
@latticexyz/react	Patch
@latticexyz/recs	Patch
@latticexyz/schema-type	Patch
solhint-config-mud	Patch
solhint-plugin-mud	Patch
@latticexyz/stash	Patch
@latticexyz/store-indexer	Patch
@latticexyz/store-sync	Patch
@latticexyz/store	Patch
@latticexyz/utils	Patch
@latticexyz/world-module-erc20	Patch
@latticexyz/world-module-metadata	Patch
@latticexyz/world-modules	Patch
@latticexyz/world	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[holic]

no change needed here but just wanted to note that I've found using position relative/absolute to create stacking contexts ends up being more trouble than its worth, because you end up fighting z-index or weird layering of things like modals etc.

now that we have grids, I now tend to use an approach like

<div className="grid">
  <div className="col-start-1 row-start-1">
    ...
  </div>
  <div className="col-start-1 row-start-1">
    ...
  </div>
</div>

obviously you can get more nuanced with this where you define an actual grid with template rows/cols and allow the top layer to take up only as much room as needed, but I only reach for that when I need to be specific about placement/alignment/spacing

another thing to note about this strategy is that the top layer (if using a full-size layer) will take over as the click target, so also need to use something like pointer-events-none on the layer's container and pointer-events-auto in each child

[karooolis]

interesting, but still not sure how would you handle layouts where an element has to exit the normal flow? For example, in this case, I want the Run button to float above the editor. Or would you suggest to avoid "floating" layouts in general, and go for layouts with normal flow whenever possible?

[holic]

looks like there's a white left border/line where there's indentation? any way to darken that a tad?

otherwise lgtm!