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"
/>
This commit is contained in:
Thomas des Francs
2025-11-28 11:46:14 +01:00
committed by GitHub
parent f2d9400e22
commit e712eb01fb
@@ -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>
);
};