Skip to content

Commit

Permalink
clamping text
Browse files Browse the repository at this point in the history
  • Loading branch information
cphelefu committed May 23, 2024
1 parent 7ac6c3a commit cb7b906
Showing 1 changed file with 13 additions and 6 deletions.
19 changes: 13 additions & 6 deletions packages/geoview-core/src/core/components/common/layer-title.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,21 @@ interface LayerTitleProp {
export function LayerTitle({ children, hideTitle, fullWidth }: LayerTitleProp): JSX.Element {
const theme = useTheme();

// clamping code copied from https://tailwindcss.com/docs/line-clamp
const sxClasses = {
fontSize: fullWidth ? theme.palette.geoViewFontSize.sm : theme.palette.geoViewFontSize.lg,
fontWeight: '600',
marginTop: '12px',
overflow: 'hidden',
display: '-webkit-box',
'-webkit-box-orient': 'vertical',
'-webkit-line-clamp': '2',
...(!fullWidth && { [theme.breakpoints.up('md')]: { display: hideTitle ? 'none' : 'block' } }),
};

return (
<Typography
sx={{
fontSize: fullWidth ? theme.palette.geoViewFontSize.sm : theme.palette.geoViewFontSize.lg,
fontWeight: '600',
marginTop: '12px',
...(!fullWidth && { [theme.breakpoints.up('md')]: { display: hideTitle ? 'none' : 'block' } }),
}}
sx={sxClasses}
component="div"
>
{children}
Expand Down

0 comments on commit cb7b906

Please sign in to comment.