Make issue chat composer inline again

ui/src/components/IssueChatThread.test.tsx

@@ -257,7 +257,7 @@ describe("IssueChatThread", () => {
     });
   });
 
-  it("keeps the composer pinned with a capped editor height", () => {
+  it("keeps the composer inline with bottom breathing room and a capped editor height", () => {
     const root = createRoot(container);
 
     act(() => {
@@ -277,9 +277,9 @@ describe("IssueChatThread", () => {
 
     const composer = container.querySelector('[data-testid="issue-chat-composer"]') as HTMLDivElement | null;
     expect(composer).not.toBeNull();
-    expect(composer?.className).toContain("sticky");
+    expect(composer?.className).not.toContain("sticky");
-    expect(composer?.className).toContain("bottom-0");
+    expect(composer?.className).not.toContain("bottom-0");
-    expect(composer?.className).toContain("pb-[calc(env(safe-area-inset-bottom)+0.75rem)]");
+    expect(composer?.className).toContain("pb-[calc(env(safe-area-inset-bottom)+1.5rem)]");
 
     const editor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
     expect(editor?.dataset.contentClassName).toContain("max-h-[28dvh]");

ui/src/components/IssueChatThread.tsx

@@ -1519,97 +1519,94 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
     <div
       ref={composerContainerRef}
       data-testid="issue-chat-composer"
-      className="sticky bottom-0 z-10 bg-gradient-to-t from-background via-background/95 to-background/70 pt-4 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] backdrop-blur supports-[backdrop-filter]:from-background/92 supports-[backdrop-filter]:via-background/82"
+      className="space-y-3 pt-4 pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"
     >
-      <div className="space-y-3 rounded-2xl border border-border/70 bg-background/95 p-3 shadow-sm">
+      <MarkdownEditor
-        <MarkdownEditor
+        ref={editorRef}
-          ref={editorRef}
+        value={body}
-          value={body}
+        onChange={setBody}
-          onChange={setBody}
+        placeholder="Reply"
-          placeholder="Reply"
+        mentions={mentions}
-          mentions={mentions}
+        onSubmit={handleSubmit}
-          onSubmit={handleSubmit}
+        imageUploadHandler={onImageUpload}
-          imageUploadHandler={onImageUpload}
+        bordered
-          bordered
+        contentClassName="min-h-[72px] max-h-[28dvh] overflow-y-auto pr-1 text-sm scrollbar-auto-hide"
-          className="rounded-xl border-border/70 bg-background/95"
+      />
-          contentClassName="min-h-[72px] max-h-[28dvh] overflow-y-auto pr-1 text-sm scrollbar-auto-hide"
-        />
 
-        <div className="flex flex-wrap items-center justify-end gap-3 border-t border-border/60 pt-2">
+      <div className="flex flex-wrap items-center justify-end gap-3">
-          {(onImageUpload || onAttachImage) ? (
+        {(onImageUpload || onAttachImage) ? (
-            <div className="mr-auto flex items-center gap-3">
+          <div className="mr-auto flex items-center gap-3">
-              <input
-                ref={attachInputRef}
-                type="file"
-                accept="image/png,image/jpeg,image/webp,image/gif"
-                className="hidden"
-                onChange={handleAttachFile}
-              />
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => attachInputRef.current?.click()}
-                disabled={attaching}
-                title="Attach image"
-              >
-                <Paperclip className="h-4 w-4" />
-              </Button>
-            </div>
-          ) : null}
-
-          <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
             <input
-              type="checkbox"
+              ref={attachInputRef}
-              checked={reopen}
+              type="file"
-              onChange={(event) => setReopen(event.target.checked)}
+              accept="image/png,image/jpeg,image/webp,image/gif"
-              className="rounded border-border"
+              className="hidden"
+              onChange={handleAttachFile}
             />
-            Re-open
+            <Button
-          </label>
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => attachInputRef.current?.click()}
+              disabled={attaching}
+              title="Attach image"
+            >
+              <Paperclip className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : null}
 
-          {enableReassign && reassignOptions.length > 0 ? (
+        <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
-            <InlineEntitySelector
+          <input
-              value={reassignTarget}
+            type="checkbox"
-              options={reassignOptions}
+            checked={reopen}
-              placeholder="Assignee"
+            onChange={(event) => setReopen(event.target.checked)}
-              noneLabel="No assignee"
+            className="rounded border-border"
-              searchPlaceholder="Search assignees..."
+          />
-              emptyMessage="No assignees found."
+          Re-open
-              onChange={setReassignTarget}
+        </label>
-              className="h-8 text-xs"
-              renderTriggerValue={(option) => {
-                if (!option) return <span className="text-muted-foreground">Assignee</span>;
-                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
-                const agent = agentId ? agentMap?.get(agentId) : null;
-                return (
-                  <>
-                    {agent ? (
-                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                    ) : null}
-                    <span className="truncate">{option.label}</span>
-                  </>
-                );
-              }}
-              renderOption={(option) => {
-                if (!option.id) return <span className="truncate">{option.label}</span>;
-                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
-                const agent = agentId ? agentMap?.get(agentId) : null;
-                return (
-                  <>
-                    {agent ? (
-                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                    ) : null}
-                    <span className="truncate">{option.label}</span>
-                  </>
-                );
-              }}
-            />
-          ) : null}
 
-          <Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
+        {enableReassign && reassignOptions.length > 0 ? (
-            {submitting ? "Posting..." : "Send"}
+          <InlineEntitySelector
-          </Button>
+            value={reassignTarget}
-        </div>
+            options={reassignOptions}
+            placeholder="Assignee"
+            noneLabel="No assignee"
+            searchPlaceholder="Search assignees..."
+            emptyMessage="No assignees found."
+            onChange={setReassignTarget}
+            className="h-8 text-xs"
+            renderTriggerValue={(option) => {
+              if (!option) return <span className="text-muted-foreground">Assignee</span>;
+              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+              const agent = agentId ? agentMap?.get(agentId) : null;
+              return (
+                <>
+                  {agent ? (
+                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  ) : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+            renderOption={(option) => {
+              if (!option.id) return <span className="truncate">{option.label}</span>;
+              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+              const agent = agentId ? agentMap?.get(agentId) : null;
+              return (
+                <>
+                  {agent ? (
+                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  ) : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+          />
+        ) : null}
+
+        <Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
+          {submitting ? "Posting..." : "Send"}
+        </Button>
       </div>
     </div>
   );