fix: Handle a case where there is no title, render headerActions alwa…

…ys at the end
felixmosh · Jan 12, 2023 · 12cd64b · 12cd64b
1 parent 231a524
commit 12cd64b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/packages/ui/src/components/App.tsx b/packages/ui/src/components/App.tsx
@@ -19,7 +19,7 @@ export const App = () => {
   return (
     <>
       <Header>
-        {!!activeQueue && <QueueTitle queue={activeQueue} />}
+        <QueueTitle queue={activeQueue} />
         <HeaderActions />
       </Header>
       <main>

diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css
@@ -48,10 +48,6 @@
   overflow: hidden;
 }
 
-.content.positionRight {
-  justify-content: flex-end;
-}
-
 .header + main {
   padding-top: var(--header-height);
 }
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
@@ -1,13 +1,14 @@
 import cn from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import { useUIConfig } from '../../hooks/useUIConfig';
-import s from './Header.module.css';
 import { getStaticPath } from '../../utils/getStaticPath';
+import s from './Header.module.css';
 
 export const Header = ({ children }: PropsWithChildren<any>) => {
   const uiConfig = useUIConfig();
   const logoPath = uiConfig.boardLogo?.path ?? getStaticPath('/images/logo.svg');
   const boardTitle = uiConfig.boardTitle ?? 'Bull Dashboard';
+
   return (
     <header className={s.header}>
       <div className={s.logo}>
@@ -22,9 +23,7 @@ export const Header = ({ children }: PropsWithChildren<any>) => {
         )}
         {boardTitle}
       </div>
-      <div className={cn(s.content, { [s.positionRight]: React.Children.count(children) === 1 })}>
-        {children}
-      </div>
+      <div className={s.content}>{children}</div>
     </header>
   );
 };
diff --git a/packages/ui/src/components/QueueTitle/QueueTitle.tsx b/packages/ui/src/components/QueueTitle/QueueTitle.tsx
@@ -3,11 +3,15 @@ import React from 'react';
 import s from './QueueTitle.module.css';
 
 interface QueueTitleProps {
-  queue: Pick<AppQueue, 'name' | 'description'>;
+  queue: Pick<AppQueue, 'name' | 'description'> | null;
 }
 export const QueueTitle = ({ queue }: QueueTitleProps) => (
   <div className={s.queueTitle}>
-    <h1 className={s.name}>{queue.name}</h1>
-    {!!queue.description && <p className={s.description}>{queue.description}</p>}
+    {!!queue && (
+      <>
+        <h1 className={s.name}>{queue.name}</h1>
+        {!!queue.description && <p className={s.description}>{queue.description}</p>}
+      </>
+    )}
   </div>
 );