Files
openobserve/web/src/styles
Sai Nikhil 174e90e1e2 fix: all the list tables should have same style (#7510)
### **User description**
1. all the tables that are there in the application should be having the
same style


___

### **PR Type**
Enhancement


___

### **Description**
- Unify header layout across list pages

- Apply `o2-quasar-table` classes globally

- Standardize column widths and sticky actions

- Introduce dark/light table theme CSS


___

### **Changes diagram**

```mermaid
flowchart LR
  Pages["List Pages"] -- "use" --> Header["Header Bar Component"]
  Header -- "wraps" --> Table["q-table with header slot"]
  Table -- "applies" --> Styles["Global table CSS"]
```


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>18
files</summary><table>
<tr>
<td><strong>PipelinesList.vue</strong><dd><code>Refactor pipeline list
header & table styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-85e3ef322f3eea0fc6d74d89431ba338a1153cb82ee06bef0f7c5f439c04267d">+243/-232</a></td>

</tr>

<tr>
<td><strong>AlertList.vue</strong><dd><code>Update alerts list table
header and styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-be3e41b823e163b226ffc270d95cc4981e59c600851e4e0d10ee5e4ee994ac8e">+147/-154</a></td>

</tr>

<tr>
<td><strong>LogStream.vue</strong><dd><code>Enhance log stream header &
table style</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-56f4223b74568c10bc305741cc9fc3a8830184a251b4eaa6a2649033bc6200e3">+140/-135</a></td>

</tr>

<tr>
<td><strong>EnrichmentTableList.vue</strong><dd><code>Unify enrichment
tables header & styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-6a29e253f59405d3c0f756dba36afd7483f10ad86927cbbc3348ede6372c3077">+54/-34</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AlertsDestinationList.vue</strong><dd><code>Revamp alert
destinations list layout</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-e9d05ba6c071c0e2f5d9ef7acdef757f79910abd6897b29e27b069a10d4ba8de">+66/-39</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ServiceAccountsList.vue</strong><dd><code>Style service
accounts list header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-3afe835bcfbec3fda2e9550850c29581092ee0717e7dd8de8888e774a0048d24">+55/-61</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>User.vue</strong><dd><code>Revise users table header and
styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-e973c2a665f9b27b94673ba64cc5b23650300836a727a2e07673c8e26305aee5">+51/-45</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ReportList.vue</strong><dd><code>Format report list header &
table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-f7d700f7e67fbaba3c58ab5d2c614925db743101828214445ce9dae35dc29067">+64/-39</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>CipherKeys.vue</strong><dd><code>Style cipher keys list
header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-950b715cff2c964d8542512692030c370733b57d698abf40e1dcb3cce2cfaf7a">+56/-34</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>TemplateList.vue</strong><dd><code>Rework alert templates
list styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-7df66364d7d69a26cfa25cbc555d0e090c2f73e51c8386d9b0435bae4412564c">+59/-36</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>PipelinesDestinationList.vue</strong><dd><code>Enhance
pipeline destinations list UI</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-088c66f5a34e73a5350a794a772e5d905262277337c937dd36f4295072203ebf">+52/-28</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>FunctionList.vue</strong><dd><code>Uniform function list
header & styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-6ff9af50a1597504b7f0dca91e61cf30c800b4a17b4be2ed2c3a4f7a7b2d7068">+50/-33</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ListOrganizations.vue</strong><dd><code>Refine organizations
list header & table</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-572ed99323d3e36d126074eccc10b68f6eef983d92f89d06b205fef0925c93a3">+41/-36</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppRoles.vue</strong><dd><code>Style IAM roles table header
& actions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-191634ef09436199f91f442968110a01f54ae46b5ceee67476f52613ad796db4">+42/-42</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppGroups.vue</strong><dd><code>Style IAM groups header &
table actions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-402fb2a5338e60fdc3da489f4d50b5cf52f06b4e884a6fe7b82441c9fa5ea22c">+14/-17</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>AppTable.vue</strong><dd><code>Add header slot & table
styling support</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-efcf66a9e913b5d3a7c2eea800b7f4e54d9e5268307131482fd40f32e2074d8e">+7/-8</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>GroupUsers.vue</strong><dd><code>Enhance group users
selection table styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-114c767db76d4a09278c765d8aba39a1936c861488f39e7f0f6b3883499a3c40">+6/-15</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>GroupServiceAccounts.vue</strong><dd><code>Style group
service-accounts selection table</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-b7afafc6b850c2d6edc2b855e78ff51d95d101937ec001a5790d130f4fb60695">+5/-14</a>&nbsp;
&nbsp; </td>

</tr>

</table></details></td></tr><tr><td><strong>Formatting</strong></td><td><details><summary>1
files</summary><table>
<tr>
<td><strong>index.vue</strong><dd><code>Adjust settings page title
spacing</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-699c63979f851c48ad440a078e93282fd797a18fc065e5331b2e41122ddb8b69">+2/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></details></td></tr><tr><td><strong>Configuration
changes</strong></td><td><details><summary>1 files</summary><table>
<tr>
<td><strong>app.scss</strong><dd><code>Add global table styling
definitions</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-5703d12504b0395cbfbbfad02a592bc391496026e5f03743102ce06c210ea05f">+128/-1</a>&nbsp;
</td>

</tr>
</table></details></td></tr><tr><td><strong>Additional
files</strong></td><td><details><summary>3 files</summary><table>
<tr>
  <td><strong>GroupRoles.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-d7d1d9ec26ff77175b0e961e3e53e7ced45c9211eae8a0c00f7ac1cdac88ae14">+3/-8</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
  <td><strong>EditRole.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-263b6bc7d29fdf8358c8437cd637f1350aa3733cc2706eae8ff00028686cc0f5">+0/-14</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
  <td><strong>PermissionsTable.vue</strong></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7510/files#diff-609d4d7245b7309cf30cc45c22c996c6b068ebc042a9673e75ee3bbd2aa00a2a">+7/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></details></td></tr></tr></tbody></table>

___

> <details> <summary> Need help?</summary><li>Type <code>/help how to
...</code> in the comments thread for any questions about PR-Agent
usage.</li><li>Check out the <a
href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a>
for more information.</li></details>
2025-07-18 15:05:36 +05:30
..