fix(web): resolve stylelint errors in bulk-messages page (#902)

* fix(web): resolve stylelint errors in bulk-messages page

- Add empty line before rule as required by rule-empty-line-before
- Use modern color-function notation rgb(0 0 0 / 4%) instead of rgba(0, 0, 0, 0.04)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* ci(web): run validation on PRs, deploy only on merge to main

- Split workflow into 'validate' (lint, test, build) and 'deploy' jobs
- Validate runs on both pull_request and push to main
- Deploy only runs after merge to main, gated behind validate passing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: AchoArnold

.github/workflows/web.yml

@@ -4,14 +4,17 @@ on:
   push:
     branches:
       - main
+  pull_request:
+    branches:
+      - main
 
 defaults:
   run:
     working-directory: ./web
 
 jobs:
-  ci:
-    name: Build & Deploy
+  validate:
+    name: Validate
     runs-on: ${{ matrix.os }}
 
     strategy:
@@ -37,8 +40,26 @@ jobs:
       - name: Run tests 🧪
         run: pnpm test
 
-      - name: Debug 🐛
-        run: echo GITHUB_SHA=${GITHUB_SHA}
+      - name: Build 🏗️
+        run: mv .env.production .env && echo GITHUB_SHA=${GITHUB_SHA} >> .env && pnpm run generate
+
+  deploy:
+    name: Deploy
+    needs: validate
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎
+        uses: actions/checkout@master
+
+      - uses: pnpm/action-setup@v6
+        name: Install pnpm
+        with:
+          version: 10
+
+      - name: Install dependencies 📦
+        run: pnpm install
 
       - name: Build 🏗️
         run: mv .env.production .env && echo GITHUB_SHA=${GITHUB_SHA} >> .env && pnpm run generate

web/pages/bulk-messages/index.vue

@@ -273,7 +273,8 @@ export default Vue.extend({
 .clickable-row {
   cursor: pointer;
 }
+
 .clickable-row:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: rgb(0 0 0 / 4%);
 }
 </style>