Adjust landscape header layout to accommodate API warning status bar

- in target:api we can show a warning status bar, should account for space taken by it in the landscape header

└── apps
    └── editor
        └── src
            └── views
                └── prompt
                    └── frontend
                        └── Main
                            └── MainView
                                ├── MainView.tsx
                                └── components
                                    └── Header
                                        ├── Header.module.scss
                                        ├── Header.tsx
                                        └── index.ts

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -262,6 +262,11 @@ export const MainView: React.FC<Props> = (props) => {
       }
     })
 
+  const is_api_warning_visible =
+    props.target == TARGET.API &&
+    !!props.setup_progress &&
+    (!props.setup_progress.has_provider || props.api_configurations.length == 0)
+
   const header = (
     <Header
       target={props.target}
@@ -274,6 +279,7 @@ export const MainView: React.FC<Props> = (props) => {
       is_landscape={is_landscape}
       is_browser_connection_status_bar_closed={browser_connection.is_closed}
       is_content_scrollable={is_content_scrollable}
+      is_api_warning_visible={is_api_warning_visible}
     />
   )
 
@@ -295,30 +301,27 @@ export const MainView: React.FC<Props> = (props) => {
         }}
       />
 
-      {props.target == TARGET.API &&
-        props.setup_progress &&
-        (!props.setup_progress.has_provider ||
-          props.api_configurations.length == 0) && (
-          <>
-            <UiStatusBar
-              theme="warning"
-              icon="codicon-warning"
-              label={t('configurations.api-setup-incomplete')}
-              actions={[
-                {
-                  id: 'settings',
-                  icon: 'codicon-gear',
-                  label: t('action.settings'),
-                  title: t('action.settings'),
-                  on_click: !props.setup_progress.has_provider
-                    ? props.on_manage_providers
-                    : props.on_manage_models
-                }
-              ]}
-            />
-            <UiSpacer height={6} />
-          </>
-        )}
+      {is_api_warning_visible && (
+        <>
+          <UiStatusBar
+            theme="warning"
+            icon="codicon-warning"
+            label={t('configurations.api-setup-incomplete')}
+            actions={[
+              {
+                id: 'settings',
+                icon: 'codicon-gear',
+                label: t('action.settings'),
+                title: t('action.settings'),
+                on_click: !props.setup_progress!.has_provider
+                  ? props.on_manage_providers
+                  : props.on_manage_models
+              }
+            ]}
+          />
+          <UiSpacer height={6} />
+        </>
+      )}
 
       {props.response_history.length > 0 &&
         (props.target == TARGET.WEB

apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.tsx

@@ -24,6 +24,7 @@ type Props = {
   is_landscape: boolean
   is_browser_connection_status_bar_closed: boolean
   is_content_scrollable: boolean
+  is_api_warning_visible: boolean
 }
 
 export const Header: React.FC<Props> = (props) => {
@@ -77,6 +78,35 @@ export const Header: React.FC<Props> = (props) => {
                 </div>
               </>
             )}
+          {props.is_landscape &&
+            props.target == TARGET.API &&
+            props.is_api_warning_visible &&
+            !props.is_content_scrollable && (
+              <>
+                <div
+                  style={{
+                    visibility: 'hidden',
+                    pointerEvents: 'none',
+                    width: 0
+                  }}
+                >
+                  <UiStatusBar
+                    icon="codicon-warning"
+                    label=""
+                    actions={[
+                      {
+                        id: 'settings',
+                        icon: 'codicon-gear',
+                        label: '',
+                        title: '',
+                        on_click: () => {}
+                      }
+                    ]}
+                  />
+                  <UiSpacer height={6} />
+                </div>
+              </>
+            )}
           {props.target == TARGET.WEB && (
             <>
               <div className={styles.header__types__inner}>