refactor: Remove unused scss (#7194)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kyle-ssg

frontend/.claude/commands/visual-regression.md

@@ -0,0 +1,35 @@
+# Visual Regression Test Runner
+
+Run local visual regression tests by capturing baselines from main on this machine, then comparing against the current branch. Both runs use the same OS and browser, so diffs reflect actual style changes rather than platform rendering differences.
+
+## Prerequisites
+
+- Docker running with Flagsmith services on localhost:8000
+
+## Workflow
+
+1. Capture local baselines from main (stashes changes, checks out main, runs E2E, switches back):
+
+```bash
+npm run test:visual:baselines
+```
+
+2. Run E2E tests on the current branch with visual regression screenshot capture:
+
+```bash
+VISUAL_REGRESSION=1 npm run test
+```
+
+3. Compare captured screenshots against local baselines:
+
+```bash
+npm run test:visual:compare
+```
+
+4. If there are failures, open the HTML report for visual diff inspection:
+
+```bash
+npm run test:visual:report
+```
+
+5. Report results: how many comparisons passed/failed, and whether failures are style/layout regressions or data differences.

frontend/README.md

@@ -149,20 +149,26 @@ E2E_RETRIES=0 SKIP_BUNDLE=1 E2E_CONCURRENCY=1 npm run test -- tests/flag-tests.p
 
 Visual regression screenshots are captured during E2E tests via `visualSnapshot()` calls. They are a no-op unless `VISUAL_REGRESSION=1` is set. Comparison runs as a separate step after all E2E retries complete, so flaky tests don't affect the report.
 
+##### Local development
+
+To check for visual regressions locally, capture baselines from main on your machine then compare against your branch. Both runs use the same OS and browser, so diffs reflect actual style changes.
+
 ```bash
-# 1. Run E2E tests with screenshot capture (with retries)
-VISUAL_REGRESSION=1 npm run test
+# 1. Capture baselines from main (stashes changes, checks out main, runs E2E, switches back)
+npm run test:visual:baselines
 
-# 2a. Generate/update baselines from captured screenshots
-npm run test:visual:compare -- --update-snapshots
+# 2. Run E2E tests on your branch with screenshot capture
+VISUAL_REGRESSION=1 npm run test
 
-# 2b. Compare screenshots against baselines (generates Playwright report with diffs)
+# 3. Compare screenshots against baselines (generates Playwright report with diffs)
 npm run test:visual:compare
 
-# 3. Open the report
+# 4. Open the report
 npm run test:visual:report
 ```
 
+##### CI
+
 Visual diffs never fail CI — they are reported via PR comment and the Playwright HTML report.
 
 Screenshots are saved to `e2e/visual-regression-screenshots/`, baselines to `e2e/visual-regression-snapshots/` (both git-ignored). In CI, the main branch uploads screenshots as baseline artifacts, and PRs download them for comparison.
@@ -181,3 +187,5 @@ When using Claude Code, these commands are available for e2e testing:
 - `/e2e-create [description]` - Create a new test following existing patterns
 
 The optional `[N]` argument sets `E2E_REPEAT` to run tests N additional times after passing (defaults to 0). E.g., `/e2e 5` runs tests, then repeats 5 more times to detect flakiness.
+
+- `/visual-regression` - Download CI baselines, run E2E with screenshot capture, compare and report

frontend/e2e/capture-baselines.ts

@@ -0,0 +1,46 @@
+import { execSync } from 'child_process'
+import * as fs from 'fs'
+import * as path from 'path'
+
+const SNAPSHOTS_DIR = path.resolve(__dirname, 'visual-regression-snapshots')
+const SCREENSHOTS_DIR = path.resolve(__dirname, 'visual-regression-screenshots')
+
+function run(cmd: string) {
+  execSync(cmd, { stdio: 'inherit' })
+}
+
+function runQuiet(cmd: string) {
+  execSync(cmd, { stdio: 'pipe' })
+}
+
+const branch = execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf-8' }).trim()
+
+console.log(`Current branch: ${branch}`)
+console.log('Checking out main source code (keeping branch e2e tests)...')
+
+// Only checkout main's source code, not e2e/ test files.
+// This ensures both baseline and branch runs use the same test code.
+runQuiet('git checkout main -- web/ common/')
+
+try {
+  console.log('Running E2E on main source with VISUAL_REGRESSION=1...')
+  if (fs.existsSync(SCREENSHOTS_DIR)) {
+    fs.rmSync(SCREENSHOTS_DIR, { recursive: true })
+  }
+  run('cross-env VISUAL_REGRESSION=1 npm run test')
+
+  console.log('Copying screenshots to baselines...')
+  if (fs.existsSync(SNAPSHOTS_DIR)) {
+    fs.rmSync(SNAPSHOTS_DIR, { recursive: true })
+  }
+  fs.cpSync(SCREENSHOTS_DIR, SNAPSHOTS_DIR, { recursive: true })
+
+  const count = fs.readdirSync(SNAPSHOTS_DIR).filter((f) => f.endsWith('.png')).length
+  console.log(`Captured ${count} baseline snapshots`)
+} finally {
+  // Restore branch's source code
+  console.log('Restoring branch source code...')
+  runQuiet('git checkout -- web/ common/')
+}
+
+console.log('Baselines ready. Now run: VISUAL_REGRESSION=1 npm run test && npm run test:visual:compare')

frontend/e2e/tests/roles-test.pw.ts

@@ -19,13 +19,15 @@ test.describe('Roles Tests', () => {
       login,
       logout,
       waitForElementVisible,
+      waitForToastsToClear,
     } = createHelpers(page);
 
     const rolesProject = 'project-my-test-project-7-role'
     log('Login')
     await login(E2E_USER, PASSWORD)
     await click(byId(rolesProject))
     await createFeature({ name: 'test_feature', value: false })
+    await waitForToastsToClear()
     log('Go to Roles')
     await click(byId('organisation-link'))
     await click(byId('users-and-permissions'))

frontend/package.json

@@ -18,6 +18,7 @@
     "test:unit:watch": "jest --watch",
     "test:unit:coverage": "jest --coverage",
     "test:visual": "cross-env VISUAL_REGRESSION=1 npx playwright test",
+    "test:visual:baselines": "npx tsx e2e/capture-baselines.ts",
     "test:visual:compare": "npx tsx e2e/compare-visual-regression.ts && npx playwright test -c playwright.visual.config.ts",
     "test:visual:report": "npx playwright show-report e2e/visual-regression-report",
     "test:report": "npx playwright show-report e2e/playwright-report",

frontend/web/components/ActionButton.tsx

@@ -24,7 +24,7 @@ const ActionButton: FC<ActionButtonType> = ({
         onClick()
       }}
     >
-      <div className='pointer-events-none'>
+      <div className='pe-none'>
         <Icon name='more-vertical' width={16} fill='#656D7B' />
       </div>
     </Button>

frontend/web/components/DateSelect.tsx

@@ -27,7 +27,7 @@ const DateSelect: FC<DateSelectProps> = ({
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <Flex style={{ position: 'relative' }}>
+    <Flex className='position-relative'>
       <DatePicker
         className={`${className} ${!isValid && touched ? 'invalid' : ''}`}
         dateFormat={dateFormat}

frontend/web/components/ExternalResourcesTable.tsx

@@ -41,7 +41,7 @@ const ExternalResourceRow: FC<ExternalResourceRowType> = ({
   }, [isDeleted])
   return (
     <Row className='list-item' key={externalResource?.id}>
-      <div className='table-column text-left' style={{ width: '100px' }}>
+      <div className='table-column text-start' style={{ width: '100px' }}>
         <div className='font-weight-medium mb-1'>
           {
             Constants.resourceTypes[

frontend/web/components/IdentitySelect.tsx

@@ -49,7 +49,7 @@ const IdentitySelect: FC<IdentitySelectType> = ({
       .slice(0, 10)
   }, [ignoreIds, data])
   return (
-    <Flex className='text-left'>
+    <Flex className='text-start'>
       <Select
         onInputChange={(e: InputEvent) => {
           searchItems(Utils.safeParseEventValue(e))

frontend/web/components/InlineModal.tsx

@@ -51,7 +51,7 @@ const InlineModal: FC<InlineModalProps> = ({
   })
 
   return (
-    <div className={relativeToParent ? '' : 'relative'}>
+    <div className={relativeToParent ? '' : 'position-relative'}>
       {isOpen && (
         <div ref={modalRef} className={classNames('inline-modal', className)}>
           <div className='d-flex py-2 d-lg-none justify-content-end px-4'>