fix: Input field visibility on AI assistant page on mobile

postgres-ai · Nov 13, 2024 · ecb7ae4 · ecb7ae4
1 parent c4144cd
commit ecb7ae4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/ui/packages/platform/src/components/ContentLayout/index.tsx b/ui/packages/platform/src/components/ContentLayout/index.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react'
-import { useRouteMatch } from 'react-router-dom'
+import { useLocation, useRouteMatch } from 'react-router-dom'
 import clsx from 'clsx'
 import { observer } from 'mobx-react-lite'
 
@@ -20,6 +20,7 @@ import { DeprecatedApiBanner } from './DeprecatedApiBanner'
 import { Footer } from './Footer'
 
 import styles from './styles.module.scss'
+import cn from "classnames";
 
 type Props = {
   children: React.ReactNode
@@ -28,6 +29,8 @@ type Props = {
 export const ContentLayout = React.memo(observer((props: Props) => {
   const { children } = props
 
+  const location = useLocation();
+
   const isOrgJoeInstance = Boolean(
     useRouteMatch(ROUTES.ORG.JOE_INSTANCES.JOE_INSTANCE.createPath()),
   )
@@ -36,12 +39,16 @@ export const ContentLayout = React.memo(observer((props: Props) => {
     useRouteMatch(ROUTES.ORG.PROJECT.JOE_INSTANCES.JOE_INSTANCE.createPath()),
   )
 
+  const isAssistantPage = Boolean(
+    useRouteMatch(ROUTES.ORG.PROJECT.ASSISTANT.createPath())
+  )
+
   const isDemoOrg = Boolean(useRouteMatch(`/${settings.demoOrgAlias}`))
 
   const isHiddenFooter = isOrgJoeInstance || isProjectJoeInstance
 
   return (
-    <div className={styles.root}>
+    <div className={cn(styles.root, {[styles.rootAssistant]: isAssistantPage})}>
       {isDemoOrg && <DemoOrgNotice />}
       { bannersStore.isOpenDeprecatedApi && <DeprecatedApiBanner /> }
 

diff --git a/ui/packages/platform/src/components/ContentLayout/styles.module.scss b/ui/packages/platform/src/components/ContentLayout/styles.module.scss
@@ -17,6 +17,12 @@
   min-width: 0;
 }
 
+.rootAssistant {
+  @media (max-width: 480px) {
+    height: 100dvh;
+  }
+}
+
 .wrapper {
   flex: 1 1 100%;
   overflow: auto;

diff --git a/ui/packages/platform/src/config/routes/index.ts b/ui/packages/platform/src/config/routes/index.ts
@@ -53,6 +53,14 @@ export const ROUTES = {
       },
 
       INSTANCES: PROJECT_INSTANCES,
+
+      ASSISTANT: {
+        createPath: ({
+            org = ':org',
+            id,
+          }: { org?: string; id?: string } = {}) =>
+            id ? `/${org}/assistant/${id}` : `/${org}/assistant`,
+      }
     },
   },
 }