Standardize top bar heights in the app (#1725)

Fixes OPS-3181.

## Additional Notes

<img width="1496" height="374" alt="Screenshot 2025-12-03 at 6 57 47 PM"
src="https://github.com/user-attachments/assets/2d9b2fb1-1c08-418c-81de-3ae88651186b"
/>

Author: ravikiranvm

packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx

@@ -10,6 +10,7 @@ import { BlockIcon } from '../../components/block-icon/block-icon';
 import { TooltipWrapper } from '../../components/tooltip-wrapper';
 import { useTypingAnimation } from '../../hooks/use-typing-animation';
 import { cn } from '../../lib/cn';
+import { TOP_BAR_HEIGHT } from '../../lib/constants';
 import { Button } from '../../ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 
@@ -64,8 +65,9 @@ const AssistantTopBar = ({
   return (
     <div
       className={cn(
-        'flex flex-col px-4 py-2 gap-1 flex-shrink-0 text-md dark:text-primary font-bold border-b border-gray-200',
+        'flex flex-col px-4 py-2 gap-1 flex-shrink-0 text-md dark:text-primary font-bold border-b border-gray-200 justify-center',
       )}
+      style={{ minHeight: `${TOP_BAR_HEIGHT}px` }}
     >
       <div className="flex justify-between items-center gap-2">
         <div className="flex items-center gap-2 flex-1 min-w-0">

packages/ui-components/src/components/page-primitives/page-header.tsx

@@ -1,4 +1,5 @@
 import { cn } from '../../lib/cn';
+import { TOP_BAR_HEIGHT } from '../../lib/constants';
 
 const PageHeader = ({
   title,
@@ -11,9 +12,10 @@ const PageHeader = ({
 }) => (
   <div
     className={cn(
-      'flex items-center justify-between border-b w-full bg-background h-[61px] flex-shrink-0',
+      'flex items-center justify-between border-b w-full bg-background flex-shrink-0',
       className,
     )}
+    style={{ height: `${TOP_BAR_HEIGHT}px` }}
   >
     <h1 className="text-2xl pl-7">{title}</h1>
     {children}

packages/ui-components/src/components/sidebar/side-menu-header.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { cn } from '../../lib/cn';
+import { TOP_BAR_HEIGHT } from '../../lib/constants';
 import { Tooltip, TooltipTrigger } from '../../ui/tooltip';
 
 const SideMenuHeader = ({
@@ -13,9 +14,10 @@ const SideMenuHeader = ({
 }) => (
   <div
     className={cn(
-      'w-full flex items-center px-6 py-[18px] h-[60px] flex-shrink-0',
+      'w-full flex items-center px-6 py-[18px] flex-shrink-0 border-b',
       className,
     )}
+    style={{ height: `${TOP_BAR_HEIGHT}px` }}
   >
     <Link to="/">
       <Tooltip>

packages/ui-components/src/components/sidebar/side-menu-navigation.tsx

@@ -10,7 +10,7 @@ const SideMenuNavigation = ({
   links,
   isMinimized,
 }: SideMenuNavigationProps) => (
-  <nav className="flex flex-col w-full gap-1 py-3 px-3 border-t">
+  <nav className="flex flex-col w-full gap-1 py-3 px-3">
     {links.map((link, index) => (
       <MenuNavigationItem
         to={link.to}

packages/ui-components/src/lib/constants.ts

@@ -37,3 +37,5 @@ export const PRIMITIVE_STEP_METADATA = {
 export const COPY_PASTE_TOAST_DURATION = 2000;
 
 export const AI_CHAT_SCROLL_DELAY = 200;
+
+export const TOP_BAR_HEIGHT = 60;