fix: Long titles in command bar should not wrap
This commit is contained in:
parent
2e56bdc388
commit
adca894e83
|
@ -14,7 +14,7 @@ type Props = {|
|
||||||
function CommandBarItem({ action, active }: Props, ref) {
|
function CommandBarItem({ action, active }: Props, ref) {
|
||||||
return (
|
return (
|
||||||
<Item active={active} ref={ref}>
|
<Item active={active} ref={ref}>
|
||||||
<Flex align="center" gap={8}>
|
<Text align="center" gap={8}>
|
||||||
<Icon>
|
<Icon>
|
||||||
{action.icon ? (
|
{action.icon ? (
|
||||||
React.cloneElement(action.icon, { size: 22 })
|
React.cloneElement(action.icon, { size: 22 })
|
||||||
|
@ -24,7 +24,7 @@ function CommandBarItem({ action, active }: Props, ref) {
|
||||||
</Icon>
|
</Icon>
|
||||||
{action.name}
|
{action.name}
|
||||||
{action.children?.length ? "…" : ""}
|
{action.children?.length ? "…" : ""}
|
||||||
</Flex>
|
</Text>
|
||||||
{action.shortcut?.length ? (
|
{action.shortcut?.length ? (
|
||||||
<div style={{ display: "grid", gridAutoFlow: "column", gap: "4px" }}>
|
<div style={{ display: "grid", gridAutoFlow: "column", gap: "4px" }}>
|
||||||
{action.shortcut.map((sc) => (
|
{action.shortcut.map((sc) => (
|
||||||
|
@ -42,6 +42,12 @@ const Icon = styled.div`
|
||||||
color: ${(props) => props.theme.textSecondary};
|
color: ${(props) => props.theme.textSecondary};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Text = styled(Flex)`
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
flex-shrink: 1;
|
||||||
|
`;
|
||||||
|
|
||||||
const Item = styled.div`
|
const Item = styled.div`
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
|
@ -51,6 +57,11 @@ const Item = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ForwardIcon = styled(BackIcon)`
|
const ForwardIcon = styled(BackIcon)`
|
||||||
|
|
Reference in New Issue