Update provider dropdown 'select' element so it's the full size of th…

…e visible UI element
gitkraken · May 28, 2024 · 366d2af · 366d2af
1 parent 87aaba9
commit 366d2af
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/popup/components/FocusView.tsx b/src/popup/components/FocusView.tsx
@@ -210,10 +210,12 @@ export const FocusView = ({ userId }: { userId: string }) => {
 				</div>
 			)}
 			{selectedProvider && connectedProviders && connectedProviders.length > 1 && (
-				<div className="provider-select text-secondary">
-					PRs: <img src={ProviderMeta[selectedProvider].iconSrc} height={14} />
+				<div className="provider-select-container">
+					<div className="provider-select-prefix text-secondary">
+						PRs: <img src={ProviderMeta[selectedProvider].iconSrc} height={14} />
+					</div>
 					<select
-						className="text-secondary"
+						className="provider-select text-secondary"
 						value={selectedProvider}
 						onChange={onProviderChange}
 						disabled={focusViewDataQuery.isLoading}

diff --git a/static/popup.css b/static/popup.css
@@ -203,22 +203,26 @@ html {
 }
 
 /* Focus View - Provider Dropdown */
-.focus-view .provider-select {
-	display: inline-block;
-	border: 1px solid var(--color-border-input);
-	padding: 4px 12px;
-	border-radius: 14px;
+.focus-view .provider-select-container {
+	position: relative;
+	margin-bottom: 12px;
+}
+.focus-view .provider-select-prefix {
+	position: absolute;
+	top: 5px;
+	left: 12px;
 	display: flex;
 	align-items: center;
-	width: fit-content;
-	margin-bottom: 12px;
+	pointer-events: none;
 }
-.focus-view .provider-select img {
+.focus-view .provider-select-prefix img {
 	margin-left: 4px;
 }
-.focus-view .provider-select select {
+.focus-view .provider-select {
 	background: none;
-	border: none;
+	border: 1px solid var(--color-border-input);
+	padding: 4px 0px 4px 60px;
+	border-radius: 14px;
 }
 
 /* Focus View - Pull Request Buckets */