fix: Prevent plot from being overlaped by commands button, remove spa…

…ce if title is empty #2127

ui/src/plot.tsx

@@ -22,6 +22,7 @@ import { Fmt, parseFormat } from './intl'
 import { cards, grid } from './layout'
 import { cssVarValue, cssVar, formItemWidth, themeB, themesB } from './theme'
 import { bond, wave } from './ui'
+import { Command } from './toolbar'
 
 let
   cat10 = [
@@ -37,6 +38,9 @@ let
     '$brown',
   ]
 
+export const TITLE_PADDING_TOP = 16
+export const TITLE_HEIGHT = 17
+
 
 type AnnotationOption = ArcOption | LineOption | TextOption | RegionOption | DataMarkerOption | DataRegionOption
 
@@ -1176,13 +1180,16 @@ interface State {
   animate?: B
 }
 
-export const View = bond(({ name, state, changed }: Model<State>) => {
+export const View = bond(({ name, state, changed }: Model<State & { commands?: Command[] }>) => {
   const render = () => {
-    const { title = 'Untitled', plot, data, events, interactions, animate } = state
+    const { title = 'Untitled', plot, data, events, interactions, animate, commands } = state
     return (
       <div className={css.card}>
-        <div className='wave-s12 wave-w6'>{title}</div>
-        <div className={css.body}>
+        {title && <div className='wave-s12 wave-w6'>{title}</div>}
+        <div
+          className={css.body}
+          style={{ paddingTop: title ? TITLE_PADDING_TOP : commands?.length ? TITLE_PADDING_TOP + TITLE_HEIGHT : 0 }}
+        >
           <XVisualization model={{ name, plot, data, events, interactions, animate }} />
         </div>
       </div>