@@ -50,34 +50,13 @@ if (background) {
5050 </div >
5151 <div class =" line output dimmed small" >Issues from 3 projects:</div >
5252 <div class =" line spacer-sm" ></div >
53- <div class =" line output table-header" >
54- <span class =" col-shortid" >SHORT ID</span >
55- <span class =" col-alias" >ALIAS</span >
56- <span class =" col-title" >TITLE</span >
57- <span class =" col-count" >COUNT</span >
58- <span class =" col-fix" >FIX</span >
59- </div >
60- <div class =" line output table-row" >
61- <span class =" col-shortid dimmed" >FRONTEND-79</span >
62- <span class =" col-alias accent" >f-79</span >
63- <span class =" col-title" >TypeError: Cannot read property 'map'...</span >
64- <span class =" col-count" >2.4k</span >
65- <span class =" col-fix green-text" >92%</span >
66- </div >
67- <div class =" line output table-row" >
68- <span class =" col-shortid dimmed" >API-2F</span >
69- <span class =" col-alias accent" >a-2f</span >
70- <span class =" col-title" >ReferenceError: user is not defined</span >
71- <span class =" col-count" >891</span >
72- <span class =" col-fix yellow-text" >67%</span >
73- </div >
74- <div class =" line output table-row" >
75- <span class =" col-shortid dimmed" >MOBILE-4D</span >
76- <span class =" col-alias accent" >m-4d</span >
77- <span class =" col-title" >NetworkError: Failed to fetch</span >
78- <span class =" col-count" >456</span >
79- <span class =" col-fix red-text" >23%</span >
80- </div >
53+ <pre class =" table-box" ><span class =" border" >╭─────────┬───────┬───────────────┬────────┬──────┬────────────┬──────────────────────────────────────────╮</span >
54+ <span class =" border" >│</span > <span class =" header-text" >LEVEL</span > <span class =" border" >│</span > <span class =" header-text" >ALIAS</span > <span class =" border" >│</span > <span class =" header-text" >SHORT ID</span > <span class =" border" >│</span > <span class =" header-text" >COUNT</span > <span class =" border" >│</span > <span class =" header-text" >SEEN</span > <span class =" border" >│</span > <span class =" header-text" >FIXABILITY</span > <span class =" border" >│</span > <span class =" header-text" >TITLE</span > <span class =" border" >│</span >
55+ <span class =" border" >├─────────┼───────┼───────────────┼────────┼──────┼────────────┼──────────────────────────────────────────┤</span >
56+ <span class =" border" >│</span > <span class =" red-text" >ERROR</span > <span class =" border" >│</span > <span class =" accent" >f-79</span > <span class =" border" >│</span > <span class =" alias-hl" >F</span >RONTEND-<span class =" alias-hl" >79</span > <span class =" border" >│</span > 2.4k <span class =" border" >│</span > 2h <span class =" border" >│</span > <span class =" green-text" >92%</span > <span class =" border" >│</span > <span class =" dimmed" >TypeError: Cannot read property 'map'...</span > <span class =" border" >│</span >
57+ <span class =" border" >│</span > <span class =" yellow-text" >WARN</span > <span class =" border" >│</span > <span class =" accent" >a-2f</span > <span class =" border" >│</span > <span class =" alias-hl" >A</span >PI-<span class =" alias-hl" >2F</span > <span class =" border" >│</span > 891 <span class =" border" >│</span > 1d <span class =" border" >│</span > <span class =" yellow-text" >67%</span > <span class =" border" >│</span > <span class =" dimmed" >ReferenceError: user is not defined</span > <span class =" border" >│</span >
58+ <span class =" border" >│</span > <span class =" red-text" >ERROR</span > <span class =" border" >│</span > <span class =" accent" >m-4d</span > <span class =" border" >│</span > <span class =" alias-hl" >M</span >OBILE-<span class =" alias-hl" >4D</span > <span class =" border" >│</span > 456 <span class =" border" >│</span > 5d <span class =" border" >│</span > <span class =" red-text" >23%</span > <span class =" border" >│</span > <span class =" dimmed" >NetworkError: Failed to fetch</span > <span class =" border" >│</span >
59+ <span class =" border" >╰─────────┴───────┴───────────────┴────────┴──────┴────────────┴──────────────────────────────────────────╯</span ></pre >
8160
8261 <div class =" line spacer" ></div >
8362
@@ -231,10 +210,6 @@ if (background) {
231210 color: #22d3ee;
232211 }
233212
234- .accent {
235- color: #a78bfa;
236- }
237-
238213 .dimmed {
239214 color: rgba(255, 255, 255, 0.4);
240215 }
@@ -269,45 +244,34 @@ if (background) {
269244 border-radius: 3px;
270245 }
271246
272- .table-header {
273- color: rgba(255, 255, 255, 0.4);
274- font-size: 0.65rem;
275- text-transform: uppercase;
276- letter-spacing: 0.05em;
277- padding-bottom: 0.25rem;
278- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
279- }
280-
281- .table-row {
282- font-size: 0.72rem;
283- }
284-
285- .col-shortid {
286- min-width: 95px;
247+ .table-box {
248+ font-family: 'JetBrains Mono', monospace;
249+ font-size: 0.7rem;
250+ line-height: 1.5;
251+ margin: 0;
252+ padding: 0;
253+ background: transparent;
254+ border: none;
255+ color: rgba(255, 255, 255, 0.85);
256+ overflow-x: auto;
287257 }
288258
289- .col-alias {
290- min-width: 45px ;
259+ .table-box .border {
260+ color: rgba(255, 255, 255, 0.15) ;
291261 }
292262
293- .col-title {
294- flex: 1;
295- overflow: hidden;
296- text-overflow: ellipsis;
297- white-space: nowrap;
298- color: rgba(255, 255, 255, 0.7);
263+ .table-box .header-text {
264+ color: rgba(255, 255, 255, 0.4);
265+ font-size: 0.7rem;
299266 }
300267
301- .col-count {
302- min-width: 40px;
303- text-align: right;
304- color: rgba(255, 255, 255, 0.5);
268+ .accent {
269+ color: #a78bfa;
305270 }
306271
307- .col-fix {
308- min-width: 35px;
309- text-align: right;
310- font-weight: 500;
272+ .alias-hl {
273+ font-weight: 700;
274+ text-decoration: underline;
311275 }
312276
313277 @media (max-width: 640px) {
@@ -321,13 +285,5 @@ if (background) {
321285 padding: 0 1rem 1rem;
322286 font-size: 0.7rem;
323287 }
324-
325- .col-shortid {
326- display: none;
327- }
328-
329- .col-alias {
330- min-width: 40px;
331- }
332288 }
333289</style >
0 commit comments