Fix request pane name styling

src-web/components/GrpcConnectionSetupPane.tsx

@@ -8,6 +8,7 @@ import { useContainerSize } from '../hooks/useContainerQuery';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { AUTH_TYPE_BASIC, AUTH_TYPE_BEARER, AUTH_TYPE_NONE } from '../lib/model_util';
 import { BasicAuth } from './BasicAuth';
 import { BearerAuth } from './BearerAuth';
@@ -16,6 +17,7 @@ import { CountBadge } from './core/CountBadge';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { PairOrBulkEditor } from './core/PairOrBulkEditor';
+import { PlainInput } from './core/PlainInput';
 import { RadioDropdown } from './core/RadioDropdown';
 import { HStack, VStack } from './core/Stacks';
 import type { TabItem } from './core/Tabs/Tabs';
@@ -340,13 +342,25 @@ export function GrpcConnectionSetupPane({
           />
         </TabContent>
         <TabContent value={TAB_DESCRIPTION}>
-          <MarkdownEditor
+          <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
-            name="request-description"
+            <PlainInput
-            placeholder="Request description"
+              label="Request Name"
-            defaultValue={activeRequest.description}
+              hideLabel
-            stateKey={`description.${activeRequest.id}`}
+              forceUpdateKey={forceUpdateKey}
-            onChange={handleDescriptionChange}
+              defaultValue={activeRequest.name}
-          />
+              className="font-sans !text-xl !px-0"
+              containerClassName="border-0"
+              placeholder={fallbackRequestName(activeRequest)}
+              onChange={(name) => updateRequest.mutate({ id: activeRequest.id, update: { name } })}
+            />
+            <MarkdownEditor
+              name="request-description"
+              placeholder="Request description"
+              defaultValue={activeRequest.description}
+              stateKey={`description.${activeRequest.id}`}
+              onChange={handleDescriptionChange}
+            />
+          </div>
         </TabContent>
       </Tabs>
     </VStack>

src-web/components/MarkdownEditor.tsx

@@ -57,9 +57,9 @@ export function MarkdownEditor({
 
   const preview =
     defaultValue.length === 0 ? (
-      <p className="text-text-subtle">No description</p>
+      <p className="text-text-subtlest">No description</p>
     ) : (
-      <Prose className="max-w-xl overflow-y-auto max-h-full">
+      <Prose className="max-w-xl overflow-y-auto max-h-full [&_*]:cursor-auto [&_*]:select-auto">
         <Markdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
           {value}
         </Markdown>

src-web/components/RequestPane.tsx

@@ -46,8 +46,8 @@ import type {
   GenericCompletionOption,
 } from './core/Editor/genericCompletion';
 import { InlineCode } from './core/InlineCode';
-import { Input } from './core/Input';
 import type { Pair } from './core/PairEditor';
+import { PlainInput } from './core/PlainInput';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
@@ -482,17 +482,15 @@ export const RequestPane = memo(function RequestPane({
             </TabContent>
             <TabContent value={TAB_DESCRIPTION}>
               <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
-                <Input
+                <PlainInput
                   label="Request Name"
                   hideLabel
                   forceUpdateKey={updateKey}
                   defaultValue={activeRequest.name}
-                  className="font-sans !text-2xl"
+                  className="font-sans !text-xl !px-0"
-                  inputWrapperClassName="!px-0"
                   containerClassName="border-0"
                   placeholder={fallbackRequestName(activeRequest)}
                   onChange={(name) => updateRequest({ id: activeRequestId, update: { name } })}
-                  stateKey={`name.${activeRequest.id}`}
                 />
                 <MarkdownEditor
                   name="request-description"