Tweaks for JWT auth

src-web/components/core/Input.tsx

@@ -44,6 +44,7 @@ export type InputProps = Pick<
   validate?: boolean | ((v: string) => boolean);
   required?: boolean;
   wrapLines?: boolean;
+  multiLine?: boolean;
   stateKey: EditorProps['stateKey'];
 };
 
@@ -73,6 +74,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
     validate,
     readOnly,
     stateKey,
+    multiLine,
     ...props
   }: InputProps,
   ref,
@@ -144,7 +146,8 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
       <Label
         htmlFor={id.current}
         optional={!required}
-        className={classNames(labelClassName, hideLabel && 'sr-only')}
+        visuallyHidden={hideLabel}
+        className={classNames(labelClassName)}
       >
         {label}
       </Label>
@@ -174,9 +177,11 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
           <Editor
             ref={editorRef}
             id={id.current}
-            singleLine
+            hideGutter
+            singleLine={!multiLine}
             stateKey={stateKey}
             wrapLines={wrapLines}
+            heightMode="auto"
             onKeyDown={handleKeyDown}
             type={type === 'password' && !obscured ? 'text' : type}
             defaultValue={defaultValue}
@@ -185,7 +190,7 @@ export const Input = forwardRef<EditorView, InputProps>(function Input(
             onChange={handleChange}
             onPaste={onPaste}
             onPasteOverwrite={onPasteOverwrite}
-            className={editorClassName}
+            className={classNames(editorClassName, multiLine && 'py-1.5')}
             onFocus={handleFocus}
             onBlur={handleBlur}
             readOnly={readOnly}

src-web/components/core/Label.tsx

@@ -6,21 +6,33 @@ export function Label({
   className,
   optional,
   children,
+  visuallyHidden,
+  otherTags = [],
   ...props
-}: HTMLAttributes<HTMLLabelElement> & { htmlFor: string; optional?: boolean }) {
+}: HTMLAttributes<HTMLLabelElement> & {
+  htmlFor: string;
+  optional?: boolean;
+  otherTags?: string[];
+  visuallyHidden?: boolean;
+}) {
+  const tags = optional ? ['optional', ...otherTags] : otherTags;
   return (
     <label
-      className={classNames(className, 'text-text-subtle whitespace-nowrap flex items-center gap-1')}
+      className={classNames(
+        className,
+        visuallyHidden && 'sr-only',
+        'flex-shrink-0',
+        'text-text-subtle whitespace-nowrap flex items-center gap-1',
+      )}
       htmlFor={htmlFor}
       {...props}
     >
       {children}
-      {optional ? (
-        <>
-          {' '}
-          <span className="text-xs text-text-subtlest">(optional)</span>
-        </>
-      ) : null}
+      {tags.map((tag, i) => (
+        <span key={i} className="text-xs text-text-subtlest">
+          ({tag})
+        </span>
+      ))}
     </label>
   );
 }

src-web/components/core/PlainInput.tsx

@@ -98,7 +98,12 @@ export function PlainInput({
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <Label htmlFor={id} className={classNames(labelClassName, 'flex-shrink-0', hideLabel && 'sr-only')}>
+      <Label
+        htmlFor={id}
+        className={labelClassName}
+        visuallyHidden={hideLabel}
+        optional={!required}
+      >
         {label}
       </Label>
       <HStack

src-web/components/core/Select.tsx

@@ -5,6 +5,7 @@ import { useOsInfo } from '../../hooks/useOsInfo';
 import { trackEvent } from '../../lib/analytics';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
+import { Label } from './Label';
 import type { RadioDropdownItem } from './RadioDropdown';
 import { RadioDropdown } from './RadioDropdown';
 import { HStack } from './Stacks';
@@ -61,16 +62,9 @@ export function Select<T extends string>({
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <label
-        htmlFor={id}
-        className={classNames(
-          labelClassName,
-          'text-text-subtle whitespace-nowrap',
-          hideLabel && 'sr-only',
-        )}
-      >
+      <Label htmlFor={id} visuallyHidden={hideLabel} className={labelClassName}>
         {label}
-      </label>
+      </Label>
       {osInfo?.osType === 'macos' ? (
         <HStack
           space={2}