Let the result content at first

[hashcc]

Closes #15

Objective

For users to find the query result much faster.

What to change

1. Change the order of content, result at first
2. Limit max height of result to 500px

1. Change the order of content, result at first

Before

1. Title & description
2. SQL
3. Chart
4. Result
5. Data source

After

1. Title & description
2. Chart
3. Result
4. SQL
5. Data source

2. Limit max height of result to 500px

• Even if the result is too long (over 1000 column..), users can easily view the SQL because we limited height of result content to 500px
• Header of result table is sticked to top if scroll. So the users can find what each cells mean everywhere.

Screenshot

@morishin Please review!

[morishin]

レビューがめちゃくちゃ遅くなってしまってすみません！仕様は LGTM です。実装については1点 IMO を書いたのでご検討いただけると 🙏

[morishin]

[IMO] css modules を書くよりも ChakraUI のインターフェースに従ってこんな感じで書く方が書きやすい&読みやすいと思いました 💭

<Box overflowY="auto" maxHeight="500px">
  <Table variant="striped" size="sm" colorScheme="blackAlpha">
    ...
    <Thead position="sticky" top={0} bgColor="white">

[hashcc]

なるほど。Chakra UIを利用して、仰るように修正しました ✅
#23

[hashcc]

@morishin 上記で問題なければマージお願いします 🙏

[morishin]

ありがとうございます！マージしました！