From f921ea2ac53aee7fa87ba84d50d8452eda356160 Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 02:24:10 -0800 Subject: [PATCH 1/8] `word-break` for long usernames in MemberProfile --- src/components/MemberProfileCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MemberProfileCard.tsx b/src/components/MemberProfileCard.tsx index 2d4bcf4..478b3e6 100644 --- a/src/components/MemberProfileCard.tsx +++ b/src/components/MemberProfileCard.tsx @@ -160,9 +160,10 @@ const UsernameContainer = tw.div` `; const Username = tw.span` + break-all `; -const Tag = tw(Username)` +const Tag = tw.span` text-gray-600 `; From 4758c9141b92fce2964b11ae062aaa0308d19c0f Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 02:24:30 -0800 Subject: [PATCH 2/8] Truncate text overflow in members list --- src/components/Members.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Members.tsx b/src/components/Members.tsx index 3b116b2..76d0df4 100644 --- a/src/components/Members.tsx +++ b/src/components/Members.tsx @@ -114,7 +114,7 @@ export default function Members() { } const Container = tw.div` - relative flex-none w-60 h-full bg-gray-100 + relative flex-none w-60 h-full bg-gray-100 truncate `; const Sidebar = tw.aside` From f10383dd934dad9c10e71d9b02fb081c278ddda2 Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 03:05:24 -0800 Subject: [PATCH 3/8] Moved truncate to username for text-ellipsis --- src/components/Members.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Members.tsx b/src/components/Members.tsx index 76d0df4..d90cde0 100644 --- a/src/components/Members.tsx +++ b/src/components/Members.tsx @@ -114,7 +114,7 @@ export default function Members() { } const Container = tw.div` - relative flex-none w-60 h-full bg-gray-100 truncate + relative flex-none w-60 h-full bg-gray-100 `; const Sidebar = tw.aside` @@ -144,5 +144,5 @@ const StyledImage = tw(Image)` `; const Username = tw.span` - ml-3 flex-1 overflow-hidden + ml-3 flex-1 overflow-hidden truncate `; From 7a8abc263a76f288d2999ac25af23e0f9bc32065 Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 03:17:50 -0800 Subject: [PATCH 4/8] Truncate channel names --- src/components/channels/Channels.tsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/channels/Channels.tsx b/src/components/channels/Channels.tsx index fcf31f7..9f6682d 100644 --- a/src/components/channels/Channels.tsx +++ b/src/components/channels/Channels.tsx @@ -105,9 +105,12 @@ export default function Channels() { return ( joinChannel(channel)}> - - # {channel.name} - + + + {channel.type === "text" ? "#" : "*"} + + {channel.name} + ); @@ -139,7 +142,7 @@ const Header = tw.header` `; const Heading = tw.h1` - font-semibold + font-semibold truncate `; const StyledImage = tw(Image)` @@ -148,10 +151,18 @@ const StyledImage = tw(Image)` const ChannelList = tw.ol` `; -const Channel = tw.li` +const ChannelContainer = tw.li` flex cursor-pointer py-1 pr-2 mx-2 pl-2 rounded-md ${(props) => props.path.includes(props.channel.channelID) ? "bg-gray-500/[0.24]" : "hover:bg-gray-500/[0.08]"} `; + +const ChannelIcon = tw.span` + mr-1.5 text-gray-500 font-bold +`; + +const ChannelName = tw.span` + truncate +`; From c89e885e0beed52bed230e42a3ef0301e2536eef Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 03:25:07 -0800 Subject: [PATCH 5/8] Truncate username in user panel --- src/components/channels/UserPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/channels/UserPanel.tsx b/src/components/channels/UserPanel.tsx index 04a61ac..48a6657 100644 --- a/src/components/channels/UserPanel.tsx +++ b/src/components/channels/UserPanel.tsx @@ -75,11 +75,11 @@ const StyledImage = tw(Image)` `; const Username = tw.span` - flex flex-col overflow-hidden select-text cursor-pointer + flex flex-col w-[84px] overflow-hidden select-text cursor-pointer `; const DisplayName = tw.span` - text-sm font-semibold + text-sm font-semibold truncate `; const Tag = tw.span` From 9b86b168b2bdf1f5e18aed5fd19b966f7299c71b Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 03:25:34 -0800 Subject: [PATCH 6/8] Added word-break to usernames in messages --- src/components/chat/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/Message.tsx b/src/components/chat/Message.tsx index d6188f6..17b8735 100644 --- a/src/components/chat/Message.tsx +++ b/src/components/chat/Message.tsx @@ -174,7 +174,7 @@ const MessageInfo = tw.div` `; const Username = tw.h2` - mr-1 text-gray-900 font-semibold cursor-pointer + mr-1 text-gray-900 font-semibold cursor-pointer break-all hover:underline hover:decoration-gray-900 `; From 1b6f53d7d170a63f0738c969fcd5479f2986e4fe Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 03:28:24 -0800 Subject: [PATCH 7/8] Clipped overflow from long usernames in MyAccount --- .../settingsView/myAccountSettings/MyAccountCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/userSettings/settingsView/myAccountSettings/MyAccountCard.tsx b/src/components/userSettings/settingsView/myAccountSettings/MyAccountCard.tsx index 008e9a5..f1d3182 100644 --- a/src/components/userSettings/settingsView/myAccountSettings/MyAccountCard.tsx +++ b/src/components/userSettings/settingsView/myAccountSettings/MyAccountCard.tsx @@ -78,11 +78,11 @@ export default function MyAccountCard() { } const Container = tw.section` - relative flex flex-col bg-gray-200 rounded + relative flex flex-col min-w-[655px] max-w-[660px] bg-gray-200 rounded `; const ProfileContainer = tw.section` - flex h-18 pt-4 pr-4 pl-30 rounded-md + flex h-18 pt-4 pr-4 pl-30 rounded-md overflow-clip `; const SettingContainer = tw.section` @@ -90,7 +90,7 @@ const SettingContainer = tw.section` `; const Banner = tw.span` - w-165 h-25 rounded-t-md + w-full h-25 rounded-t-md `; const ProfilePicture = tw.div` From 650bc97c4a3cbb90cee2691a80e552fd0d6b325d Mon Sep 17 00:00:00 2001 From: Devlin Date: Thu, 13 Jan 2022 03:29:00 -0800 Subject: [PATCH 8/8] Added word-break for usernames in UserProfile --- .../settingsView/userProfileSettings/UserProfileCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/userSettings/settingsView/userProfileSettings/UserProfileCard.tsx b/src/components/userSettings/settingsView/userProfileSettings/UserProfileCard.tsx index 1767ea8..aad8d5d 100644 --- a/src/components/userSettings/settingsView/userProfileSettings/UserProfileCard.tsx +++ b/src/components/userSettings/settingsView/userProfileSettings/UserProfileCard.tsx @@ -65,9 +65,10 @@ const UsernameContainer = tw.div` `; const Username = tw.span` + break-all `; -const Tag = tw(Username)` +const Tag = tw.span` text-gray-600 `;