diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx
index 2a31082a01..c25db30328 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx
@@ -26,7 +26,7 @@ const CappedText = styled(Typography)({
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
- maxWidth: '160px',
+ width: '100%',
});
const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index bf7e10038b..c72852b4df 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -50,6 +50,7 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
gap: theme.spacing(2),
zIndex: 1,
overflowAnchor: 'none',
+ maxWidth: theme.spacing(40),
}));
// This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
index 2cef50f83c..e867023330 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
@@ -69,6 +69,7 @@ const StyledSignalsIcon = styled(Signals)(({ theme }) => ({
type NewItem = {
label: string;
+ summary: string;
icon: ReactNode;
link: string;
docsLink: string;
@@ -99,6 +100,7 @@ export const NewInUnleash = ({
const items: NewItem[] = [
{
label: 'Signals & Actions',
+ summary: 'Listen to signals via Webhooks',
icon: ,
preview: ,
link: '/integrations/signals',
@@ -174,6 +176,7 @@ export const NewInUnleash = ({
longDescription,
docsLink,
preview,
+ summary,
}) => (
{
@@ -197,6 +200,7 @@ export const NewInUnleash = ({
preview={preview}
longDescription={longDescription}
docsLink={docsLink}
+ summary={summary}
/>
),
)}
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
index ec412328ec..fb09483d85 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx
@@ -6,24 +6,26 @@ import {
ListItemButton,
styled,
Tooltip,
+ Typography,
} from '@mui/material';
import Close from '@mui/icons-material/Close';
import { NewInUnleashTooltip } from './NewInUnleashTooltip';
const StyledItemButton = styled(ListItemButton)(({ theme }) => ({
- justifyContent: 'space-between',
outline: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusMedium,
padding: theme.spacing(1),
-}));
-
-const StyledItemButtonContent = styled('div')(({ theme }) => ({
+ width: '100%',
display: 'flex',
- alignItems: 'center',
+ alignItems: 'start',
gap: theme.spacing(1),
fontSize: theme.fontSizes.smallBody,
}));
+const LabelWithSummary = styled('div')(({ theme }) => ({
+ flex: 1,
+}));
+
const StyledItemButtonClose = styled(IconButton)(({ theme }) => ({
padding: theme.spacing(0.25),
}));
@@ -37,6 +39,7 @@ interface INewInUnleashItemProps {
link: string;
docsLink: string;
preview?: ReactNode;
+ summary: string;
}
const useTooltip = () => {
@@ -62,6 +65,7 @@ export const NewInUnleashItem = ({
link,
docsLink,
preview,
+ summary,
}: INewInUnleashItemProps) => {
const { open, handleTooltipOpen, handleTooltipClose } = useTooltip();
@@ -88,11 +92,14 @@ export const NewInUnleashItem = ({
preview={preview}
>
-
- {icon}
- {label}
-
-
+ {icon}
+
+
+ {label}
+
+ {summary}
+
+