Skip to content

Commit 12e73f2

Browse files
setchysetchy
committed
fix account rendering for long names
Signed-off-by: Adam Setch <[email protected]>
1 parent 3a0de64 commit 12e73f2

File tree

2 files changed

+763
-673
lines changed

2 files changed

+763
-673
lines changed

‎src/renderer/routes/Accounts.tsx‎

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -77,18 +77,18 @@ export const AccountsRoute: FC = () => {
7777
<div className="flex h-screen flex-col" data-testid="accounts">
7878
<Header icon={PersonIcon}>Accounts</Header>
7979
<div className="flex-grow overflow-x-auto px-8">
80-
<div className="mt-4 flex flex-col text-sm">
80+
<div className="mt-4 flex flex-col">
8181
{auth.accounts.map((account, i) => {
8282
const AuthMethodIcon = getAuthMethodIcon(account.method);
8383
const PlatformIcon = getPlatformIcon(account.platform);
8484

8585
return (
8686
<div
8787
key={getAccountUUID(account)}
88-
className="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-2 dark:bg-gray-sidebar"
88+
className="rounded-md bg-gray-100 p-2 pb-0 dark:bg-gray-sidebar"
8989
>
9090
<Stack direction="vertical" gap="none">
91-
<Tooltip text="Open profile" direction="e">
91+
<Tooltip text="Open profile" direction="se">
9292
<Button
9393
onClick={() => openAccountProfile(account)}
9494
data-testid="account-profile"
@@ -100,64 +100,70 @@ export const AccountsRoute: FC = () => {
100100
>
101101
<Avatar src={account.user.avatar} size={Size.XLARGE} />
102102
<Text>@{account.user.login}</Text>
103-
<Text as="i">({account.user?.name})</Text>
103+
<span className="text-xs italic">
104+
({account.user?.name})
105+
</span>
104106
</Stack>
105107
</Button>
106108
</Tooltip>
107109

108-
<ActionList variant="inset">
109-
<Tooltip text="Open Host" direction="e">
110-
<ActionList.Item
111-
onSelect={() => openHost(account.hostname)}
112-
data-testid="account-host"
113-
>
114-
<ActionList.LeadingVisual>
115-
<PlatformIcon />
116-
</ActionList.LeadingVisual>
117-
{account.hostname}
118-
</ActionList.Item>
119-
</Tooltip>
120-
121-
<Tooltip text="Open Developer Settings" direction="e">
122-
<ActionList.Item
123-
onSelect={() => openDeveloperSettings(account)}
124-
data-testid="account-developer-settings"
125-
>
126-
<ActionList.LeadingVisual>
127-
<AuthMethodIcon />
128-
</ActionList.LeadingVisual>
129-
{account.method}
130-
</ActionList.Item>
131-
</Tooltip>
132-
</ActionList>
133-
</Stack>
134-
135-
<Stack direction="horizontal" gap="condensed">
136-
<IconButton
137-
icon={i === 0 ? StarFillIcon : StarIcon}
138-
aria-label={
139-
i === 0 ? 'Primary account' : 'Set as primary account'
140-
}
141-
variant={i === 0 ? 'primary' : 'default'}
142-
onClick={() => setAsPrimaryAccount(account)}
143-
data-testid="account-set-primary"
144-
/>
145-
<IconButton
146-
icon={SyncIcon}
147-
aria-label={`Refresh ${account.user.login}`}
148-
onClick={async () => {
149-
await refreshAccount(account);
150-
navigate('/accounts', { replace: true });
151-
}}
152-
data-testid="account-refresh"
153-
/>
154-
<IconButton
155-
icon={SignOutIcon}
156-
aria-label={`Logout ${account.user.login}`}
157-
variant="danger"
158-
onClick={() => logoutAccount(account)}
159-
data-testid="account-logout"
160-
/>
110+
<Stack direction="horizontal" gap="condensed" align="start">
111+
<Stack direction="vertical" gap="none">
112+
<ActionList variant="inset">
113+
<Tooltip text="Open Host" direction="e">
114+
<ActionList.Item
115+
onSelect={() => openHost(account.hostname)}
116+
data-testid="account-host"
117+
>
118+
<ActionList.LeadingVisual>
119+
<PlatformIcon />
120+
</ActionList.LeadingVisual>
121+
<span className="text-xs">{account.hostname}</span>
122+
</ActionList.Item>
123+
</Tooltip>
124+
125+
<Tooltip text="Open Developer Settings" direction="e">
126+
<ActionList.Item
127+
onSelect={() => openDeveloperSettings(account)}
128+
data-testid="account-developer-settings"
129+
>
130+
<ActionList.LeadingVisual>
131+
<AuthMethodIcon />
132+
</ActionList.LeadingVisual>
133+
<span className="text-xs">{account.method}</span>
134+
</ActionList.Item>
135+
</Tooltip>
136+
</ActionList>
137+
</Stack>
138+
139+
<Stack direction="horizontal" gap="condensed">
140+
<IconButton
141+
icon={i === 0 ? StarFillIcon : StarIcon}
142+
aria-label={
143+
i === 0 ? 'Primary account' : 'Set as primary account'
144+
}
145+
variant={i === 0 ? 'primary' : 'default'}
146+
onClick={() => setAsPrimaryAccount(account)}
147+
data-testid="account-set-primary"
148+
/>
149+
<IconButton
150+
icon={SyncIcon}
151+
aria-label={`Refresh ${account.user.login}`}
152+
onClick={async () => {
153+
await refreshAccount(account);
154+
navigate('/accounts', { replace: true });
155+
}}
156+
data-testid="account-refresh"
157+
/>
158+
<IconButton
159+
icon={SignOutIcon}
160+
aria-label={`Logout ${account.user.login}`}
161+
variant="danger"
162+
onClick={() => logoutAccount(account)}
163+
data-testid="account-logout"
164+
/>
165+
</Stack>
166+
</Stack>
161167
</Stack>
162168
</div>
163169
);

0 commit comments

Comments
 (0)