Merge pull request #22 from DevlinRocha/bug/text-overflow

Fixed overflow issues throughout app

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
 `;
 

src/components/Members.tsx

@@ -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
 `;

src/components/channels/Channels.tsx

@@ -105,9 +105,12 @@ export default function Channels() {
             return (
               <Link href={channel.path} key={index} passHref>
                 <a onClick={() => joinChannel(channel)}>
-                  <Channel channel={channel} path={router.asPath}>
-                    # {channel.name}
-                  </Channel>
+                  <ChannelContainer channel={channel} path={router.asPath}>
+                    <ChannelIcon>
+                      {channel.type === "text" ? "#" : "*"}
+                    </ChannelIcon>
+                    <ChannelName>{channel.name}</ChannelName>
+                  </ChannelContainer>
                 </a>
               </Link>
             );
@@ -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<ChannelProps>`
+const ChannelContainer = tw.li<ChannelProps>`
   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
+`;

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`

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
 `;
 

src/components/userSettings/settingsView/myAccountSettings/MyAccountCard.tsx

@@ -78,19 +78,19 @@ 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`
   flex flex-col m-4 mt-2 p-4 bg-gray-100 rounded
 `;
 
 const Banner = tw.span`
-  w-165 h-25 rounded-t-md
+  w-full h-25 rounded-t-md
 `;
 
 const ProfilePicture = tw.div`

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
 `;