Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: account menu makeover when account name is larger #3173

Merged
merged 5 commits into from
Jun 17, 2024
Merged

fix: account menu makeover when account name is larger #3173

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c7feeb
fix: account menu makeover when account name is larger
pavanjoshi914 Jun 14, 2024
e689ef8
Merge branch 'master' into fix-makeover
pavanjoshi914 Jun 14, 2024
c87c4b8
feat: adapt to dynamic width of the container
pavanjoshi914 Jun 17, 2024
92f8afd
Merge branch 'fix-makeover' of https://github.com/getAlby/lightning-b…
pavanjoshi914 Jun 17, 2024
c6955c4
Merge branch 'master' into fix-makeover
pavanjoshi914 Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/components/AccountMenu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function AccountMenu({ showOptions = true }: Props) {
{authAccount && (
<Menu.Item>
<div className="p-2 overflow-hidden">
<div className="flex flex-row items-center justify-between bg-amber-50 dark:bg-brand-yellow/50 border-brand-yellow border-l-4 p-2 rounded-lg">
<div className="flex flex-row items-center justify-between gap-2 bg-amber-50 dark:bg-brand-yellow/50 border-brand-yellow border-l-4 p-2 rounded-lg">
<div className="flex flex-row items-center gap-2">
<div className="shrink-0">
<Avatar
Expand All @@ -103,7 +103,7 @@ function AccountMenu({ showOptions = true }: Props) {
url={authAccount.avatarUrl}
/>
</div>
<div className="flex flex-col">
<div className="flex flex-col max-w-40">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make this dynamic so the text field just uses the maximum available space (but gets truncated when overflowing)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

Copy link
Contributor Author

@pavanjoshi914 pavanjoshi914 Jun 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

<span className="overflow-hidden text-ellipsis whitespace-nowrap font-medium">
{authAccount.name}
</span>
Expand Down
Loading