Skip to content

Commit 3feedd1

Browse files
aboseabose
committed
feat(ai-chat): bump prose rhythm across panel and plan card
Lifts body text to 14px/1.6, widens message and card padding, raises list-item gaps with explicit line-height, and applies the same prose rhythm to the proposed-plan body so plan cards no longer feel denser than the assistant prose around them. In-card buttons stay at the 12px/4x12 standard.
1 parent 99d4ea7 commit 3feedd1

1 file changed

Lines changed: 80 additions & 44 deletions

File tree

‎src/styles/Extn-AIChatPanel.less‎

Lines changed: 80 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,13 @@
2424
// (or a relative unit for headings). Centralising the scale here keeps the
2525
// panel coherent across cards: tool indicators, diff cards, confirm dialogs,
2626
// the proposed plan, etc. all read as one product instead of independently
27-
// styled fragments.
28-
@ai-text-body: @sidebar-content-font-size; // 13px — message content, tool labels, prose
27+
// styled fragments. Body is 14px (one tick larger than Phoenix's 13px sidebar
28+
// default) so prose breathes more — closer to what users get from Lovable
29+
// /ChatGPT/Claude desktop. Secondary and meta stay at the smaller tiers.
30+
@ai-text-body: @menu-item-font-size; // 14px — message content, tool labels, prose
2931
@ai-text-secondary: @sidebar-small-font-size; // 12px — in-card buttons, mono code, file paths
3032
@ai-text-meta: @sidebar-xs-font-size; // 11px — stats, status, permission/context info
31-
@ai-line-prose: 1.55; // multi-line body text
33+
@ai-line-prose: 1.6; // multi-line body text — generous reading rhythm
3234
@ai-line-compact: 1.4; // single-line UI elements
3335

3436
.ai-tab-container {
@@ -268,7 +270,7 @@
268270
flex: 1;
269271
overflow-y: auto;
270272
overflow-x: hidden;
271-
padding: 8px 10px;
273+
padding: 12px 14px;
272274
min-height: 0;
273275
min-width: 0;
274276
-webkit-user-select: text;
@@ -279,7 +281,7 @@
279281

280282
/* ── Individual messages ────────────────────────────────────────────── */
281283
.ai-msg {
282-
margin-bottom: 12px;
284+
margin-bottom: 16px;
283285
max-width: 100%;
284286
// Skip layout / paint for messages that are far off-screen. For a large
285287
// chat history (>1k messages, >10k DOM nodes), showing the sidebar after
@@ -297,7 +299,7 @@
297299

298300
.ai-msg-content {
299301
font-size: @ai-text-body;
300-
line-height: 1.55;
302+
line-height: @ai-line-prose;
301303
white-space: normal;
302304
word-wrap: break-word;
303305
overflow-wrap: anywhere;
@@ -320,8 +322,8 @@
320322

321323
.ai-msg-content {
322324
background-color: rgba(255, 255, 255, 0.07);
323-
padding: 6px 10px;
324-
border-radius: 10px 10px 2px 10px;
325+
padding: 8px 12px;
326+
border-radius: 12px 12px 2px 12px;
325327
max-width: 88%;
326328
text-align: left;
327329
}
@@ -400,6 +402,7 @@
400402
.ai-msg-assistant {
401403
.ai-msg-content {
402404
padding: 2px 0;
405+
line-height: @ai-line-prose;
403406

404407
> *:first-child {
405408
margin-top: 0;
@@ -409,8 +412,10 @@
409412
margin-bottom: 0;
410413
}
411414

415+
// Paragraph margin tuned to roughly match a single line of prose
416+
// so paragraphs read as separated but still related.
412417
p {
413-
margin: 0 0 8px 0;
418+
margin: 0 0 14px 0;
414419

415420
&:last-child {
416421
margin-bottom: 0;
@@ -425,7 +430,7 @@
425430
code {
426431
background-color: rgba(255, 255, 255, 0.08);
427432
color: @project-panel-text-1;
428-
padding: 1px 4px;
433+
padding: 1px 5px;
429434
border-radius: 3px;
430435
font-size: @sidebar-md-code-font-size;
431436
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
@@ -434,10 +439,10 @@
434439
pre {
435440
background-color: rgba(0, 0, 0, 0.3);
436441
border: 1px solid rgba(255, 255, 255, 0.06);
437-
padding: 8px 10px;
442+
padding: 10px 12px;
438443
border-radius: 4px;
439444
overflow-x: auto;
440-
margin: 6px 0;
445+
margin: 10px 0 12px;
441446
position: relative;
442447

443448
&.collapsed code {
@@ -451,24 +456,39 @@
451456
padding: 0;
452457
border-radius: 0;
453458
font-size: 1em;
454-
line-height: 1.5;
459+
line-height: 1.55;
455460
color: @project-panel-text-1;
456461
}
457462
}
458463

464+
// Lists: visible vertical gap between items so they breathe but
465+
// stay grouped. Block-level margin top/bottom matches a paragraph.
459466
ul, ol {
460-
margin: 4px 0 8px 0;
461-
padding-left: 18px;
467+
margin: 8px 0 14px 0;
468+
padding-left: 20px;
462469
}
463470

464471
li {
465-
margin-bottom: 2px;
472+
margin-bottom: 6px;
473+
// Brackets' default li rule clamps line-height to ~18px which
474+
// makes wrapped bullet text look squished against the prose
475+
// around it. Restore the prose rhythm explicitly.
476+
line-height: @ai-line-prose;
477+
478+
&:last-child {
479+
margin-bottom: 0;
480+
}
481+
482+
// Nested lists shouldn't double-space
483+
> ul, > ol {
484+
margin: 6px 0 0 0;
485+
}
466486
}
467487

468488
blockquote {
469489
border-left: 2px solid rgba(255, 255, 255, 0.12);
470-
margin: 6px 0;
471-
padding: 2px 10px;
490+
margin: 10px 0;
491+
padding: 4px 12px;
472492
color: @project-panel-text-2;
473493
}
474494

@@ -527,11 +547,14 @@
527547
}
528548

529549
/* ── Tool use indicator ─────────────────────────────────────────────── */
550+
// Tool indicators are factual breadcrumbs, not the main signal. Keep them
551+
// visually quieter than prose so the eye lands on the assistant's text
552+
// first. Background and border alphas tuned down from earlier values.
530553
.ai-msg-tool {
531-
margin-bottom: 5px;
554+
margin-bottom: 6px;
532555
border-radius: 4px;
533-
background-color: rgba(255, 255, 255, 0.025);
534-
border: 1px solid rgba(255, 255, 255, 0.04);
556+
background-color: rgba(255, 255, 255, 0.02);
557+
border: 1px solid rgba(255, 255, 255, 0.025);
535558
border-left: 2px solid var(--tool-color, @project-panel-text-2);
536559

537560
// Add a small breather between consecutive tool indicators so a stack
@@ -891,9 +914,9 @@
891914
/* ── Edit summary card ──────────────────────────────────────────────── */
892915
.ai-msg-edit-summary {
893916
border: 1px solid rgba(255, 255, 255, 0.08);
894-
border-radius: 4px;
895-
margin-bottom: 6px;
896-
padding: 6px 10px;
917+
border-radius: 6px;
918+
margin: 8px 0 12px 0;
919+
padding: 10px 12px;
897920
background-color: rgba(255, 255, 255, 0.025);
898921

899922
.ai-edit-summary-header {
@@ -1332,39 +1355,41 @@
13321355
}
13331356

13341357
.ai-plan-body {
1335-
padding: 10px 12px;
1358+
padding: 14px 16px;
13361359
font-size: @ai-text-body;
13371360
color: @project-panel-text-1;
1338-
line-height: 1.5;
1361+
line-height: @ai-line-prose;
13391362
white-space: normal;
13401363
word-wrap: break-word;
1341-
max-height: 400px;
1364+
max-height: 460px;
13421365
overflow-y: auto;
13431366

13441367
p, ul, ol, pre {
1345-
margin-bottom: 8px;
1368+
margin-bottom: 14px;
13461369
&:last-child {
13471370
margin-bottom: 0;
13481371
}
13491372
}
13501373

1374+
// Heading top margin needs to be larger than paragraph margin so a
1375+
// section header reads as a section header rather than another bullet.
13511376
h1, h2, h3, h4 {
13521377
color: @project-panel-text-1;
13531378
line-height: 1.25em;
13541379
}
13551380

13561381
h1 {
13571382
font-size: @sidebar-md-h1-font-size;
1358-
margin: 12px 0 4px 0;
1383+
margin: 18px 0 8px 0;
13591384
padding-bottom: .3em;
13601385
}
13611386
h2 {
13621387
font-size: @sidebar-md-h2-font-size;
1363-
margin: 10px 0 4px 0;
1388+
margin: 16px 0 8px 0;
13641389
padding-bottom: .3em;
13651390
}
1366-
h3 { font-size: @sidebar-md-h3-font-size; margin: 8px 0 4px 0; }
1367-
h4 { font-size: @sidebar-md-h4-font-size; margin: 6px 0 4px 0; opacity: 0.85; }
1391+
h3 { font-size: @sidebar-md-h3-font-size; margin: 14px 0 6px 0; }
1392+
h4 { font-size: @sidebar-md-h4-font-size; margin: 12px 0 6px 0; opacity: 0.85; }
13681393

13691394
strong {
13701395
color: @project-panel-text-1;
@@ -1376,15 +1401,15 @@
13761401

13771402
blockquote {
13781403
border-left: 3px solid rgba(107, 158, 255, 0.3);
1379-
margin: 6px 0;
1380-
padding: 2px 10px;
1404+
margin: 10px 0;
1405+
padding: 4px 12px;
13811406
color: @project-panel-text-2;
13821407
}
13831408

13841409
code {
13851410
background-color: rgba(255, 255, 255, 0.08);
13861411
color: @project-panel-text-1;
1387-
padding: 1px 4px;
1412+
padding: 1px 5px;
13881413
border-radius: 3px;
13891414
font-size: @sidebar-md-code-font-size;
13901415
font-family: 'SourceCodePro-Medium', 'SourceCodePro', monospace;
@@ -1393,7 +1418,7 @@
13931418
pre {
13941419
background-color: rgba(0, 0, 0, 0.3);
13951420
border: 1px solid rgba(255, 255, 255, 0.06);
1396-
padding: 8px 10px;
1421+
padding: 10px 12px;
13971422
border-radius: 4px;
13981423
overflow-x: auto;
13991424
position: relative;
@@ -1407,18 +1432,29 @@
14071432
padding: 0;
14081433
border-radius: 0;
14091434
font-size: 1em;
1410-
line-height: 1.5;
1435+
line-height: 1.55;
14111436
color: @project-panel-text-1;
14121437
}
14131438
}
14141439

14151440
ul, ol {
1416-
margin: 4px 0 8px 0;
1417-
padding-left: 18px;
1441+
margin: 8px 0 14px 0;
1442+
padding-left: 22px;
14181443
}
14191444

14201445
li {
1421-
margin-bottom: 2px;
1446+
margin-bottom: 6px;
1447+
// Same line-height fix as the assistant message — Brackets'
1448+
// default li rule clamps line-height too tight otherwise.
1449+
line-height: @ai-line-prose;
1450+
1451+
&:last-child {
1452+
margin-bottom: 0;
1453+
}
1454+
1455+
> ul, > ol {
1456+
margin: 6px 0 0 0;
1457+
}
14221458
}
14231459
}
14241460

@@ -2206,12 +2242,12 @@
22062242
color: @project-panel-text-1;
22072243
font-size: @ai-text-body;
22082244
font-family: inherit;
2209-
padding: 7px 0 7px 10px;
2245+
padding: 10px 0 10px 12px;
22102246
margin: 0;
22112247
resize: none;
2212-
min-height: 20px;
2213-
max-height: 96px;
2214-
line-height: 1.4;
2248+
min-height: 24px;
2249+
max-height: 120px;
2250+
line-height: @ai-line-compact;
22152251
outline: none !important;
22162252
box-shadow: none !important;
22172253

0 commit comments

Comments
 (0)
⚡