ci: add frontend guardrail checks

Author: gildesmarais

.github/workflows/ci.yml

@@ -88,6 +88,9 @@ jobs:
       - name: Verify generated OpenAPI client is up to date
         run: npm run openapi:verify
 
+      - name: Typecheck frontend
+        run: npm run typecheck
+
       - name: Check formatting
         run: npm run format:check
 

Makefile

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-.PHONY: help test lint lint-js lint-ruby lintfix lintfix-js lintfix-ruby setup dev clean frontend-setup quick-check ready yard-verify-public-docs openapi openapi-verify openapi-client openapi-client-verify openapi-lint openapi-lint-redocly openapi-lint-spectral openai-lint-spectral
+.PHONY: help test lint lint-js lint-ruby lintfix lintfix-js lintfix-ruby setup dev clean frontend-setup check-frontend quick-check ready yard-verify-public-docs openapi openapi-verify openapi-client openapi-client-verify openapi-lint openapi-lint-redocly openapi-lint-spectral openai-lint-spectral
 
 # Default target
 help: ## Show this help message
@@ -47,6 +47,10 @@ test-frontend-unit: ## Run frontend unit tests only
 test-frontend-contract: ## Run frontend contract tests only
 	@cd frontend && npm run test:contract
 
+check-frontend: ## Run frontend typecheck, format, and test checks
+	$(MAKE) lint-js
+	$(MAKE) test-frontend
+
 
 lint: lint-ruby lint-js ## Run all linters (Ruby + Frontend) - errors when issues found
 	@echo "All linting complete!"

frontend/src/styles/main.css

@@ -52,11 +52,8 @@
 html {
   background:
     radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 24rem),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 18rem),
-    var(--bg-page);
-  background-size:
-    auto,
-    auto;
+    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 18rem), var(--bg-page);
+  background-size: auto, auto;
 }
 
 body {