fix: Polish message editor, settings dialog and minor UX tweaks (#1468)

## Problem

 Small UI inconsistencies across the message editor, settings dialog and session indicator.

<!-- Who is this for and what problem does it solve? -->

<!-- Closes #ISSUE_ID -->

## Changes

1. Refine message editor padding, spacing and add slim custom scrollbar
2. Style hyperlinks in Tiptap editor with accent color and underline
3. Change "interrupt" to "stop" in generating indicator copy
4. Use text cursor for inline editable textarea
5. Make settings scroll area span full panel width with centered content

<!-- What did you change and why? -->

<!-- If there are frontend changes, include screenshots. -->

## How did you test this?

Manually

<!-- Describe what you tested -- manual steps, automated tests, or both. -->

<!-- If you're an agent, only list tests you actually ran. -->

Author: charlesvien

.github/workflows/code-release.yml

@@ -220,4 +220,4 @@ jobs:
         env:
           GH_TOKEN: ${{ steps.app-token.outputs.token }}
           APP_VERSION: ${{ steps.version.outputs.version }}
-        run: gh release edit "v$APP_VERSION" --repo PostHog/code --draft=false
+        run: gh release edit "v$APP_VERSION" --repo PostHog/code --draft=false --generate-notes

apps/code/src/renderer/components/action-selector/InlineEditableText.tsx

@@ -87,6 +87,7 @@ export function InlineEditableText({
         overflow: "auto",
         maxHeight: "120px",
         wordBreak: "break-word",
+        cursor: "text",
         userSelect: active ? "auto" : "none",
         pointerEvents: active ? "auto" : "none",
       }}

apps/code/src/renderer/features/message-editor/components/AttachmentsBar.tsx

@@ -153,7 +153,7 @@ export function AttachmentsBar({ attachments, onRemove }: AttachmentsBarProps) {
   if (attachments.length === 0) return null;
 
   return (
-    <Flex gap="1" align="center" className="mb-2 flex-wrap">
+    <Flex gap="1" align="center" className="flex-wrap pb-1.5">
       {attachments.map((att) =>
         isImageFile(att.label) ? (
           <ImageThumbnail

apps/code/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -64,12 +64,7 @@ function ModeAndBranchRow({
   }
 
   return (
-    <Flex
-      align="center"
-      justify="between"
-      pl="1"
-      style={{ overflow: "hidden" }}
-    >
+    <Flex align="center" justify="between" style={{ overflow: "hidden" }}>
       <Flex align="center" gap="2" flexShrink="0">
         {isBashMode ? (
           <Text
@@ -273,19 +268,19 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
         direction="column"
         gap="2"
         onClick={handleContainerClick}
-        className={`rounded-md p-2 ${isBashMode ? "ring-1 ring-blue-9" : ""}`}
+        className={`rounded-md py-2 pr-2 pl-1.5 ${isBashMode ? "ring-1 ring-blue-9" : ""}`}
         style={{ cursor: "text" }}
       >
         <AttachmentsBar attachments={attachments} onRemove={removeAttachment} />
 
         <div
-          className="max-h-[200px] min-h-[50px] flex-1 overflow-y-auto text-[15px]"
+          className="-mr-2 cli-editor-scroll max-h-[200px] min-h-[50px] flex-1 overflow-y-auto text-[15px]"
           style={{ position: "relative" }}
         >
           <EditorContent editor={editor} />
         </div>
 
-        <Flex justify="between" align="center" pl="1">
+        <Flex justify="between" align="center" className="pt-1.5">
           <Flex gap="2" align="center">
             <EditorToolbar
               disabled={disabled}

apps/code/src/renderer/features/message-editor/components/message-editor.css

@@ -11,3 +11,21 @@
 .cli-editor [data-node-view-wrapper] {
   display: inline;
 }
+
+/* Editor scrollbar - slim, transparent track, hugs right edge */
+.cli-editor-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.cli-editor-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cli-editor-scroll::-webkit-scrollbar-thumb {
+  background: var(--gray-a5);
+  border-radius: 3px;
+}
+
+.cli-editor-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-a7);
+}

apps/code/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -38,7 +38,7 @@ export interface UseTiptapEditorOptions {
 }
 
 const EDITOR_CLASS =
-  "cli-editor min-h-[1.5em] w-full break-words border-none bg-transparent text-[13px] text-[var(--gray-12)] outline-none [overflow-wrap:break-word] [white-space:pre-wrap] [word-break:break-word]";
+  "cli-editor min-h-[1.5em] w-full break-words border-none bg-transparent pr-2 text-[13px] text-[var(--gray-12)] outline-none [overflow-wrap:break-word] [white-space:pre-wrap] [word-break:break-word]";
 
 async function pasteTextAsFile(
   view: EditorView,

apps/code/src/renderer/features/sessions/components/GeneratingIndicator.tsx

@@ -158,7 +158,7 @@ export function GeneratingIndicator({
       <Brain size={12} className="ph-pulse" />
       <Text size="1">{activity}...</Text>
       <Text size="1" color="gray">
-        (Esc to interrupt
+        (Esc to stop
       </Text>
       <Circle
         size={4}

apps/code/src/renderer/features/settings/components/SettingsDialog.tsx

@@ -204,10 +204,13 @@ export function SettingsDialog() {
           style={{
             height: "100%",
             width: "100%",
-            maxWidth: "800px",
           }}
         >
-          <Box p="6" style={{ position: "relative", zIndex: 1 }}>
+          <Box
+            p="6"
+            mx="auto"
+            style={{ position: "relative", zIndex: 1, maxWidth: "800px" }}
+          >
             <Flex direction="column" gap="4">
               <Text size="4" weight="medium">
                 {CATEGORY_TITLES[activeCategory]}

apps/code/src/renderer/styles/globals.css

@@ -531,6 +531,16 @@ body {
   outline: none;
 }
 
+.ProseMirror a {
+  color: var(--accent-11);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.ProseMirror a:hover {
+  color: var(--accent-12);
+}
+
 .CollapsibleContent {
   overflow: hidden;
 }