From 53b19c063090be2ec8bb8d0c2f60845791c92af2 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Wed, 4 Oct 2023 10:38:31 +0200
Subject: [PATCH] fix: Prevent plot from being overlaped by commands button,
 remove space if title is empty #2127

---
 ui/src/plot.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/plot.tsx b/ui/src/plot.tsx
index 0f358519821..fce867fb396 100644
--- a/ui/src/plot.tsx
+++ b/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>