Misc fixes ported from #5814

app/components/CommandBar.tsx

@@ -70,6 +70,7 @@ const SearchInput = styled(KBarSearch)`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 

app/components/Input.tsx

@@ -8,7 +8,7 @@ import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
-const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
+export const NativeTextarea = styled.textarea<{ hasIcon?: boolean }>`
   border: 0;
   flex: 1;
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
@@ -19,10 +19,11 @@ const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 
-const RealInput = styled.input<{ hasIcon?: boolean }>`
+export const NativeInput = styled.input<{ hasIcon?: boolean }>`
   border: 0;
   flex: 1;
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
@@ -39,6 +40,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 
   &:-webkit-autofill,
@@ -56,7 +58,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   `};
 `;
 
-const Wrapper = styled.div<{
+export const Wrapper = styled.div<{
   flex?: boolean;
   short?: boolean;
   minHeight?: number;
@@ -205,7 +207,7 @@ function Input(
         <Outline focused={focused} margin={margin}>
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (
-            <RealTextarea
+            <NativeTextarea
               ref={mergeRefs([
                 internalRef,
                 ref as React.RefObject<HTMLTextAreaElement>,
@@ -217,7 +219,7 @@ function Input(
               {...rest}
             />
           ) : (
-            <RealInput
+            <NativeInput
               ref={mergeRefs([
                 internalRef,
                 ref as React.RefObject<HTMLInputElement>,

app/components/List/Item.tsx

@@ -78,6 +78,7 @@ const Wrapper = styled.a<{
 }>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
+  min-height: 32px;
   margin: ${(props) =>
     props.$border === false ? (props.$small ? "8px 0" : "16px 0") : 0};
   border-bottom: 1px solid

app/components/Switch.tsx

@@ -64,7 +64,14 @@ function Switch({
           <InlineLabelText>{label}</InlineLabelText>
         </Label>
         {note && (
-          <Text type="secondary" size="small">
+          <Text
+            type="secondary"
+            size="small"
+            style={{
+              paddingRight: labelPosition === "left" ? width : 0,
+              paddingLeft: labelPosition === "right" ? width : 0,
+            }}
+          >
             {note}
           </Text>
         )}

app/models/base/Model.ts

@@ -44,6 +44,7 @@ export default abstract class Model {
     if (!relations) {
       return;
     }
+    // this is to ensure that multiple loads don’t happen in parallel
     if (this.loadingRelations) {
       return this.loadingRelations;
     }
@@ -64,8 +65,12 @@ export default abstract class Model {
       promises.push(this.store.fetch(this.id, { force: true }));
     }
 
-    this.loadingRelations = Promise.all(promises);
-    return await this.loadingRelations;
+    try {
+      this.loadingRelations = Promise.all(promises);
+      return await this.loadingRelations;
+    } finally {
+      this.loadingRelations = undefined;
+    }
   }
 
   /**