From 02e30de0deb959d5003301d363430cdabbb53fb7 Mon Sep 17 00:00:00 2001
From: Matt Katz <mykatz01@gmail.com>
Date: Sun, 19 Dec 2021 19:04:30 -0800
Subject: [PATCH] Fix sidebar widths, handle overflow

---
 components/Directory.tsx | 5 +++--
 components/UserIcon.tsx  | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/Directory.tsx b/components/Directory.tsx
index 11e5fd4..e2a88f1 100644
--- a/components/Directory.tsx
+++ b/components/Directory.tsx
@@ -12,16 +12,17 @@ export const Directory: React.FC<DirectoryProps> = (props) => {
 	return (
 		<div className="p-4 bg-white rounded-lg flex flex-col gap-2">
 			{props.users.map((user) => (
-				<div key={user.publicKey} className="flex gap-2 items-center">
+				<div key={user.publicKey} className="flex gap-2 items-center w-full">
 					<UserIcon user={user} />
 					<a
-						className="mt-0.5 hover:underline flex-1"
+						className="mt-0.5 hover:underline flex-1 overflow-hidden overflow-ellipsis"
 						href={`https://twitter.com/${user.twitterHandle}`}
 					>
 						{user.twitterHandle}
 					</a>
 					<a
 						href={`https://twitter.com/${user.twitterHandle}/status/${user.verificationTweetId}`}
+						className="flex-none"
 					>
 						<img
 							width={16}
diff --git a/components/UserIcon.tsx b/components/UserIcon.tsx
index 7b228d6..c99ae77 100644
--- a/components/UserIcon.tsx
+++ b/components/UserIcon.tsx
@@ -8,7 +8,7 @@ export function UserIcon({ user }: UserIconProps) {
 	return (
 		<a
 			href={`https://twitter.com/${user.twitterHandle}`}
-			className="inline-block relative h-6 w-6 bg-gray-200 rounded-full text-center text-gray-400 overflow-hidden border border-gray-200"
+			className="inline-block relative h-6 w-6 bg-gray-200 rounded-full text-center text-gray-400 overflow-hidden border border-gray-200 flex-none"
 		>
 			<img
 				className="absolute w-full h-full top-0 left-0"