urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 13:54:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

landscape: flex-shrink group title in dropdown

Browse Source 
Instead of using a maxWidth in pixels, we flexbox to truncate the title.
This commit is contained in:
Matilde Park 2020-11-02 16:36:43 -05:00
parent 07b74af662
commit b6286e1abd
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/interface/src/views/components/Dropdown.tsx
View File

@ -111,8 +111,8 @@ export function Dropdown(props: DropdownProps) {
});
return (
<Box flexShrink={0} position={open ? "relative" : "static"}>
<ClickBox ref={anchorRef} onClick={onOpen}>
<Box flexShrink={1} position={open ? "relative" : "static"} minWidth='0'>
<ClickBox width='100%' ref={anchorRef} onClick={onOpen}>
{children}
</ClickBox>
{open && (

14
pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
View File

@ -165,24 +165,24 @@ export function GroupSwitcher(props: {
</Col>
}
>
<Row p={2} alignItems="center">
<Row alignItems="center" mr={1} flex='1'>
<Text overflow='hidden' display='inline-block' maxWidth='131px' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
<Row p={2} alignItems="center" width='100%' minWidth='0'>
<Row alignItems="center" mr={1} flex='1' width='100%' minWidth='0'>
<Text overflow='hidden' display='inline-block' flexShrink='1' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre'}}>{title}</Text>
<Icon size='12px' ml='1' mt="0px" display="inline-block" icon="ChevronSouth" />
</Row>
<Icon size='12px' ml='1' mt="0px" display="inline-block" icon="ChevronSouth" />
</Row>
</Dropdown>
<Row pr={1} justifyContent="flex-end" alignItems="center">
<Row pr={1} flexShrink='0' justifyContent="flex-end" alignItems="center">
{workspace.type === "group" && (
<>
<Link to={navTo("/invites")}>
<Link flexShrink='0' to={navTo("/invites")}>
<Icon
display="block"
color='blue'
icon="CreateGroup"
/>
</Link>
<Link to={navTo("/popover/settings")}>
<Link flexShrink='0' to={navTo("/popover/settings")}>
<Icon color='gray' display="block" m={2} icon="Gear" />
</Link>
</>