From e712eb01fbd6008a8569cc7f0ba3bda0b5ec5b97 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Fri, 28 Nov 2025 11:46:14 +0100
Subject: [PATCH] fix: update side panel header title to base font size with
 baseline alignment (#16095)

## Summary
1. Changed the side panel header title font size from small (0.92rem) to
base (1rem)
2. Added baseline alignment between the title and subtitle text while
keeping the icon centered

## Changes
- Updated `StyledPageInfoTitleContainer` font size from
`theme.font.size.sm` to `theme.font.size.md`
- Added `StyledPageInfoTextContainer` wrapper to baseline-align title
and subtitle independently from the icon

<img width="448" height="191" alt="image"
src="https://github.com/user-attachments/assets/b022a89c-a68f-4449-b01a-2ec029ce995b"
/>
---
 .../components/CommandMenuPageInfoLayout.tsx    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx
index d4be24b398..2ec2479780 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfoLayout.tsx
@@ -18,11 +18,16 @@ export const StyledPageInfoIcon = styled.div<{ iconColor?: string }>`
   padding: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const StyledPageInfoTitleContainer = styled.div`
-  align-items: center;
+export const StyledPageInfoTextContainer = styled.div`
+  align-items: baseline;
   display: flex;
   flex: 1;
-  font-size: ${({ theme }) => theme.font.size.sm};
+  gap: ${({ theme }) => theme.spacing(0.5)};
+  min-width: 0;
+`;
+
+export const StyledPageInfoTitleContainer = styled.div`
+  font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   min-width: 0;
   max-width: 150px;
@@ -53,8 +58,10 @@ export const CommandMenuPageInfoLayout = ({
       {icon && (
         <StyledPageInfoIcon iconColor={iconColor}>{icon}</StyledPageInfoIcon>
       )}
-      <StyledPageInfoTitleContainer>{title}</StyledPageInfoTitleContainer>
-      {label && <StyledPageInfoLabel>{label}</StyledPageInfoLabel>}
+      <StyledPageInfoTextContainer>
+        <StyledPageInfoTitleContainer>{title}</StyledPageInfoTitleContainer>
+        {label && <StyledPageInfoLabel>{label}</StyledPageInfoLabel>}
+      </StyledPageInfoTextContainer>
     </StyledPageInfoContainer>
   );
 };