style updates to dropdowns

TeamCodeStream · May 15, 2024 · 39403c3 · 39403c3
1 parent 64ff2b1
commit 39403c3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/shared/ui/Stream/DropdownWithSearch.tsx b/shared/ui/Stream/DropdownWithSearch.tsx
@@ -134,7 +134,17 @@ export const DropdownWithSearch: React.FC<DropdownWithSearchProps> = ({
 		<div>
 			<SelectedValueContainer onClick={e => handleClickSelected(e)}>
 				<SelectedValueRow>
-					<span style={{ color: "var(--text-color)" }}>{selectedOptionOutput()}</span>
+					<span
+						style={{
+							color: "var(--text-color)",
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							paddingRight: "10px",
+						}}
+					>
+						{selectedOptionOutput()}
+					</span>
 					<ChevronIcon>
 						<Icon name="chevron-down" />
 					</ChevronIcon>

diff --git a/shared/ui/Stream/RepositoryAssociatorServiceSearch.tsx b/shared/ui/Stream/RepositoryAssociatorServiceSearch.tsx
@@ -107,7 +107,7 @@ export const RepositoryAssociatorServiceSearch = React.memo(
 							const remoteUrl = remote.rawUrl;
 							if (remoteUrl && id) {
 								const name = derivedState.repos[id] ? derivedState.repos[id].name : "repo";
-								const label = `${name}`;
+								const label = `${name} (${remoteUrl})`;
 								results.push({
 									...repo,
 									key: btoa(remoteUrl),
@@ -197,8 +197,16 @@ export const RepositoryAssociatorServiceSearch = React.memo(
 					have that repository open. If the repository doesn't appear in the list, open it in your
 					IDE.
 				</div>
-				<div style={{ display: "flex", justifyContent: "space-between" }}>
-					<div style={{ width: "100%", marginRight: "10px" }}>
+				<div style={{ display: "flex" }}>
+					<div
+						style={{
+							flexGrow: 1,
+							flexShrink: 1,
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							marginRight: "10px",
+						}}
+					>
 						<div ref={elementRef} style={{ marginBottom: "10px" }}>
 							<DropdownWithSearch
 								id="input-repo-associator-service-search"