Remove GLQL table zebra striping and update typography to match list view

What does this MR do and why?

This MR updates the GLQL table styling to improve visual consistency with the list view component:

Changes made:

  • Removed alternating row colors (zebra striping) from table view
  • Applied consistent gl-bg-subtle background color to all rows
  • Removed internal table borders for a cleaner look
  • Added subtle separator line below table headers (works in both light and dark modes)
  • Updated title typography to match list view (semibold dark text instead of blue links)
  • Made column resize handles thinner and blue on hover for better UX
  • Added bottom borders to table rows for better visual separation
  • Added blue hover effect on table rows to match list view behavior

Screenshots

Before After

CleanShot 2025-06-26 at 21.15.50@2x.png

CleanShot 2025-06-26 at 21.16.25@2x.png

CleanShot 2025-06-27 at 16.49.18@2x.png

CleanShot 2025-06-27 at 16.50.06@2x.png

How to test

  • Create a GLQL table view
    • Use both Table and List so you can check the differences:
```glql
display: table
fields: title, createdAt, milestone, assignee
title: Issues assigned to current user
query: assignee = currentUser()
```

```glql
display: list
fields: title, createdAt, milestone, assignee
title: Issues assigned to current user
query: assignee = currentUser()
```
  • Verify all styling changes match the list view
  • Test in both light and dark modes
  • Test column resizing functionality

Related to #502701 (closed)

/cc @himkp @mmacfarlane

Edited by Alex Fracazo

Merge request reports

Loading