Tweak workspace settings dialog and Markdown editor

src-web/components/core/Dialog.tsx

@@ -53,72 +53,74 @@ export function Dialog({
   return (
     <Overlay open={open} onClose={onClose} portalName="dialog">
       <div
+        role="dialog"
         className={classNames(
-          'x-theme-dialog absolute inset-0 flex flex-col items-center pointer-events-none',
+          'x-theme-dialog absolute inset-0 pointer-events-none',
+          'h-full flex flex-col items-center justify-center',
           vAlign === 'top' && 'justify-start',
           vAlign === 'center' && 'justify-center',
         )}
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
       >
-        <div role="dialog" aria-labelledby={titleId} aria-describedby={descriptionId}>
-          <motion.div
-            initial={{ top: 5, scale: 0.97 }}
-            animate={{ top: 0, scale: 1 }}
+        <motion.div
+          initial={{ top: 5, scale: 0.97 }}
+          animate={{ top: 0, scale: 1 }}
+          className={classNames(
+            className,
+            'grid grid-rows-[auto_auto_minmax(0,1fr)]',
+            'grid-cols-1', // must be here for inline code blocks to correctly break words
+            'relative bg-surface pointer-events-auto',
+            'rounded-lg',
+            'border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]',
+            'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]',
+            size === 'sm' && 'w-[28rem]',
+            size === 'md' && 'w-[45rem]',
+            size === 'lg' && 'w-[65rem]',
+            size === 'full' && 'w-[100vw] h-[100vh]',
+            size === 'dynamic' && 'min-w-[20rem] max-w-[100vw] w-full',
+          )}
+        >
+          {title ? (
+            <Heading className="px-6 mt-4 mb-2" size={1} id={titleId}>
+              {title}
+            </Heading>
+          ) : (
+            <span />
+          )}
+
+          {description ? (
+            <div className="px-6 text-text-subtle" id={descriptionId}>
+              {description}
+            </div>
+          ) : (
+            <span />
+          )}
+
+          <div
             className={classNames(
-              className,
-              'grid grid-rows-[auto_auto_minmax(0,1fr)]',
-              'grid-cols-1', // must be here for inline code blocks to correctly break words
-              'relative bg-surface pointer-events-auto',
-              'rounded-lg',
-              'border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]',
-              'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-4rem)]',
-              size === 'sm' && 'w-[28rem] max-h-[80vh]',
-              size === 'md' && 'w-[45rem] max-h-[80vh]',
-              size === 'lg' && 'w-[65rem] max-h-[80vh]',
-              size === 'full' && 'w-[100vw] h-[100vh]',
-              size === 'dynamic' && 'min-w-[20rem] max-w-[100vw] w-full mt-8',
+              'h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1',
+              !noPadding && 'px-6 py-2',
+              !noScroll && 'overflow-y-auto overflow-x-hidden',
             )}
           >
-            {title ? (
-              <Heading className="px-6 mt-4 mb-2" size={1} id={titleId}>
-                {title}
-              </Heading>
-            ) : (
-              <span />
-            )}
+            {children}
+          </div>
 
-            {description ? (
-              <div className="px-6 text-text-subtle" id={descriptionId}>
-                {description}
-              </div>
-            ) : (
-              <span />
-            )}
-
-            <div
-              className={classNames(
-                'h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1',
-                !noPadding && 'px-6 py-2',
-                !noScroll && 'overflow-y-auto overflow-x-hidden',
-              )}
-            >
-              {children}
+          {/*Put close at the end so that it's the last thing to be tabbed to*/}
+          {!hideX && (
+            <div className="ml-auto absolute right-1 top-1">
+              <IconButton
+                className="opacity-70 hover:opacity-100"
+                onClick={onClose}
+                title="Close dialog (Esc)"
+                aria-label="Close"
+                size="sm"
+                icon="x"
+              />
             </div>
-
-            {/*Put close at the end so that it's the last thing to be tabbed to*/}
-            {!hideX && (
-              <div className="ml-auto absolute right-1 top-1">
-                <IconButton
-                  className="opacity-70 hover:opacity-100"
-                  onClick={onClose}
-                  title="Close dialog (Esc)"
-                  aria-label="Close"
-                  size="sm"
-                  icon="x"
-                />
-              </div>
-            )}
-          </motion.div>
-        </div>
+          )}
+        </motion.div>
       </div>
     </Overlay>
   );

src-web/components/core/Input.tsx

@@ -6,6 +6,7 @@ import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import type { EditorProps } from './Editor/Editor';
 import { Editor } from './Editor/Editor';
 import { IconButton } from './IconButton';
+import { Label } from './Label';
 import { HStack } from './Stacks';
 
 export type InputProps = Pick<
@@ -136,16 +137,9 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <label
-        htmlFor={id}
-        className={classNames(
-          labelClassName,
-          'text-text-subtle whitespace-nowrap',
-          hideLabel && 'sr-only',
-        )}
-      >
+      <Label htmlFor={id} className={classNames(labelClassName, hideLabel && 'sr-only')}>
         {label}
-      </label>
+      </Label>
       <HStack
         alignItems="stretch"
         className={classNames(

src-web/components/core/Label.tsx

@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+export function Label({
+  htmlFor,
+  className,
+  ...props
+}: HTMLAttributes<HTMLLabelElement> & { htmlFor: string }) {
+  return (
+    <label
+      className={classNames(className, 'text-text-subtle whitespace-nowrap')}
+      htmlFor={htmlFor}
+      {...props}
+    />
+  );
+}

src-web/components/core/PlainInput.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { IconButton } from './IconButton';
 import type { InputProps } from './Input';
+import { Label } from './Label';
 import { HStack } from './Stacks';
 
 export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type' | 'stateKey'> &
@@ -45,15 +46,18 @@ export function PlainInput({
   const inputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {
-    onFocusRaw?.(e);
-    setFocused(true);
-    if (autoSelect) {
-      inputRef.current?.select();
-      textareaRef.current?.select();
-    }
-    onFocus?.();
-  }, [autoSelect, onFocus, onFocusRaw]);
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      onFocusRaw?.(e);
+      setFocused(true);
+      if (autoSelect) {
+        inputRef.current?.select();
+        textareaRef.current?.select();
+      }
+      onFocus?.();
+    },
+    [autoSelect, onFocus, onFocusRaw],
+  );
 
   const handleBlur = useCallback(() => {
     setFocused(false);
@@ -94,16 +98,9 @@ export function PlainInput({
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <label
-        htmlFor={id}
-        className={classNames(
-          labelClassName,
-          'text-text-subtle whitespace-nowrap flex-shrink-0',
-          hideLabel && 'sr-only',
-        )}
-      >
+      <Label htmlFor={id} className={classNames(labelClassName, hideLabel && 'sr-only')}>
         {label}
-      </label>
+      </Label>
       <HStack
         alignItems="stretch"
         className={classNames(