Skip to content

Commit 6d3bb64

Browse files
author
aipcc-bot
committed
UPSTREAM: <carry>: fix(frontend): prevent input parameter name wrapping in DetailsTable
Assisted-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 3a1866e commit 6d3bb64

2 files changed

Lines changed: 73 additions & 57 deletions

File tree

‎frontend/src/components/DetailsTable.test.tsx‎

Lines changed: 70 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,20 @@ import * as React from 'react';
1919
import DetailsTable from './DetailsTable';
2020
import { render } from '@testing-library/react';
2121

22+
vi.mock('typestyle', () => ({
23+
classes: (...args: string[]) => args.filter(Boolean).join(' '),
24+
cssRaw: () => null,
25+
cssRule: () => null,
26+
style: () => '',
27+
stylesheet: (obj: Record<string, unknown>) => {
28+
const mock: Record<string, string> = {};
29+
Object.keys(obj).forEach((key) => {
30+
mock[key] = key;
31+
});
32+
return mock;
33+
},
34+
}));
35+
2236
vi.mock('./Editor', () => ({
2337
default: ({ value }: { value: string }) => <pre data-testid='Editor'>{value}</pre>,
2438
}));
@@ -39,15 +53,15 @@ describe('DetailsTable', () => {
3953
<div>
4054
<div>
4155
<div
42-
class="row_f16w1c9n"
56+
class="row"
4357
>
4458
<span
45-
class="key_f1e93q8f"
59+
class="key"
4660
>
4761
key
4862
</span>
4963
<span
50-
class="valueText_f1nujmdy"
64+
class="valueText"
5165
>
5266
value
5367
</span>
@@ -62,21 +76,21 @@ describe('DetailsTable', () => {
6276
expect(container).toMatchInlineSnapshot(`
6377
<div>
6478
<div
65-
class="header2_f1tq2tps"
79+
class="header2"
6680
>
6781
some title
6882
</div>
6983
<div>
7084
<div
71-
class="row_f16w1c9n"
85+
class="row"
7286
>
7387
<span
74-
class="key_f1e93q8f"
88+
class="key"
7589
>
7690
key
7791
</span>
7892
<span
79-
class="valueText_f1nujmdy"
93+
class="valueText"
8094
>
8195
value
8296
</span>
@@ -109,15 +123,15 @@ describe('DetailsTable', () => {
109123
<div>
110124
<div>
111125
<div
112-
class="row_f16w1c9n"
126+
class="row"
113127
>
114128
<span
115-
class="key_f1e93q8f"
129+
class="key"
116130
>
117131
key
118132
</span>
119133
<span
120-
class="valueText_f1nujmdy"
134+
class="valueText"
121135
>
122136
Lorem Ipsum is simply dummy text of the printing and typesetting
123137
industry. Lorem Ipsum has been the industry's standard dummy text ever
@@ -141,15 +155,15 @@ describe('DetailsTable', () => {
141155
<div>
142156
<div>
143157
<div
144-
class="row_f16w1c9n"
158+
class="row"
145159
>
146160
<span
147-
class="key_f1e93q8f"
161+
class="key"
148162
>
149163
key
150164
</span>
151165
<span
152-
class="valueText_f1nujmdy"
166+
class="valueText"
153167
>
154168
value
155169
</span>
@@ -167,10 +181,10 @@ describe('DetailsTable', () => {
167181
<div>
168182
<div>
169183
<div
170-
class="row_f16w1c9n"
184+
class="row"
171185
>
172186
<span
173-
class="key_f1e93q8f"
187+
class="key"
174188
>
175189
key
176190
</span>
@@ -195,10 +209,10 @@ describe('DetailsTable', () => {
195209
<div>
196210
<div>
197211
<div
198-
class="row_f16w1c9n"
212+
class="row"
199213
>
200214
<span
201-
class="key_f1e93q8f"
215+
class="key"
202216
>
203217
key
204218
</span>
@@ -219,10 +233,10 @@ describe('DetailsTable', () => {
219233
<div>
220234
<div>
221235
<div
222-
class="row_f16w1c9n"
236+
class="row"
223237
>
224238
<span
225-
class="key_f1e93q8f"
239+
class="key"
226240
>
227241
key
228242
</span>
@@ -243,15 +257,15 @@ describe('DetailsTable', () => {
243257
<div>
244258
<div>
245259
<div
246-
class="row_f16w1c9n"
260+
class="row"
247261
>
248262
<span
249-
class="key_f1e93q8f"
263+
class="key"
250264
>
251265
key
252266
</span>
253267
<span
254-
class="valueText_f1nujmdy"
268+
class="valueText"
255269
>
256270
null
257271
</span>
@@ -267,15 +281,15 @@ describe('DetailsTable', () => {
267281
<div>
268282
<div>
269283
<div
270-
class="row_f16w1c9n"
284+
class="row"
271285
>
272286
<span
273-
class="key_f1e93q8f"
287+
class="key"
274288
>
275289
key
276290
</span>
277291
<span
278-
class="valueText_f1nujmdy"
292+
class="valueText"
279293
>
280294
10
281295
</span>
@@ -291,15 +305,15 @@ describe('DetailsTable', () => {
291305
<div>
292306
<div>
293307
<div
294-
class="row_f16w1c9n"
308+
class="row"
295309
>
296310
<span
297-
class="key_f1e93q8f"
311+
class="key"
298312
>
299313
key
300314
</span>
301315
<span
302-
class="valueText_f1nujmdy"
316+
class="valueText"
303317
>
304318
"some string"
305319
</span>
@@ -322,29 +336,29 @@ describe('DetailsTable', () => {
322336
<div>
323337
<div>
324338
<div
325-
class="row_f16w1c9n"
339+
class="row"
326340
>
327341
<span
328-
class="key_f1e93q8f"
342+
class="key"
329343
>
330344
key1
331345
</span>
332346
<span
333-
class="valueText_f1nujmdy"
347+
class="valueText"
334348
>
335349
true
336350
</span>
337351
</div>
338352
<div
339-
class="row_f16w1c9n"
353+
class="row"
340354
>
341355
<span
342-
class="key_f1e93q8f"
356+
class="key"
343357
>
344358
key2
345359
</span>
346360
<span
347-
class="valueText_f1nujmdy"
361+
class="valueText"
348362
>
349363
false
350364
</span>
@@ -373,24 +387,24 @@ describe('DetailsTable', () => {
373387
<div>
374388
<div>
375389
<div
376-
class="row_f16w1c9n"
390+
class="row"
377391
>
378392
<span
379-
class="key_f1e93q8f"
393+
class="key"
380394
>
381395
key1
382396
</span>
383397
<span
384-
class="valueText_f1nujmdy"
398+
class="valueText"
385399
>
386400
value1
387401
</span>
388402
</div>
389403
<div
390-
class="row_f16w1c9n"
404+
class="row"
391405
>
392406
<span
393-
class="key_f1e93q8f"
407+
class="key"
394408
>
395409
key2
396410
</span>
@@ -405,38 +419,38 @@ describe('DetailsTable', () => {
405419
</pre>
406420
</div>
407421
<div
408-
class="row_f16w1c9n"
422+
class="row"
409423
>
410424
<span
411-
class="key_f1e93q8f"
425+
class="key"
412426
>
413427
key3
414428
</span>
415429
<span
416-
class="valueText_f1nujmdy"
430+
class="valueText"
417431
>
418432
value3
419433
</span>
420434
</div>
421435
<div
422-
class="row_f16w1c9n"
436+
class="row"
423437
>
424438
<span
425-
class="key_f1e93q8f"
439+
class="key"
426440
>
427441
key4
428442
</span>
429443
<span
430-
class="valueText_f1nujmdy"
444+
class="valueText"
431445
>
432446
value4
433447
</span>
434448
</div>
435449
<div
436-
class="row_f16w1c9n"
450+
class="row"
437451
>
438452
<span
439-
class="key_f1e93q8f"
453+
class="key"
440454
>
441455
key5
442456
</span>
@@ -451,43 +465,43 @@ describe('DetailsTable', () => {
451465
</pre>
452466
</div>
453467
<div
454-
class="row_f16w1c9n"
468+
class="row"
455469
>
456470
<span
457-
class="key_f1e93q8f"
471+
class="key"
458472
>
459473
key6
460474
</span>
461475
<span
462-
class="valueText_f1nujmdy"
476+
class="valueText"
463477
>
464478
value6
465479
</span>
466480
</div>
467481
<div
468-
class="row_f16w1c9n"
482+
class="row"
469483
>
470484
<span
471-
class="key_f1e93q8f"
485+
class="key"
472486
>
473487
key6
474488
</span>
475489
<span
476-
class="valueText_f1nujmdy"
490+
class="valueText"
477491
>
478492
value7
479493
</span>
480494
</div>
481495
<div
482-
class="row_f16w1c9n"
496+
class="row"
483497
>
484498
<span
485-
class="key_f1e93q8f"
499+
class="key"
486500
>
487501
key
488502
</span>
489503
<span
490-
class="valueText_f1nujmdy"
504+
class="valueText"
491505
>
492506
[object Object]
493507
</span>

‎frontend/src/components/DetailsTable.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ export const css = stylesheet({
2929
color: color.strong,
3030
flex: '0 0 50%',
3131
fontWeight: 'bold',
32-
maxWidth: 300,
32+
overflow: 'hidden',
33+
textOverflow: 'ellipsis',
34+
whiteSpace: 'nowrap',
3335
},
3436
row: {
3537
borderBottom: `1px solid ${color.divider}`,

0 commit comments

Comments
 (0)