chore: Backport #3838 to web (#3840)

Co-authored-by: Rich Brown <richb.hanover@gmail.com>
PRQL · Nov 23, 2023 · 1567d2a · 1567d2a
1 parent 29ec46b
commit 1567d2a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/web/playground/src/output/Output.jsx b/web/playground/src/output/Output.jsx
@@ -29,10 +29,10 @@ class Output extends React.Component {
     return (
       <div className="tab">
         <div className="tab-top">
-          <Tab text="output.sql" name="sql" parent={this.props} />
-          <Tab text="output.arrow" name="arrow" parent={this.props} />
-          <Tab text="output.pl.yaml" name="pl" parent={this.props} />
-          <Tab text="output.rq.yaml" name="rq" parent={this.props} />
+          <Tab text="Compiled&nbsp;SQL" name="sql" parent={this.props} />
+          <Tab text="Query&nbsp;Results" name="arrow" parent={this.props} />
+          <Tab text="PL.yaml" name="pl" parent={this.props} />
+          <Tab text="RQ.yaml" name="rq" parent={this.props} />
 
           <div className="spacer"></div>
 

diff --git a/web/playground/src/workbench/Workbench.css b/web/playground/src/workbench/Workbench.css
@@ -33,7 +33,7 @@
 }
 .tab-top button {
   border: 0;
-  background: transparent;
+  background: dimgrey;
   color: inherit;
   font-size: inherit;
   font-family: inherit;
@@ -64,6 +64,7 @@
 
   max-height: 50%;
   overflow-y: auto;
+  flex-shrink: 0;
 
   font-family: monospace;
   white-space: pre-wrap;

diff --git a/web/playground/src/workbench/Workbench.jsx b/web/playground/src/workbench/Workbench.jsx
@@ -190,6 +190,7 @@ class Workbench extends React.Component {
           ></Output>
         </div>
 
+        {/* Display an error message relevant to the tab */}
         {this.state.prqlError && (
           <div className="error-pane">{this.state.prqlError}</div>
         )}