chore: better list visuals (#29343)

frontend/src/lib/components/Sparkline.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { Sparkline } from './Sparkline'
+
+type Story = StoryObj<typeof Sparkline>
+const meta: Meta<typeof Sparkline> = {
+    title: 'Components/Sparkline',
+    component: Sparkline,
+}
+export default meta
+
+const Template: StoryFn<typeof Sparkline> = (args) => {
+    return <Sparkline {...args} className="w-full" />
+}
+
+export const BarChart: Story = Template.bind({})
+BarChart.args = {
+    data: [10, 5, 3, 30, 22, 10, 2],
+    labels: ['Mon', 'Tue', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
+}

frontend/src/lib/components/Sparkline.tsx

@@ -71,6 +71,7 @@ export function Sparkline({
                             borderColor: color,
                             borderWidth: type === 'line' ? 2 : 0,
                             pointRadius: 0,
+                            borderRadius: 2,
                         }
                     }),
                 },
@@ -116,6 +117,7 @@ export function Sparkline({
                                 display: true,
                                 tickLength: 0,
                             },
+                            border: { display: false },
                             alignToPixels: true,
                             afterFit: (axis) => {
                                 // Remove unneccessary padding

frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx

@@ -59,8 +59,8 @@ export function ErrorTrackingScene(): JSX.Element {
             occurrences: { align: 'center', render: CountColumn },
             sessions: { align: 'center', render: CountColumn },
             users: { align: 'center', render: CountColumn },
-            volume: { renderTitle: VolumeColumnHeader, render: VolumeColumn },
-            assignee: { render: AssigneeColumn },
+            volume: { align: 'right', renderTitle: VolumeColumnHeader, render: VolumeColumn },
+            assignee: { align: 'center', render: AssigneeColumn },
         },
         showOpenEditorButton: false,
         insightProps: insightProps,
@@ -103,7 +103,11 @@ const VolumeColumn: QueryContextColumnComponent = (props) => {
             ? [record.aggregations.customVolume, sparklineLabels(customSparklineConfig)]
             : [null, null]
 
-    return data ? <Sparkline className="h-8" data={data} labels={labels} /> : null
+    return data ? (
+        <div className="flex justify-end">
+            <Sparkline className="h-8" data={data} labels={labels} />
+        </div>
+    ) : null
 }
 
 const VolumeColumnHeader: QueryContextColumnTitleComponent = ({ columnName }) => {
@@ -160,7 +164,7 @@ const CustomGroupTitleColumn: QueryContextColumnComponent = (props) => {
                         </div>
                     </div>
                 }
-                className="flex-1"
+                className="flex-1 pr-12"
                 to={urls.errorTrackingIssue(record.id)}
                 onClick={() => {
                     const issueLogic = errorTrackingIssueSceneLogic({ id: record.id })
@@ -176,12 +180,16 @@ const CountColumn = ({ record, columnName }: { record: unknown; columnName: stri
     const aggregations = (record as ErrorTrackingIssue).aggregations as ErrorTrackingIssueAggregations
     const count = aggregations[columnName as 'occurrences' | 'sessions' | 'users']
 
-    return columnName === 'sessions' && count === 0 ? (
-        <Tooltip title="No $session_id was set for any event in this issue" delayMs={0}>
-            -
-        </Tooltip>
-    ) : (
-        <>{humanFriendlyLargeNumber(count)}</>
+    return (
+        <span className="text-lg font-medium">
+            {columnName === 'sessions' && count === 0 ? (
+                <Tooltip title="No $session_id was set for any event in this issue" delayMs={0}>
+                    -
+                </Tooltip>
+            ) : (
+                humanFriendlyLargeNumber(count)
+            )}
+        </span>
     )
 }