From 9af0239041bfd10f656a97994721e3243278ee4f Mon Sep 17 00:00:00 2001
From: Robert <robertbrignull@github.com>
Date: Mon, 4 Sep 2023 15:06:22 +0100
Subject: [PATCH 1/3] Show a dash when dropdown is disabled

---
 .../ql-vscode/src/view/common/Dropdown.tsx    | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/extensions/ql-vscode/src/view/common/Dropdown.tsx b/extensions/ql-vscode/src/view/common/Dropdown.tsx
index cad5adad0b1..57a6864f449 100644
--- a/extensions/ql-vscode/src/view/common/Dropdown.tsx
+++ b/extensions/ql-vscode/src/view/common/Dropdown.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import { ChangeEvent } from "react";
 import { styled } from "styled-components";
 
+const DISABLED_VALUE = "-";
+
 const StyledDropdown = styled.select`
   width: 100%;
   height: calc(var(--input-height) * 1px);
@@ -31,18 +33,20 @@ type Props = {
 export function Dropdown({ value, options, disabled, onChange }: Props) {
   return (
     <StyledDropdown
-      value={disabled ? undefined : value}
+      value={disabled ? DISABLED_VALUE : value}
       disabled={disabled}
       onChange={onChange}
     >
-      {!disabled && (
-        <>
-          {options.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </>
+      {disabled ? (
+        <option key={DISABLED_VALUE} value={DISABLED_VALUE}>
+          {DISABLED_VALUE}
+        </option>
+      ) : (
+        options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))
       )}
     </StyledDropdown>
   );

From c316d52514e713243620f017b74f430cdf94537c Mon Sep 17 00:00:00 2001
From: Robert <robertbrignull@github.com>
Date: Mon, 4 Sep 2023 15:23:03 +0100
Subject: [PATCH 2/3] Set opacity to 40% when disabled

---
 extensions/ql-vscode/src/view/common/Dropdown.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/extensions/ql-vscode/src/view/common/Dropdown.tsx b/extensions/ql-vscode/src/view/common/Dropdown.tsx
index 57a6864f449..e0cf489365e 100644
--- a/extensions/ql-vscode/src/view/common/Dropdown.tsx
+++ b/extensions/ql-vscode/src/view/common/Dropdown.tsx
@@ -4,13 +4,15 @@ import { styled } from "styled-components";
 
 const DISABLED_VALUE = "-";
 
-const StyledDropdown = styled.select`
+const StyledDropdown = styled.select<{ disabled?: boolean }>`
   width: 100%;
   height: calc(var(--input-height) * 1px);
   background: var(--vscode-dropdown-background);
   color: var(--vscode-foreground);
   border: none;
   padding: 2px 6px 2px 8px;
+  opacity: ${(props) =>
+    props.disabled ? "var(--disabled-opacity)" : "inherit"};
 `;
 
 type Props = {

From 074f3fb402907a8096df63887cded0bebda9412f Mon Sep 17 00:00:00 2001
From: Robert <robertbrignull@github.com>
Date: Mon, 4 Sep 2023 15:23:21 +0100
Subject: [PATCH 3/3] Move dropdown arrow away from the right-hand edge

---
 extensions/ql-vscode/src/view/common/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/ql-vscode/src/view/common/Dropdown.tsx b/extensions/ql-vscode/src/view/common/Dropdown.tsx
index e0cf489365e..3d10aa9ebde 100644
--- a/extensions/ql-vscode/src/view/common/Dropdown.tsx
+++ b/extensions/ql-vscode/src/view/common/Dropdown.tsx
@@ -9,7 +9,7 @@ const StyledDropdown = styled.select<{ disabled?: boolean }>`
   height: calc(var(--input-height) * 1px);
   background: var(--vscode-dropdown-background);
   color: var(--vscode-foreground);
-  border: none;
+  border-width: 0 5px 0 0;
   padding: 2px 6px 2px 8px;
   opacity: ${(props) =>
     props.disabled ? "var(--disabled-opacity)" : "inherit"};