-
Notifications
You must be signed in to change notification settings - Fork 184
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(explorer): multi-line sql editor #3311
Conversation
karooolis
commented
Oct 21, 2024
•
edited
Loading
edited
🦋 Changeset detectedLatest commit: 53d90c0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 25 packages
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 |
…to kumpis/sql-query-fixes
)} | ||
/> | ||
|
||
<Button className="absolute right-1 top-1 h-8 px-4" type="submit"> | ||
<Button className="absolute bottom-1 right-1 h-8 px-4" type="submit"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
...s/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts
Outdated
Show resolved
Hide resolved
...s/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks like there's a white left border/line where there's indentation? any way to darken that a tad?
otherwise lgtm!
…Address]/explore/useQueryValidator.ts Co-authored-by: Kevin Ingersoll <[email protected]>