From 7c6b56c0357c5da46b6953189f29de5c91765362 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Tue, 19 May 2026 22:47:49 -0700
Subject: [PATCH 01/27] Remove two orphan component SCSS files

Neither file was loaded by its component:

- card-app-status.component.scss: parent .ts has no styleUrls,
  so .card-app-status__large { font-size: 16px } never applied.
- custom-expansion-panel.component.scss: stale duplicate of the
  inline styles: [...] block already declared on the @Component.

Found via SCSS classifier styleUrls cross-reference. No callers
in the tree reference either path.
---
 .../card-app-status.component.scss            |  5 --
 .../custom-expansion-panel.component.scss     | 81 -------------------
 2 files changed, 86 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cards/card-app-status/card-app-status.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/custom-expansion-panel/custom-expansion-panel.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-app-status/card-app-status.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-app-status/card-app-status.component.scss
deleted file mode 100644
index 39f4a1e3e3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-app-status/card-app-status.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.card-app-status {
-  &__large {
-    font-size: 16px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/custom-expansion-panel/custom-expansion-panel.component.scss b/src/frontend/packages/core/src/shared/components/custom-expansion-panel/custom-expansion-panel.component.scss
deleted file mode 100644
index d55c1dbee0..0000000000
--- a/src/frontend/packages/core/src/shared/components/custom-expansion-panel/custom-expansion-panel.component.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.custom-expansion-panel {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  overflow: hidden;
-  
-  &.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-.expansion-header {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  cursor: pointer;
-  background-color: #fafafa;
-  border-bottom: 1px solid transparent;
-  transition: background-color 0.2s ease;
-  
-  &:hover {
-    background-color: #f5f5f5;
-  }
-  
-  &.hide-toggle {
-    cursor: default;
-    
-    &:hover {
-      background-color: #fafafa;
-    }
-  }
-  
-  .toggle-before & {
-    flex-direction: row;
-  }
-  
-  .toggle-after & {
-    flex-direction: row-reverse;
-  }
-}
-
-.expansion-content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-  
-  &.expanded {
-    max-height: 1000px; // Adjust as needed
-  }
-}
-
-.toggle-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  &.before {
-    margin-left: 0;
-    margin-right: 16px;
-  }
-  
-  &.after {
-    margin-left: auto;
-    margin-right: 0;
-  }
-}
-
-.toggle-icon {
-  transition: transform 0.2s ease;
-  fill: #666;
-  
-  &.rotated {
-    transform: rotate(180deg);
-  }
-}
\ No newline at end of file

From d856ca4a45d6e5c8fbc02a57ab8df651bc08503e Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 08:27:40 -0700
Subject: [PATCH 02/27] Migrate 35 Class-A SCSS files to Tailwind utilities

Each component .scss either declared rules whose selectors never
matched any element in the component's template (dead) or declared
trivial single-class rules that translate directly to Tailwind
utility classes in the template.

Migration per file:
- delete the .scss
- remove styleUrls from the @Component decorator
- where the rule was live: replace the SCSS class on the element
  with the equivalent utility string

Net: 35 .scss files deleted, no behavioral change. Production build
passes with 0 errors. Bundle transfer size unchanged.

SCSS count in src/frontend/packages: 281 -> 244.
---
 .../autoscaler-metric-page.component.scss           |  5 -----
 .../autoscaler-metric-page.component.ts             |  1 -
 .../edit-autoscaler-policy-step1.component.scss     |  4 ----
 .../edit-autoscaler-policy-step1.component.ts       |  1 -
 .../edit-autoscaler-policy.component.html           |  2 +-
 .../edit-autoscaler-policy.component.scss           |  3 ---
 .../edit-autoscaler-policy.component.ts             |  1 -
 .../tabs/metrics-tab/metrics-tab.component.scss     |  4 ----
 .../tabs/metrics-tab/metrics-tab.component.ts       |  1 -
 .../tabs/services-tab/services-tab.component.scss   |  3 ---
 .../tabs/services-tab/services-tab.component.ts     |  1 -
 .../edit-application.component.scss                 |  3 ---
 .../edit-application/edit-application.component.ts  |  1 -
 .../new-application-base-step.component.html        |  2 +-
 .../new-application-base-step.component.scss        |  3 ---
 .../new-application-base-step.component.ts          |  1 -
 .../add-organization.component.html                 |  2 +-
 .../add-organization.component.scss                 |  3 ---
 .../add-organization/add-organization.component.ts  |  1 -
 .../features/cf/add-quota/add-quota.component.html  |  2 +-
 .../features/cf/add-quota/add-quota.component.scss  |  3 ---
 .../features/cf/add-quota/add-quota.component.ts    |  1 -
 .../add-space-quota/add-space-quota.component.html  |  2 +-
 .../add-space-quota/add-space-quota.component.scss  |  3 ---
 .../cf/add-space-quota/add-space-quota.component.ts |  1 -
 .../features/cf/add-space/add-space.component.html  |  2 +-
 .../features/cf/add-space/add-space.component.scss  |  3 ---
 .../features/cf/add-space/add-space.component.ts    |  1 -
 .../edit-organization.component.html                |  2 +-
 .../edit-organization.component.scss                |  3 ---
 .../edit-organization.component.ts                  |  1 -
 .../cf/edit-quota/edit-quota.component.html         |  2 +-
 .../cf/edit-quota/edit-quota.component.scss         |  3 ---
 .../features/cf/edit-quota/edit-quota.component.ts  |  1 -
 .../edit-space-quota.component.html                 |  2 +-
 .../edit-space-quota.component.scss                 |  3 ---
 .../edit-space-quota/edit-space-quota.component.ts  |  1 -
 .../cf/edit-space/edit-space.component.html         |  2 +-
 .../cf/edit-space/edit-space.component.scss         |  3 ---
 .../features/cf/edit-space/edit-space.component.ts  |  1 -
 .../cloud-foundry-summary-tab.component.html        |  2 +-
 .../cloud-foundry-summary-tab.component.scss        |  5 -----
 .../cloud-foundry-summary-tab.component.ts          |  1 -
 .../add-service-instance.component.html             |  2 +-
 .../add-service-instance.component.scss             |  3 ---
 .../add-service-instance.component.ts               |  1 -
 .../card-cf-user-info.component.html                |  2 +-
 .../card-cf-user-info.component.scss                |  3 ---
 .../card-cf-user-info.component.ts                  |  1 -
 .../src/core/dot-content/dot-content.component.html |  2 +-
 .../src/core/dot-content/dot-content.component.scss | 11 -----------
 .../src/core/dot-content/dot-content.component.ts   |  1 -
 .../core/stateful-icon/stateful-icon.component.html |  2 +-
 .../core/stateful-icon/stateful-icon.component.scss | 12 ------------
 .../core/stateful-icon/stateful-icon.component.ts   |  1 -
 .../backup-checkbox-cell.component.html             |  2 +-
 .../backup-checkbox-cell.component.scss             |  3 ---
 .../backup-checkbox-cell.component.ts               |  1 -
 .../backup-restore-endpoints.component.html         |  2 +-
 .../backup-restore-endpoints.component.scss         |  3 ---
 .../backup-restore-endpoints.component.ts           |  1 -
 .../edit-endpoint/edit-endpoint.component.html      |  2 +-
 .../edit-endpoint/edit-endpoint.component.scss      |  3 ---
 .../edit-endpoint/edit-endpoint.component.ts        |  1 -
 .../no-endpoints-non-admin.component.html           |  2 +-
 .../no-endpoints-non-admin.component.scss           | 11 -----------
 .../no-endpoints-non-admin.component.ts             |  1 -
 .../application-state-icon.component.html           |  2 +-
 .../application-state-icon.component.scss           |  4 ----
 .../application-state-icon.component.ts             |  1 -
 .../cards/card-status/card-status.component.html    |  2 +-
 .../cards/card-status/card-status.component.scss    |  8 --------
 .../cards/card-status/card-status.component.ts      |  1 -
 .../components/date-time/date-time.component.html   |  6 +++---
 .../components/date-time/date-time.component.scss   |  8 --------
 .../components/date-time/date-time.component.ts     |  1 -
 .../intro-screen/intro-screen.component.html        |  2 +-
 .../intro-screen/intro-screen.component.scss        | 10 ----------
 .../intro-screen/intro-screen.component.ts          |  1 -
 .../table-cell-favorite.component.html              |  2 +-
 .../table-cell-favorite.component.scss              |  5 -----
 .../table-cell-favorite.component.ts                |  1 -
 .../table-cell-side-panel.component.html            |  2 +-
 .../table-cell-side-panel.component.scss            |  4 ----
 .../table-cell-side-panel.component.ts              |  1 -
 .../list-table/table-cell/table-cell.component.scss |  3 ---
 .../list-table/table-cell/table-cell.component.ts   |  1 -
 .../routing-indicator.component.html                |  2 +-
 .../routing-indicator.component.scss                |  3 ---
 .../routing-indicator.component.ts                  |  1 -
 .../snackbar-return/snackbar-return.component.html  |  4 ++--
 .../snackbar-return/snackbar-return.component.scss  | 13 -------------
 .../snackbar-return/snackbar-return.component.ts    |  1 -
 .../stepper-form/stepper-form.component.html        |  2 +-
 .../stepper-form/stepper-form.component.scss        |  6 ------
 .../stepper/stepper-form/stepper-form.component.ts  |  1 -
 .../acme-support-info.component.scss                |  3 ---
 .../acme-support-info.component.ts                  |  1 -
 98 files changed, 31 insertions(+), 236 deletions(-)
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.scss
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.scss
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.scss
 delete mode 100644 src/frontend/packages/core/src/core/dot-content/dot-content.component.scss
 delete mode 100644 src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/date-time/date-time.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.scss
 delete mode 100644 src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.scss

diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.scss b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.scss
deleted file mode 100644
index 208b05bac8..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-app-list {
-  flex: 1;
-}
-
-
diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts
index 018fe8af2a..334e0b8cd4 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-metric-page/autoscaler-metric-page.component.ts
@@ -19,7 +19,6 @@ import { AutoscalerConstants } from '../../core/autoscaler-helpers/autoscaler-ut
 @Component({
   selector: 'app-autoscaler-metric-page',
   templateUrl: './autoscaler-metric-page.component.html',
-  styleUrls: ['./autoscaler-metric-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.scss
deleted file mode 100644
index 1ae787f91d..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-
-.autoscaler-policy-edit-limit-max {
-  margin-top: 0.5em;
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts
index 403b12b970..d5a6c27d91 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts
@@ -22,7 +22,6 @@ interface EditLimitForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step1',
   templateUrl: './edit-autoscaler-policy-step1.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step1.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: TailwindErrorStateMatcher, useClass: TailwindShowOnDirtyErrorStateMatcher }
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html
index 83a4d074b4..d43a494400 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.html
@@ -1,4 +1,4 @@
-<div class="autoscaler-policy-edit-steppers">
+<div class="h-full">
   <app-page-header>
     <h1>{{isCreate ? 'Create' : 'Edit' }} AutoScaler Policy:
       {{ (applicationService.application$ | async)?.app.entity.name }} </h1>
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.scss
deleted file mode 100644
index d1d4e3e07b..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.autoscaler-policy-edit-steppers {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts
index ccbe765134..46e58606ef 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy.component.ts
@@ -32,7 +32,6 @@ import { EditAutoscalerPolicyService } from './edit-autoscaler-policy-service';
 @Component({
   selector: 'app-edit-autoscaler-policy',
   templateUrl: './edit-autoscaler-policy.component.html',
-  styleUrls: ['./edit-autoscaler-policy.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher },
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.scss
deleted file mode 100644
index c149aedff7..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.metric-chart-wrapper {
-  height: 500px;
-  margin-bottom: 20px;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts
index 38d272efc6..1ae270146f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/metrics-tab/metrics-tab.component.ts
@@ -15,7 +15,6 @@ import { ApplicationService } from '../../../../application.service';
 @Component({
   selector: 'app-metrics-tab',
   templateUrl: './metrics-tab.component.html',
-  styleUrls: ['./metrics-tab.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.scss
deleted file mode 100644
index b3fff4df81..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-app-list {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts
index b5ba58e6a8..064f02dbe1 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/services-tab/services-tab.component.ts
@@ -56,7 +56,6 @@ import type { StServiceCredentialBinding } from '../../../../../../services/endp
 @Component({
   selector: 'app-services-tab',
   templateUrl: './services-tab.component.html',
-  styleUrls: ['./services-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.scss
deleted file mode 100644
index 3d32b2c376..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-app {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts
index 6a1a4d4b52..77b3d8129e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/edit-application/edit-application.component.ts
@@ -38,7 +38,6 @@ interface EditApplicationForm {
 @Component({
   selector: 'app-edit-application',
   templateUrl: './edit-application.component.html',
-  styleUrls: ['./edit-application.component.scss'],
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html
index 1ad72afbe2..1c82f45d4e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.html
@@ -3,7 +3,7 @@ <h1>New Application</h1>
 </app-page-header>
 <app-steppers [cancel]="'/applications'">
   <app-step [hideNextButton]="true" [signalHandle]="signalHandle">
-    <div class="tiles">
+    <div class="flex-1">
       <h3>Select application source</h3>
       <p>To create an application you can either deploy from a specific source or create an application shell. An
         application shell is an empty application with no package associated with it.</p>
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.scss
deleted file mode 100644
index 712926fb2c..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.tiles {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts
index 5602644c1f..f8631dff79 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/new-application-base-step/new-application-base-step.component.ts
@@ -26,7 +26,6 @@ export interface IAppTileData extends ITileData {
 @Component({
   selector: 'app-new-application-base-step',
   templateUrl: './new-application-base-step.component.html',
-  styleUrls: ['./new-application-base-step.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html
index 9f3507bbf9..eaa2016609 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.html
@@ -1,4 +1,4 @@
-<div class="add-org-stepper">
+<div class="h-full">
   <app-page-header>
     Create Organization
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.scss
deleted file mode 100644
index c0c741b5d6..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-org-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts
index fe3bf973ea..6dcd32302a 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/add-organization.component.ts
@@ -10,7 +10,6 @@ import { CreateOrganizationStepComponent } from './create-organization-step/crea
 @Component({
   selector: 'app-add-organization',
   templateUrl: './add-organization.component.html',
-  styleUrls: ['./add-organization.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html
index 900e53cd95..71cd7d4015 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Create Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.scss
deleted file mode 100644
index eaa7b01745..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts
index 3c6c93d0e0..82f6949401 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-quota/add-quota.component.ts
@@ -10,7 +10,6 @@ import { CreateQuotaStepComponent } from './create-quota-step/create-quota-step.
 @Component({
   selector: 'app-add-quota',
   templateUrl: './add-quota.component.html',
-  styleUrls: ['./add-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html
index 82d2deed34..5573782a0e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-space-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Create Space Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.scss
deleted file mode 100644
index 6c1ee98f3a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-space-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts
index cd239238bf..217fc5dfff 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space-quota/add-space-quota.component.ts
@@ -8,7 +8,6 @@ import { CreateSpaceQuotaStepComponent } from './create-space-quota-step/create-
 @Component({
   selector: 'app-add-space-quota',
   templateUrl: './add-space-quota.component.html',
-  styleUrls: ['./add-space-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html
index ca6ea7a07a..1126c21faf 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.html
@@ -1,4 +1,4 @@
-<div class="add-space-stepper">
+<div class="h-full">
   <app-page-header>
     Create Space
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.scss
deleted file mode 100644
index e6e7c8b8b3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-space-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts
index e1a2559d21..30b71fa8ee 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/add-space.component.ts
@@ -11,7 +11,6 @@ import { CreateSpaceStepComponent } from './create-space-step/create-space-step.
 @Component({
   selector: 'app-add-space',
   templateUrl: './add-space.component.html',
-  styleUrls: ['./add-space.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html
index be0cf0a77f..67138e7ca4 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.html
@@ -1,4 +1,4 @@
-<div class="edit-org-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Organization
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.scss
deleted file mode 100644
index 0cd9e60ed3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-org-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts
index f091c6cbc3..ffab19eaa3 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization.component.ts
@@ -8,7 +8,6 @@ import { getActiveRouteCfOrgSpaceProvider } from '../cf.helpers';
 @Component({
   selector: 'app-edit-organization',
   templateUrl: './edit-organization.component.html',
-  styleUrls: ['./edit-organization.component.scss'],
   providers: [getActiveRouteCfOrgSpaceProvider],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html
index 6a7498bcc1..858e372ae5 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.scss
deleted file mode 100644
index eaa7b01745..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts
index 73bf4e162b..f8dbf24669 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-quota/edit-quota.component.ts
@@ -13,7 +13,6 @@ import { EditQuotaStepComponent } from './edit-quota-step/edit-quota-step.compon
 @Component({
   selector: 'app-edit-quota',
   templateUrl: './edit-quota.component.html',
-  styleUrls: ['./edit-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html
index 5c042174ec..82b3133471 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.html
@@ -1,4 +1,4 @@
-<div class="add-space-quota-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Space Quota
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.scss
deleted file mode 100644
index 6c1ee98f3a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-space-quota-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts
index 058c814c4b..ecaa5399d8 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space-quota/edit-space-quota.component.ts
@@ -11,7 +11,6 @@ import { EditSpaceQuotaStepComponent } from './edit-space-quota-step/edit-space-
 @Component({
   selector: 'app-edit-space-quota',
   templateUrl: './edit-space-quota.component.html',
-  styleUrls: ['./edit-space-quota.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html
index 0f4783bb3a..3157b46eee 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.html
@@ -1,4 +1,4 @@
-<div class="edit-space-stepper">
+<div class="h-full">
   <app-page-header>
     Edit {{spaceName$ | async}}
   </app-page-header>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.scss
deleted file mode 100644
index 62f9c0662f..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-space-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts
index 9ac1a4539e..c4de7d8bf1 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-space/edit-space.component.ts
@@ -16,7 +16,6 @@ import { EditSpaceStepComponent } from './edit-space-step/edit-space-step.compon
 @Component({
   selector: 'app-edit-space',
   templateUrl: './edit-space.component.html',
-  styleUrls: ['./edit-space.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider,
     CfUserService,
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html
index e2c7af35ea..77367b920b 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.html
@@ -9,7 +9,7 @@
   </app-polling-indicator>
 </app-page-sub-nav>
 
-<div class="summary h-full overflow-y-auto">
+<div class="flex h-full min-h-full w-full overflow-y-auto">
   <app-tile-grid fit="true">
     <app-tile-group class="tile-group-1-cols">
       <app-tile>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.scss
deleted file mode 100644
index dc360c8f01..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.summary {
-  display: flex;
-  min-height: 100%;
-  width: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts
index a652613906..ea51318058 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-summary-tab/cloud-foundry-summary-tab.component.ts
@@ -25,7 +25,6 @@ import { EndpointDataRegistry } from '../../../../services/endpoint-data/endpoin
 @Component({
   selector: 'app-cloud-foundry-summary-tab',
   templateUrl: './cloud-foundry-summary-tab.component.html',
-  styleUrls: ['./cloud-foundry-summary-tab.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html
index 370dd54840..559cb9b708 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html
@@ -2,7 +2,7 @@
   {{ title$ | async }}
 </app-page-header>
 @if (initialisedService(); as inited) {
-  <div class="add-service-instance">
+  <div class="h-full">
     <app-steppers [cancel]="modeService.cancelUrl">
       @if (serviceType === serviceTypes.SERVICE) {
         @if (modeService.viewDetail.showSelectCf && !isSpaceScoped()) {
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.scss
deleted file mode 100644
index 9dd3671b81..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.add-service-instance {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts
index 24a9a684ef..ddc300d6c9 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts
@@ -59,7 +59,6 @@ import { SpecifyUserProvidedDetailsComponent } from '../specify-user-provided-de
 @Component({
   selector: 'app-add-service-instance',
   templateUrl: './add-service-instance.component.html',
-  styleUrls: ['./add-service-instance.component.scss'],
   providers: [
     CreateServiceInstanceHelperServiceFactory,
     TitleCasePipe,
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html
index 3fbe6df3ec..d9e02b9312 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.html
@@ -1,4 +1,4 @@
-<div class="user-card">
+<div class="h-full">
   <app-card>
     <app-card-header>
       <app-card-title>User Information</app-card-title>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.scss
deleted file mode 100644
index 5d029e4c3d..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.user-card {
-  height: 100%;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts
index 95cf17ba39..3ce2dd4946 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-user-info/card-cf-user-info.component.ts
@@ -12,7 +12,6 @@ import { CloudFoundryEndpointService } from '../../../../features/cf/services/cl
 @Component({
   selector: 'app-card-cf-user-info',
   templateUrl: './card-cf-user-info.component.html',
-  styleUrls: ['./card-cf-user-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/core/dot-content/dot-content.component.html b/src/frontend/packages/core/src/core/dot-content/dot-content.component.html
index bd1388b2d3..94e2698176 100644
--- a/src/frontend/packages/core/src/core/dot-content/dot-content.component.html
+++ b/src/frontend/packages/core/src/core/dot-content/dot-content.component.html
@@ -1 +1 @@
-<span class="dot" [ngClass]="{'disabled': disabled}"><ng-content></ng-content></span>
+<span class="inline-flex items-center justify-center rounded-full h-6 w-6 p-0 text-sm leading-6" [ngClass]="{'disabled': disabled}"><ng-content></ng-content></span>
diff --git a/src/frontend/packages/core/src/core/dot-content/dot-content.component.scss b/src/frontend/packages/core/src/core/dot-content/dot-content.component.scss
deleted file mode 100644
index 2236f57880..0000000000
--- a/src/frontend/packages/core/src/core/dot-content/dot-content.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.dot {
-  align-items: center;
-  border-radius: 50%;
-  display: flex;
-  font-size: 14px;
-  height: 24px;
-  justify-content: center;
-  line-height: 24px;
-  padding: 0;
-  width: 24px;
-}
diff --git a/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts b/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts
index cfc0d36af9..e8677465d5 100644
--- a/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts
+++ b/src/frontend/packages/core/src/core/dot-content/dot-content.component.ts
@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-dot-content',
   templateUrl: './dot-content.component.html',
-  styleUrls: ['./dot-content.component.scss'],
   standalone: true,
   imports: [
     CommonModule
diff --git a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html
index f588c4c043..6791bdd815 100644
--- a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html
+++ b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.html
@@ -1,5 +1,5 @@
 @if (selectedState || stateKey === allStateKeys.BUSY) {
-  <div class="stateful-icon">
+  <div class="flex items-center justify-center leading-6 h-6 w-6">
     @if (stateKey !== allStateKeys.BUSY) {
       <app-custom-icon [inline]="inline"
         [ngClass]="{'warning': stateKey === allStateKeys.WARNING, 'error': stateKey === allStateKeys.ERROR, 'ok': stateKey === allStateKeys.OK }"
diff --git a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.scss b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.scss
deleted file mode 100644
index 842deb1d4d..0000000000
--- a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$size: 24px;
-.stateful-icon {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  line-height: $size;
-}
-.stateful-icon,
-mat-spinner {
-  height: $size;
-  width: $size;
-}
diff --git a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts
index 6de24fa55b..9403cc95fe 100644
--- a/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts
+++ b/src/frontend/packages/core/src/core/stateful-icon/stateful-icon.component.ts
@@ -19,7 +19,6 @@ type StatefulIconDefinition = IconDefinition | IconTemplateDefinition;
 @Component({
   selector: 'app-stateful-icon',
   templateUrl: './stateful-icon.component.html',
-  styleUrls: ['./stateful-icon.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html
index 36d4c93c22..fe419122f5 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.html
@@ -1,2 +1,2 @@
-<app-checkbox [(ngModel)]="$any(service.state[row.guid])[config.type]" [disabled]="disabled()" (change)="validate()">
+<app-checkbox class="ml-[15px]" [(ngModel)]="$any(service.state[row.guid])[config.type]" [disabled]="disabled()" (change)="validate()">
 </app-checkbox>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.scss b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.scss
deleted file mode 100644
index de979ef749..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-app-checkbox {
-  margin-left: 15px;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts
index de40cf9b18..659e3486ca 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-checkbox-cell/backup-checkbox-cell.component.ts
@@ -14,7 +14,6 @@ interface BackupCheckboxConfig {
 @Component({
   selector: 'app-backup-checkbox-cell',
   templateUrl: './backup-checkbox-cell.component.html',
-  styleUrls: ['./backup-checkbox-cell.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html
index 1156c9ea06..f638d4c3f7 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.html
@@ -4,7 +4,7 @@ <h1>Backup/Restore Endpoints</h1>
 
 <app-steppers cancel="/endpoints">
   <app-step [hideNextButton]="true" [signalHandle]="signalHandle">
-    <div class="tiles">
+    <div class="flex-1">
       <p>Create a backup of endpoints and their connection details or restore from an existing backup.</p>
       <app-tile-selector [options]="tileSelectorConfig" (selection)="selectedTile = $event"></app-tile-selector>
     </div>
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.scss b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.scss
deleted file mode 100644
index 712926fb2c..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.tiles {
-  flex: 1;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts
index 7c567593a9..bf44fd0f32 100644
--- a/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/backup-restore/backup-restore-endpoints/backup-restore-endpoints.component.ts
@@ -14,7 +14,6 @@ interface IAppTileData extends ITileData {
 @Component({
   selector: 'app-backup-restore-endpoints',
   templateUrl: './backup-restore-endpoints.component.html',
-  styleUrls: ['./backup-restore-endpoints.component.scss'],
   standalone: true,
   imports: [
     PageHeaderComponent,
diff --git a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html
index aa1811c185..2f27e3c628 100644
--- a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.html
@@ -1,4 +1,4 @@
-<div class="edit-endpoint-stepper">
+<div class="h-full">
   <app-page-header>
     Edit Endpoint
   </app-page-header>
diff --git a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.scss b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.scss
deleted file mode 100644
index f313bb9d3f..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-endpoint-stepper {
-  height: 100%;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts
index 591a34cd15..6c68c99f65 100644
--- a/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint.component.ts
@@ -8,7 +8,6 @@ import { EditEndpointStepComponent } from './edit-endpoint-step/edit-endpoint-st
 @Component({
   selector: 'app-edit-endpoint',
   templateUrl: './edit-endpoint.component.html',
-  styleUrls: ['./edit-endpoint.component.scss'],
   providers: [],
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html
index a529a4ea53..69f79f0d3a 100644
--- a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html
+++ b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.html
@@ -4,7 +4,7 @@
 
 <app-show-page-header></app-show-page-header>
 
-<app-no-content-message class="full-screen-centered" [icon]="'device_hub'"
+<app-no-content-message class="flex h-full mt-[calc(56px-16vh)] w-full" [icon]="'device_hub'"
   [firstLine]="'There are no registered endpoints'" [secondLine]="{
   text: 'At least one registered endpoint is required to continue. Registered endpoints are provided by your system administrator. Please contact your administrator.'
 }"></app-no-content-message>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.scss b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.scss
deleted file mode 100644
index 31442f0b1f..0000000000
--- a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-button {
-  position: absolute;
-  right: 0;
-}
-
-.full-screen-centered {
-  display: flex;
-  height: 100%;
-  margin-top: calc(56px - 16vh);
-  width: 100%;
-}
diff --git a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts
index 5b0b88b910..329b816945 100644
--- a/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts
+++ b/src/frontend/packages/core/src/features/no-endpoints-non-admin/no-endpoints-non-admin.component.ts
@@ -8,7 +8,6 @@ import { NoContentMessageComponent } from '../../shared/components/no-content-me
 @Component({
   selector: 'app-no-endpoints-non-admin',
   templateUrl: './no-endpoints-non-admin.component.html',
-  styleUrls: ['./no-endpoints-non-admin.component.scss'],
   standalone: true,
   imports: [
     PageHeaderComponent,
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html
index 7ba53449f0..0f10702a19 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.html
@@ -1,3 +1,3 @@
-<div class="app-state-icon">
+<div class="flex flex-row">
   <app-custom-icon [ngClass]="status | applicationStateIcon:'class'">{{status | applicationStateIcon:'icon'}}</app-custom-icon>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.scss b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.scss
deleted file mode 100644
index ddc8be26de..0000000000
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.app-state-icon {
-  display: flex;
-  flex-direction: row;
-}
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts
index d5156a1b1e..ec68d19c17 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state-icon/application-state-icon.component.ts
@@ -7,7 +7,6 @@ import { ApplicationStateIconPipe } from './application-state-icon.pipe';
 @Component({
   selector: 'app-application-state-icon',
   templateUrl: './application-state-icon.component.html',
-  styleUrls: ['./application-state-icon.component.scss'],
   standalone: true,
   imports: [
     NgClass,
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html
index 153e111a24..5c8cc6889d 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html
+++ b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.html
@@ -1,6 +1,6 @@
 @if ((status$ | async); as status) {
   <div
-    class="app-card-status absolute top-0 left-0 w-full h-1 rounded-t-lg"
+    class="absolute top-0 left-0 w-full h-1 rounded-t-lg transition-colors duration-[1ms] ease-in"
      [ngClass]="{
        'bg-success-shade-500': status === cardStatus.OK,
        'bg-warning-shade-500': status === cardStatus.WARNING,
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.scss b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.scss
deleted file mode 100644
index 154f736c04..0000000000
--- a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.app-card-status {
-  height: 4px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition: background-color 1ms ease-in;
-}
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts
index 4401b7bc94..0191079bd8 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts
+++ b/src/frontend/packages/core/src/shared/components/cards/card-status/card-status.component.ts
@@ -23,7 +23,6 @@ export function determineCardStatus(value: number, limit: number): StratosStatus
 @Component({
   selector: 'app-card-status',
   templateUrl: './card-status.component.html',
-  styleUrls: ['./card-status.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html
index e4d902b9ba..9410d0f879 100644
--- a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html
+++ b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.html
@@ -1,5 +1,5 @@
-<form class="date-time-form flex gap-2">
-  <div class="form-field flex-1">
+<form class="flex gap-2">
+  <div class="flex flex-1 h-[66px]">
     <input
       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
       name="date"
@@ -7,7 +7,7 @@
       type="date"
       placeholder="Choose a date">
   </div>
-  <div class="form-field flex-1">
+  <div class="flex flex-1 h-[66px]">
     <input
       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
       name="time"
diff --git a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.scss b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.scss
deleted file mode 100644
index 2c847d5272..0000000000
--- a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.date-time-form {
-  display: flex;
-}
-
-.form-field {
-  display: flex;
-  height: 66px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts
index 895531d50f..87102521f4 100644
--- a/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts
+++ b/src/frontend/packages/core/src/shared/components/date-time/date-time.component.ts
@@ -12,7 +12,6 @@ import { format, parse, setHours, setMinutes, isValid, isEqual } from 'date-fns'
     ReactiveFormsModule
 ],
   templateUrl: './date-time.component.html',
-  styleUrls: ['./date-time.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DateTimeComponent implements OnDestroy {
diff --git a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html
index 76e1ed39f2..166234761a 100644
--- a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html
+++ b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.html
@@ -1,3 +1,3 @@
-<div class="intro">
+<div class="flex flex-col items-center justify-center h-screen bg-[url(/core/assets/login-bg.jpg)] bg-center bg-cover">
   <ng-content></ng-content>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.scss b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.scss
deleted file mode 100644
index 460a2db0a9..0000000000
--- a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.intro {
-  align-items: center;
-  background-image: url('/core/assets/login-bg.jpg');
-  background-position: center;
-  background-size: cover;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  justify-content: center;
-}
diff --git a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts
index 3a65f3f0fa..6ed31c9be5 100644
--- a/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts
+++ b/src/frontend/packages/core/src/shared/components/intro-screen/intro-screen.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component  } from '@angular/core';
 @Component({
   selector: 'app-intro-screen',
   templateUrl: './intro-screen.component.html',
-  styleUrls: ['./intro-screen.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html
index 713fdccb66..52975c3b6c 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.html
@@ -1 +1 @@
-@if (canFavorite) {<app-entity-favorite-star class="table-cell-favorite" [favorite]="favorite"></app-entity-favorite-star>}
\ No newline at end of file
+@if (canFavorite) {<app-entity-favorite-star class="flex justify-end" [favorite]="favorite"></app-entity-favorite-star>}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.scss
deleted file mode 100644
index a43f558379..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-.table-cell-favorite {
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts
index ec41cb4657..d5ab4bc8e6 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-favorite/table-cell-favorite.component.ts
@@ -81,7 +81,6 @@ export interface TableCellFavoriteComponentConfig<T, Y extends IFavoriteMetadata
 @Component({
 selector: 'app-table-cell-favorite',
   templateUrl: './table-cell-favorite.component.html',
-  styleUrls: ['./table-cell-favorite.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html
index 14c32d3b33..4dc4c6bd5d 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html
@@ -1,4 +1,4 @@
-<a class="link text-brand-600 hover:text-brand-800 cursor-pointer" role="button" tabindex="0"
+<a class="link text-brand-600 hover:text-brand-800 cursor-pointer underline" role="button" tabindex="0"
   (click)="showSidePanel(); $event.stopPropagation()"
   (keydown.enter)="showSidePanel(); $event.stopPropagation()"
   (keydown.space)="showSidePanel(); $event.stopPropagation(); $event.preventDefault()">
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.scss
deleted file mode 100644
index 13645db922..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-a {
-  cursor: pointer;
-  text-decoration: underline;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts
index cd1128422b..b26494f275 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.ts
@@ -13,7 +13,6 @@ export interface TableCellSidePanelConfig<T> {
 @Component({
   selector: 'app-table-cell-side-panel',
   templateUrl: './table-cell-side-panel.component.html',
-  styleUrls: ['./table-cell-side-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true
 })
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.scss
deleted file mode 100644
index ec1a2f6000..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.app-table__cell--table-column-nowrap {
-  white-space: nowrap;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts
index 4f695637ea..5ca1e7c42f 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts
@@ -18,7 +18,6 @@ import { ICellDefinition } from '../table.types';
 @Component({
   selector: 'app-table-cell',
   templateUrl: './table-cell.component.html',
-  styleUrls: ['./table-cell.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html
index a1261d5ab3..2eca645fcd 100644
--- a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html
+++ b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.html
@@ -1,7 +1,7 @@
 @if (value$ | async; as value) {
   <div>
     @if (value < HIDE_VALUE) {
-      <app-progress-bar class="routing-indicator" mode="determinate" [value]="value"></app-progress-bar>
+      <app-progress-bar class="h-[3px]" mode="determinate" [value]="value"></app-progress-bar>
     }
   </div>
 }
diff --git a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.scss b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.scss
deleted file mode 100644
index ff211c45e8..0000000000
--- a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.routing-indicator {
-  height: 3px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts
index 056c4a26db..bb58a595d2 100644
--- a/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts
+++ b/src/frontend/packages/core/src/shared/components/routing-indicator/routing-indicator.component.ts
@@ -7,7 +7,6 @@ import { filter, map, startWith, switchMap, delay, tap } from 'rxjs/operators';
 @Component({
   selector: 'app-routing-indicator',
   templateUrl: './routing-indicator.component.html',
-  styleUrls: ['./routing-indicator.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html
index a1e32b80d6..c11beb54ad 100644
--- a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html
+++ b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.html
@@ -1,7 +1,7 @@
-<div class="app-snackbar-return mat-simple-snackbar">
+<div class="flex justify-between items-center h-full leading-5 opacity-100 mat-simple-snackbar">
   <span>{{ message }}</span>
   @if (returnUrl) {
-    <div class="app-snackbar-return-action mat-simple-snackbar-action">
+    <div class="shrink-0 -mt-2 -mr-2 -mb-2 ml-2 mat-simple-snackbar-action">
       <button class="btn btn-ghost" type="button" (click)="return()">{{ returnLabel }}</button>
       <button class="btn btn-ghost" type="button" (click)="dismiss()">Dismiss</button>
     </div>
diff --git a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.scss b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.scss
deleted file mode 100644
index 0f2a6975e0..0000000000
--- a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.app-snackbar-return {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  line-height: 20px;
-  opacity: 1;
-}
-
-.app-snackbar-return-action {
-  flex-shrink: 0;
-  margin: -8px -8px -8px 8px;
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts
index 10c093ac6f..82c54d77d8 100644
--- a/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts
+++ b/src/frontend/packages/core/src/shared/components/snackbar-return/snackbar-return.component.ts
@@ -8,7 +8,6 @@ import { RouterNav, AppState } from '@stratosui/store';
 @Component({
   selector: 'app-snackbar-return',
   templateUrl: './snackbar-return.component.html',
-  styleUrls: ['./snackbar-return.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html
index 94e040b3db..42eeed3a62 100644
--- a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html
+++ b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.html
@@ -1,3 +1,3 @@
-<div class="steppers-form">
+<div class="flex flex-col h-full w-3/5">
   <ng-content></ng-content>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.scss b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.scss
deleted file mode 100644
index c365c06ad1..0000000000
--- a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.steppers-form {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 60%;
-}
diff --git a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts
index 80c1882d2f..51c98b90ca 100644
--- a/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts
+++ b/src/frontend/packages/core/src/shared/components/stepper/stepper-form/stepper-form.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component  } from '@angular/core';
 @Component({
   selector: 'app-stepper-form',
   templateUrl: './stepper-form.component.html',
-  styleUrls: ['./stepper-form.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.scss b/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.scss
deleted file mode 100644
index 1464b0ddfe..0000000000
--- a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-mat-card {
-  margin-bottom: 24px;
-}
diff --git a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts b/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts
index f5811dfd93..34daedb95d 100644
--- a/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts
+++ b/src/frontend/packages/example-extensions/src/acme-support-info/acme-support-info.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
 selector: 'app-acme-support-info',
   templateUrl: './acme-support-info.component.html',
-  styleUrls: ['./acme-support-info.component.scss'],
   standalone: false
 })
 export class AcmeSupportInfoComponent {

From e43142836020088f2c368c3976ac140bb9b48fb0 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 14:15:11 -0700
Subject: [PATCH 03/27] Remove six dead-rule Class B SCSS files

The classifier's enhanced dead-rule check (cross-references every styleUrls
consumer's template + .ts) caught these: their selectors target nothing in
any consumer's markup. They survived earlier Class A passes because they
had bare-tag-nesting (`mat-icon { ... }`, `div { > span { ... } }`) which
the classifier treated as Class B, but the bare tags themselves were also
absent from the templates after v4 work.

Removed:
- cf-autoscaler/.../edit-autoscaler-policy-step2.component.scss
- cf-autoscaler/.../app-autoscaler-metric-chart-card.component.scss
- cloud-foundry/.../table-cell-confirm-org-space.component.scss
- kubernetes/.../kubernetes-node-ips.component.scss
- kubernetes/.../kubernetes-node-labels.component.scss
- kubernetes/.../kubernetes-node-link.component.scss

Each .ts loses its styleUrls entry. No template changes. Production build
passes with 0 errors.

SCSS count in src/frontend/packages: 244 -> 238.
---
 ...dit-autoscaler-policy-step2.component.scss | 39 -------------------
 .../edit-autoscaler-policy-step2.component.ts |  1 -
 ...utoscaler-metric-chart-card.component.scss | 25 ------------
 ...-autoscaler-metric-chart-card.component.ts |  1 -
 ...able-cell-confirm-org-space.component.scss |  7 ----
 .../table-cell-confirm-org-space.component.ts |  1 -
 .../kubernetes-node-ips.component.scss        |  6 ---
 .../kubernetes-node-ips.component.ts          |  1 -
 .../kubernetes-node-labels.component.scss     |  6 ---
 .../kubernetes-node-labels.component.ts       |  1 -
 .../kubernetes-node-link.component.scss       |  5 ---
 .../kubernetes-node-link.component.ts         |  1 -
 12 files changed, 94 deletions(-)
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.scss
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.scss

diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.scss
deleted file mode 100644
index c6ecc8eb54..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.app-autoscaler-tile-grid-100 {
-  width: 100%;
-}
-
-.autoscaler-policy-edit {
-  display: flex;
-  position: relative;
-  width: 100%;
-  &__actions {
-    bottom: 10px;
-    padding-top: 0;
-    position: absolute;
-    right: 24px;
-    text-align: right;
-  }
-}
-
-.autoscaler-policy-edit-trigger-item {
-  .autoscaler-policy-edit-trigger-item-desc {
-    margin-bottom: 0.5em;
-  }
-  .autoscaler-policy-edit-trigger-item__unit {
-    display: inline-block;
-    width: 23px;
-  }
-  mat-error {
-    font-size: 85%;
-  }
-}
-
-.autoscaler-edit-select {
-  input {
-    left: 0;
-    position: absolute;
-    top: 0.5em;
-    width: 90%;
-    z-index: 200;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts
index 1726b1b432..d5cbd7a33e 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts
@@ -38,7 +38,6 @@ interface EditTriggerForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step2',
   templateUrl: './edit-autoscaler-policy-step2.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step2.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: TailwindErrorStateMatcher, useClass: TailwindShowOnDirtyErrorStateMatcher }
diff --git a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.scss b/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.scss
deleted file mode 100644
index 5a6c191367..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-mat-card-header {
-  .autoscaler-metric-subtitle {
-    font-size: 0.9em;
-    margin-top: 0.3em;
-  }
-}
-
-.autoscaler-chart-card {
-  display: flex;
-  height: 250px;
-  width: 100%;
-
-  .autoscaler-chart-gauge {
-    height: 200px;
-    margin: 40px 20px 0 0;
-    width: 20%;
-    ngx-charts-gauge {
-      width: 100%;
-    }
-  }
-  .autoscaler-chart-combo {
-    margin-top: 1em;
-    width: 80%;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts b/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts
index 0d26d083fe..09081697ca 100644
--- a/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/shared/list-types/app-autoscaler-metric-chart/app-autoscaler-metric-chart-card/app-autoscaler-metric-chart-card.component.ts
@@ -22,7 +22,6 @@ import { AppAutoscalerComboChartComponent } from './combo-chart/combo-chart.comp
 @Component({
   selector: 'app-app-autoscaler-metric-chart-card',
   templateUrl: './app-autoscaler-metric-chart-card.component.html',
-  styleUrls: ['./app-autoscaler-metric-chart-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.scss
deleted file mode 100644
index 0c0ba70785..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-div {
-  align-items: center;
-  display: flex;
-  > span {
-    padding-left: 5px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts
index bcafdc11f1..a155b5de68 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component.ts
@@ -7,7 +7,6 @@ import { TableCellCustom } from '../../../../../../../../core/src/shared/compone
 @Component({
   selector: 'app-table-cell-confirm-org-space',
   templateUrl: './table-cell-confirm-org-space.component.html',
-  styleUrls: ['./table-cell-confirm-org-space.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.scss
deleted file mode 100644
index d1116fe371..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@reference 'tailwindcss';
-
-mat-icon {
-  font-size: 20px;
-  @apply w-5 h-5;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts
index 931a9ccad2..7cdc1b2e0a 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-ips/kubernetes-node-ips.component.ts
@@ -8,7 +8,6 @@ import { KubernetesAddressExternal, KubernetesAddressInternal, KubernetesNode }
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-node-ips',
   templateUrl: './kubernetes-node-ips.component.html',
-  styleUrls: ['./kubernetes-node-ips.component.scss'],
   standalone: true,
   imports: [
     CustomTooltipDirective,
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.scss
deleted file mode 100644
index d1116fe371..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@reference 'tailwindcss';
-
-mat-icon {
-  font-size: 20px;
-  @apply w-5 h-5;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts
index 72ed9dfc36..b34f847ae3 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-labels/kubernetes-node-labels.component.ts
@@ -8,7 +8,6 @@ import { KubernetesNode } from '../../../store/kube.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-node-labels',
   templateUrl: './kubernetes-node-labels.component.html',
-  styleUrls: ['./kubernetes-node-labels.component.scss'],
   standalone: true,
   imports: [
     CustomTooltipDirective,
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.scss
deleted file mode 100644
index 93270d36e7..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-mat-icon {
-  @apply pl-2.5;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts
index 1af75924f8..daef70e001 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-link/kubernetes-node-link.component.ts
@@ -9,7 +9,6 @@ import { KubernetesNode } from '../../../store/kube.types';
 @Component({
   selector: 'app-kubernetes-node-link',
   templateUrl: './kubernetes-node-link.component.html',
-  styleUrls: ['./kubernetes-node-link.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [RouterLink, CustomTooltipDirective]

From 621f8e7175df72d8b2b2201ad6734678a6bb33e4 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 14:15:24 -0700
Subject: [PATCH 04/27] Flatten entity-summary-title BEM to template utilities
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The .scss declared 12 BEM-style rules (.entity-summary, &__img, &__logo,
&__sub-header, &__content, etc.) — 10 used in the template, 2 dead. The
classifier marked the file Class B because of BEM nesting; flattening
each rule's CSS to inline Tailwind utilities on the matching element
eliminates the .scss entirely.

Migration:
- .entity-summary       -> my-[10px]
- &__header-section     -> flex m-[10px]
- &__img                -> grow-0 shrink-0 basis-16 max-h-16 self-center h-16 object-contain w-16
- &__logo               -> grow-0 shrink-0 basis-16 max-h-16 text-[54px]
- &__header-inner       -> flex-1 ml-[10px]
- &__header-wrapper     -> flex items-baseline
- &__header             -> m-0
- &__header-info        -> text-xl ml-[10px] opacity-40
- &__sub-header         -> text-base -mt-[3px] opacity-60
- &__sub-text           -> text-base opacity-60 pt-[10px]
- &__content            -> mt-0 -mx-[20px] -mb-[20px] pt-0 px-[20px] pb-[20px]
- &__dashboard, &__spacing dropped (dead)

BEM class names dropped from template — no external CSS or ::ng-deep
references found across the codebase. Production build passes with 0
errors. SCSS count: 238 -> 237.
---
 .../entity-summary-title.component.html       | 24 ++++----
 .../entity-summary-title.component.scss       | 59 -------------------
 .../entity-summary-title.component.ts         |  1 -
 3 files changed, 12 insertions(+), 72 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.scss

diff --git a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html
index 4e4facdf82..c586683bd2 100644
--- a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html
+++ b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.html
@@ -1,30 +1,30 @@
-<div class="entity-summary">
-  <div class="entity-summary__header-section">
+<div class="my-[10px]">
+  <div class="flex m-[10px]">
     <!-- <img *ngIf="imagePath" class="entity-summary__logo" title="{{ title }}'s image" src="{{ imagePath }}"> -->
     @if (image) {
-      <img class="entity-summary__img" title="{{ title }}'s image" [src]="image"
+      <img class="grow-0 shrink-0 basis-16 max-h-16 self-center h-16 object-contain w-16" title="{{ title }}'s image" [src]="image"
         (error)="failedImageLoad()" alt="{{ title }}">
     } @else {
-      <app-custom-icon class="entity-summary__logo" fontSet="{{fallBackIconFont}}">{{fallBackIcon}}</app-custom-icon>
+      <app-custom-icon class="grow-0 shrink-0 basis-16 max-h-16 text-[54px]" fontSet="{{fallBackIconFont}}">{{fallBackIcon}}</app-custom-icon>
     }
 
-    <div class="entity-summary__header-inner">
-      <div class="entity-summary__header-wrapper">
-        <h1 class="entity-summary__header">{{ title }} </h1>
+    <div class="flex-1 ml-[10px]">
+      <div class="flex items-baseline">
+        <h1 class="m-0">{{ title }} </h1>
         @if (info) {
-          <app-custom-icon class="entity-summary__header-info" matTooltip="{{ info }}">
+          <app-custom-icon class="text-xl ml-[10px] opacity-40" matTooltip="{{ info }}">
           info</app-custom-icon>
         }
       </div>
       @if (subTitle) {
-        <div class="entity-summary__sub-header"> {{ subTitle }}</div>
+        <div class="text-base -mt-[3px] opacity-60"> {{ subTitle }}</div>
       }
       @if (subText) {
-        <div class="entity-summary__sub-text"> {{ subText }}</div>
+        <div class="text-base opacity-60 pt-[10px]"> {{ subText }}</div>
       }
     </div>
   </div>
-  <div class="entity-summary__content">
+  <div class="mt-0 -mx-[20px] -mb-[20px] pt-0 px-[20px] pb-[20px]">
     <ng-content></ng-content>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.scss b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.scss
deleted file mode 100644
index efdba0da18..0000000000
--- a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.entity-summary {
-  margin: 10px 0;
-  &__img,
-  &__logo {
-    flex: 0 0 64px;
-    max-height: 64px;
-  }
-  &__img {
-    align-self: center;
-    height: 64px;
-    object-fit: contain;
-    width: 64px;
-  }
-  &__logo {
-    font-size: 54px;
-  }
-  &__sub-header {
-    font-size: 16px;
-    margin-top: -3px;
-    opacity: 0.6;
-  }
-  &__sub-text {
-    font-size: 16px;
-    opacity: 0.6;
-    padding-top: 10px;
-  }
-  &__header {
-    margin: 0;
-  }
-  &__header-inner {
-    flex: 1;
-    margin-left: 10px;
-  }
-  &__header-wrapper {
-    align-items: baseline;
-    display: flex;
-  }
-  &__header-info {
-    font-size: 20px;
-    margin-left: 10px;
-    opacity: 0.4;
-  }
-  &__header-section {
-    display: flex;
-    margin: 10px;
-  }
-  &__content {
-    margin: 0 -20px -20px;
-    padding: 0 20px 20px;
-  }
-  &__dashboard {
-    font-size: 14px;
-    margin: -24px 20px 24px 24px;
-  }
-  &__spacing {
-    font-size: 14px;
-    margin: 12px 0;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts
index 79baebc68d..62d4c7ae93 100644
--- a/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts
+++ b/src/frontend/packages/core/src/shared/components/entity-summary-title/entity-summary-title.component.ts
@@ -11,7 +11,6 @@ import { CustomIconComponent } from '../custom-material/custom-material.componen
     CustomTooltipDirective
 ],
   templateUrl: './entity-summary-title.component.html',
-  styleUrls: ['./entity-summary-title.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EntitySummaryTitleComponent {

From e11ee121f283dbb96c3c1ad84a565fa0fca58e8c Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 15:27:27 -0700
Subject: [PATCH 05/27] Remove three more dead-rule Class B SCSS files

Manual verification across the git and cf-autoscaler packages caught
three additional files whose selectors are absent from their consumers'
templates. The classifier missed these because nested bare-tag rules
(`.parent__icon img { ... }`) were treated as live when any `<img>`
appears in the template, even when the `.parent__icon` wrapper itself
is absent.

Removed:
- git/.../git-endpoint-details.component.scss
- git/.../github-commit-author.component.scss
- cf-autoscaler/.../card-autoscaler-default.component.scss

Each .ts loses its styleUrls entry. No template changes. Production
build passes with 0 errors.

SCSS count in src/frontend/packages: 237 -> 234.
---
 .../card-autoscaler-default.component.scss    | 10 ---------
 .../card-autoscaler-default.component.ts      |  1 -
 .../git-endpoint-details.component.scss       | 22 -------------------
 .../git-endpoint-details.component.ts         |  1 -
 .../github-commit-author.component.scss       |  8 -------
 .../github-commit-author.component.ts         |  1 -
 6 files changed, 43 deletions(-)
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.scss
 delete mode 100644 src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.scss
 delete mode 100644 src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.scss

diff --git a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.scss b/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.scss
deleted file mode 100644
index 96e3d7bc25..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.card-autoscaler-default {
-  &__min-max {
-    display: flex;
-    flex-direction: row;
-
-    app-metadata-item {
-      padding-right: 10px;
-    }
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts b/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts
index f0d14fd4dd..b080ea5366 100644
--- a/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/shared/card-autoscaler-default/card-autoscaler-default.component.ts
@@ -22,7 +22,6 @@ import { AppAutoscalerPolicyLocal } from '../../store/app-autoscaler.types';
 @Component({
   selector: 'app-card-autoscaler-default',
   templateUrl: './card-autoscaler-default.component.html',
-  styleUrls: ['./card-autoscaler-default.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.scss b/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.scss
deleted file mode 100644
index e435ea343b..0000000000
--- a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.git-details {
-  display: flex;
-  flex-direction: column;
-
-  &__line {
-    align-items: center;
-    display: flex;
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-right: 8px;
-
-    img {
-      border-radius: 50%;
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
diff --git a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts b/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts
index 690a1c090b..6990739b95 100644
--- a/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts
+++ b/src/frontend/packages/git/src/shared/components/git-endpoint-details/git-endpoint-details.component.ts
@@ -11,7 +11,6 @@ import { GIT_ENDPOINT_SUB_TYPES } from '../../../store/git-entity-factory';
 @Component({
   selector: 'lib-git-endpoint-details',
   templateUrl: './git-endpoint-details.component.html',
-  styleUrls: ['./git-endpoint-details.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.scss b/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.scss
deleted file mode 100644
index cac91f778c..0000000000
--- a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.github-commit-author__core-author {
-  align-items: center;
-  display: flex;
-  img {
-    height: 30px;
-    padding-left: 10px;
-  }
-}
diff --git a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts b/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts
index 1d4b8eb219..0e782c3803 100644
--- a/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts
+++ b/src/frontend/packages/git/src/shared/components/github-commit-author/github-commit-author.component.ts
@@ -5,7 +5,6 @@ import { GitCommit } from '@stratosui/git';
 @Component({
   selector: 'app-github-commit-author',
   templateUrl: './github-commit-author.component.html',
-  styleUrls: ['./github-commit-author.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush

From 47fa9ca3fd54a1ee402cdcb8307ace6131c92960 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 15:35:56 -0700
Subject: [PATCH 06/27] Migrate seven Class B SCSS files in kubernetes package
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each file's class selectors flattened into the template, nested
bare-tag rules dropped (dead targets) or inlined onto matching
elements. Production build passes with 0 errors.

Per file:

panel.component
- 5 simple @apply classes (.panel, --background, --container, --border,
  __title) inlined; ngClass map switched from BEM names to utility
  strings so the conditional behavior is preserved.

catalog-tab.component
- 2 BEM classes (charts__repos--collapse, --expand) inlined via
  [ngClass]. `app-list { flex: 4 }` rule dropped — template uses
  <app-signal-list>, not <app-list>.

kubernetes-certs-auth-form.component
- .kube-certs-auth__content inlined as `flex flex-col gap-3 pt-4`.
  Nested textarea rule dropped — template-inlined `min-h-[200px]
  font-mono text-sm` overrode the SCSS-specified 60-75px range
  anyway. `> * { margin-bottom: 10px }` dropped — `gap-3` already
  provides equivalent inter-child spacing.

kubernetes-serviceaccount-auth-form.component
- .kube-sa-auth__form inlined as `flex flex-col`. Nested textarea
  rule (font, line-break) inlined onto the textarea as `font-mono
  [line-break:anywhere]`.

kubernetes-resource-list.component
- .sub-nav-menu-button / __btn inlined as `rounded ml-5 w-[200px]`
  on wrapper and `w-full leading-7 py-0 pr-2 pl-3` on the button.
  __icon class dropped (no rule). `.menu` and `.btn-wrapper` rules
  dropped — neither selector appears in the template.

kubernetes-resource-viewer.component
- .resource-preview__side-by-side inlined as `flex space-x-10`
  (replaces `app-metadata-item { margin-right: 40px }` nested rule).
  .resource-preview__header inlined as `flex justify-end`. Nested
  `mat-icon` rule dropped — template uses `<span class="material-
  icons">`, not <mat-icon>.

kubernetes-pod-containers.component
- .pod-container-icon inlined as `flex items-center h-15 w-[50px]`.
  Nested `mat-icon` rule dropped — template uses <span>, not
  <mat-icon>.

SCSS count in src/frontend/packages: 234 -> 227.
---
 .../helm/monocular/panel/panel.component.html |  4 ++--
 .../helm/monocular/panel/panel.component.scss | 21 -------------------
 .../helm/monocular/panel/panel.component.ts   |  1 -
 .../catalog-tab/catalog-tab.component.html    |  2 +-
 .../catalog-tab/catalog-tab.component.scss    | 15 -------------
 .../tabs/catalog-tab/catalog-tab.component.ts |  1 -
 .../kubernetes-certs-auth-form.component.html |  2 +-
 .../kubernetes-certs-auth-form.component.scss | 17 ---------------
 .../kubernetes-certs-auth-form.component.ts   |  1 -
 ...es-serviceaccount-auth-form.component.html |  4 ++--
 ...es-serviceaccount-auth-form.component.scss | 11 ----------
 ...etes-serviceaccount-auth-form.component.ts |  1 -
 .../kubernetes-resource-viewer.component.html |  6 +++---
 .../kubernetes-resource-viewer.component.scss | 21 -------------------
 .../kubernetes-resource-viewer.component.ts   |  1 -
 .../kubernetes-resource-list.component.html   |  6 +++---
 .../kubernetes-resource-list.component.scss   | 20 ------------------
 .../kubernetes-resource-list.component.ts     |  1 -
 .../kubernetes-pod-containers.component.html  |  2 +-
 .../kubernetes-pod-containers.component.scss  | 14 -------------
 .../kubernetes-pod-containers.component.ts    |  1 -
 21 files changed, 13 insertions(+), 139 deletions(-)
 delete mode 100644 src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss

diff --git a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html
index 7834d8d13d..6df50e1330 100644
--- a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html
+++ b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.html
@@ -1,6 +1,6 @@
-<div [ngClass]="{ 'panel': true, 'panel--background': background, 'panel--container': container, 'panel--border': border }">
+<div class="p-8" [ngClass]="{ 'bg-gray-50': background, 'w-4/5 mx-auto': container, 'rounded-lg border border-gray-300': border }">
   @if (title.length > 0) {
-    <h1 class="panel__title">{{ title }}</h1>
+    <h1 class="mt-0">{{ title }}</h1>
   }
   <ng-content></ng-content>
 </div>
diff --git a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.scss b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.scss
deleted file mode 100644
index 7dcc36e442..0000000000
--- a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@reference 'tailwindcss';
-
-.panel {
-  @apply p-8;
-}
-
-.panel--container {
-  @apply w-4/5 mx-auto;
-}
-
-.panel--background {
-  @apply bg-gray-50;
-}
-
-.panel--border {
-  @apply rounded-lg border border-gray-300;
-}
-
-.panel__title {
-  @apply mt-0;
-}
diff --git a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts
index d81a7dee13..37727c137f 100644
--- a/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts
+++ b/src/frontend/packages/kubernetes/src/helm/monocular/panel/panel.component.ts
@@ -5,7 +5,6 @@ import { CommonModule } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-panel',
   templateUrl: './panel.component.html',
-  styleUrls: ['./panel.component.scss'],
   standalone: true,
   imports: [CommonModule]
 })
diff --git a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html
index 1c5b2df260..97790a2cc4 100644
--- a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html
+++ b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.html
@@ -1,7 +1,7 @@
 <div class="flex flex-row max-h-full">
   @if (!hide) {
     <div class="flex flex-col max-h-full overflow-auto"
-      [ngClass]="{'charts__repos--collapse': collapsed, 'charts__repos--expand': !collapsed}">
+      [ngClass]="{'mr-0 min-w-0 w-0': collapsed, 'mr-2.5 min-w-[200px] w-auto': !collapsed}">
       <h3 class="text-base my-1.5">Filter By Repository</h3>
       <app-form-field>
         <input appInput placeholder="Filter by Repository" name="searchReposValue" [(ngModel)]="searchReposValue"
diff --git a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.scss b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.scss
deleted file mode 100644
index fce83190c9..0000000000
--- a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@reference 'tailwindcss';
-
-.charts__repos--collapse {
-  @apply mr-0 min-w-0 w-0;
-}
-
-.charts__repos--expand {
-  @apply mr-2.5;
-  min-width: 200px;
-  width: initial;
-}
-
-app-list {
-  flex: 4;
-}
diff --git a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts
index 2e84b9e2c5..170f33f259 100644
--- a/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts
+++ b/src/frontend/packages/kubernetes/src/helm/tabs/catalog-tab/catalog-tab.component.ts
@@ -22,7 +22,6 @@ import { ChartItemComponent } from '../../monocular/chart-item/chart-item.compon
 @Component({
   selector: 'app-catalog-tab',
   templateUrl: './catalog-tab.component.html',
-  styleUrls: ['./catalog-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html
index 82045278bc..208fe908ba 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html
@@ -14,7 +14,7 @@
         </div>
       </app-tab>
       <app-tab label="Certificate Content">
-        <div class="kube-certs-auth__content flex flex-col gap-3" spellcheck="false">
+        <div class="flex flex-col gap-3 pt-4" spellcheck="false">
           <span class="text-sm">Specify Certificate:</span>
           <textarea rows="8" formControlName="cert"
             class="w-full focus:outline-none min-h-[200px] resize-y font-mono text-sm border border-content-border rounded-md p-3 bg-content-bg focus:border-primary focus:ring-1 focus:ring-primary"></textarea>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss
deleted file mode 100644
index 5dee13973b..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@reference 'tailwindcss';
-
-.kube-certs-auth__content {
-  @apply flex flex-col pt-4;
-
-  > * {
-    margin-bottom: 10px;
-  }
-
-  textarea {
-    max-height: 75px;
-    min-height: 60px;
-    font-family: "Source Code Pro";
-    font-size: 14px;
-    line-break: anywhere;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts
index b64dad9b9e..c17c1bfe03 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.ts
@@ -14,7 +14,6 @@ interface CertsAuthForm {
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-certs-auth-form',
   templateUrl: './kubernetes-certs-auth-form.component.html',
-  styleUrls: ['./kubernetes-certs-auth-form.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html
index 5bc08070a4..f0730149ac 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="formGroup">
-  <div formGroupName="authValues" class="kube-sa-auth__form">
+  <div formGroupName="authValues" class="flex flex-col">
     <div class="text-sm mb-3">Token:</div>
     <textarea rows="10" appInput formControlName="token"
-      class="w-full focus:outline-none min-h-[200px] resize-y text-sm border border-content-border rounded-md p-3 bg-content-bg focus:border-primary focus:ring-1 focus:ring-primary"></textarea>
+      class="w-full focus:outline-none min-h-[200px] resize-y font-mono text-sm [line-break:anywhere] border border-content-border rounded-md p-3 bg-content-bg focus:border-primary focus:ring-1 focus:ring-primary"></textarea>
   </div>
 </div>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.scss
deleted file mode 100644
index c2b631009d..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@reference 'tailwindcss';
-
-.kube-sa-auth__form {
-  @apply flex flex-col;
-
-  textarea {
-    font-family: "Source Code Pro";
-    font-size: 14px;
-    line-break: anywhere;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts
index 41bebcde1e..17b0b993b8 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-serviceaccount-auth-form/kubernetes-serviceaccount-auth-form.component.ts
@@ -11,7 +11,6 @@ interface ServiceAccountAuthForm {
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-kubernetes-serviceaccount-auth-form',
   templateUrl: './kubernetes-serviceaccount-auth-form.component.html',
-  styleUrls: ['./kubernetes-serviceaccount-auth-form.component.scss'],
   standalone: true,
   imports: [ReactiveFormsModule]
 })
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html
index 0110a0bad4..f887e6cdfd 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.html
@@ -2,7 +2,7 @@
 
   @if (resource$ | async; as resource) {
     <div>
-      <div class="resource-preview__side-by-side">
+      <div class="flex space-x-10">
         <app-metadata-item label="API Version">{{ resource.apiVersion }}</app-metadata-item>
         <app-metadata-item label="Kind">{{ resource.kind | titlecase }}</app-metadata-item>
         <div class="flex items-center">
@@ -11,7 +11,7 @@
           }
         </div>
       </div>
-      <div class="resource-preview__side-by-side">
+      <div class="flex space-x-10">
         <app-metadata-item label="Created">{{ resource.creationTimestamp | date:'medium' }}</app-metadata-item>
         <app-metadata-item label="Age">{{ resource.age }}</app-metadata-item>
       </div>
@@ -48,7 +48,7 @@
 </app-sidepanel-preview>
 
 <ng-template #header>
-  <div class="resource-preview__header">
+  <div class="flex justify-end">
     <button class="btn-icon" name="delete" (click)="deleteWarn()" title="Delete">
       <span class="material-icons">delete</span>
     </button>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.scss
deleted file mode 100644
index b3b3dfd79b..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@reference 'tailwindcss';
-
-.resource-preview__side-by-side {
-  @apply flex;
-
-  app-metadata-item {
-    margin-right: 40px;
-  }
-}
-
-.resource-preview__header {
-  @apply flex justify-end;
-
-  mat-icon {
-    font-size: 20px;
-    height: 20px;
-    line-height: 20px;
-    opacity: 0.7;
-    width: 20px;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts
index 64b771b4c0..014e97a2aa 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource-viewer/kubernetes-resource-viewer.component.ts
@@ -63,7 +63,6 @@ interface KubernetesResourceViewerResource {
 @Component({
 selector: 'app-kubernetes-resource-viewer',
   templateUrl: './kubernetes-resource-viewer.component.html',
-  styleUrls: ['./kubernetes-resource-viewer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html
index 86e0cde658..c8766a4289 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.html
@@ -1,12 +1,12 @@
 <app-page-sub-nav>
   @if (namespaces$) {
-    <div class="sub-nav-menu-button">
+    <div class="rounded ml-5 w-[200px]">
       <div class="relative inline-block">
-        <button class="btn btn-ghost sub-nav-menu-button__btn"
+        <button class="btn btn-ghost w-full leading-7 py-0 pr-2 pl-3"
           [class.opacity-50]="!isNamespacedView"
           (click)="menuOpen = !menuOpen">
           @if (selectedNamespace) {
-            <span class="stratos-icons sub-nav-menu-button__icon">namespace</span>
+            <span class="stratos-icons">namespace</span>
           }
           <span class="flex-1 overflow-hidden text-left truncate whitespace-nowrap">{{ selectedNamespace || 'All namespaces'}}</span>
           <span class="material-symbols-outlined m-0 ml-2.5">arrow_drop_down</span>
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.scss
deleted file mode 100644
index 4cec86cec3..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@reference 'tailwindcss';
-
-.sub-nav-menu-button {
-  @apply rounded ml-5 w-[200px];
-
-  &__btn {
-    @apply w-full;
-    line-height: 28px;
-    padding: 0 8px 0 12px;
-
-    // Converted from Material button wrapper
-    .btn-wrapper {
-      @apply flex justify-start;
-    }
-  }
-}
-
-.menu {
-  @apply max-h-[400px] w-[180px];
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts
index 85cb92e012..0924ee7e38 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kubernetes-resource/kubernetes-resource-list/kubernetes-resource-list.component.ts
@@ -77,7 +77,6 @@ const namespaceColumnId = 'namespace';
 @Component({
   selector: 'app-kubernetes-resource-list',
   templateUrl: './kubernetes-resource-list.component.html',
-  styleUrls: ['./kubernetes-resource-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html
index 094d073adb..8ce95bf927 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html
@@ -2,7 +2,7 @@
   <div class="flex flex-col pl-[54px]">
     @for (container of containers; track container; let last = $last) {
       <div class="flex flex-row h-[100px]">
-        <div class="pod-container-icon">
+        <div class="flex items-center h-15 w-[50px]">
           @if (icon[container.isInit]; as iconDetail) {
             <span [class]="iconDetail.font"
               [ngClass]="{'pl-1': iconDetail.icon === 'container'}" [matTooltip]="iconDetail.tooltip">
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss
deleted file mode 100644
index daa5daa966..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@reference 'tailwindcss';
-
-/* Container icon — mat-icon sizing not expressible in Tailwind */
-.pod-container-icon {
-  @apply flex items-center;
-  height: 60px;
-  width: 50px;
-
-  mat-icon {
-    font-size: 35px;
-    height: 35px;
-    width: 35px;
-  }
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts
index 1e08bdcac4..8077af03ed 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts
@@ -19,7 +19,6 @@ export interface ContainerForTable {
 @Component({
   selector: 'app-kubernetes-pod-containers',
   templateUrl: './kubernetes-pod-containers.component.html',
-  styleUrls: ['./kubernetes-pod-containers.component.scss'],
   providers: [
     TitleCasePipe
   ],

From bf18b1591d85f70c2f7c360efc2b9c240ef86f88 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 15:46:59 -0700
Subject: [PATCH 07/27] Migrate three Class B SCSS files in cf-autoscaler
 package
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Audit-trail for dropped paths used class-attr / ngClass-literal-key
matching (not bare substring grep). The earlier substring approach
gave false positives against button IDs (e.g. autoscaler-policy-edit
matching id="autoscaler-policy-edit-edit") and Angular component
selectors (e.g. app-metadata matching <app-metadata-item>).

autoscaler-tab-extension.component
- 14 BEM/utility classes flattened to template (.autoscaler-tab,
  __actions, __latest-metrics, .app-metadata, .app-metadata-table,
  __two-cols, .app-autoscaler-tile-grid-100, .autoscaler-tab-table-
  no-record, .autoscaler-tile-events, __no-policy, __header,
  .nav-button-with-text, __span, __icon).
- Nested .app-metadata app-metadata-item / :first-child rules
  combined as `my-0` on the one app-metadata-item per iteration.
- Dropped as dead (verified absent from template):
  * .table-header:first-of-type — no `class="table-header"` in
    template; <th> elements have inline `px-6 py-3 ...` utilities
  * <table> / <td> bare-tag rules — tables have `min-w-full
    divide-y ...`; tds have `px-6 py-4 ...`; the SCSS w-full / pl-2
    were redundant or overridden
  * .autoscaler-tile-events__header .card-title — no .card-title
    class; element is <app-card-title> Angular component (parent's
    emulated-encapsulation SCSS cannot pierce into the child
    component's rendered output)
  * .autoscaler-tile-events__header button — only direct child
    under <app-card-header class="autoscaler-tile-events__header">
    is <app-card-title>, no <button>

edit-autoscaler-policy-step3.component
- ALL 10 SCSS classes (radio-outer-circle, app-autoscaler-tile-grid-
  100, autoscaler-policy-edit, __actions, app-metadata, __two-cols,
  autoscaler-policy-edit-recurring, form-field-left, form-field-30,
  form-field-50) are absent from the template (which uses .card,
  .card-header, .card-title, .form-group, .label, .input, .radio,
  .radio-label, etc.). File is fully dead — delete + drop styleUrls.

edit-autoscaler-policy-step4.component
- ALL 8 SCSS classes are absent from the template (same disposition
  as step3). File is fully dead — delete + drop styleUrls.

Production build passes with 0 errors.
SCSS count in src/frontend/packages: 227 -> 224.
---
 .../autoscaler-tab-extension.component.html   | 64 +++++++--------
 .../autoscaler-tab-extension.component.scss   | 78 -------------------
 .../autoscaler-tab-extension.component.ts     |  1 -
 ...dit-autoscaler-policy-step3.component.scss | 39 ----------
 .../edit-autoscaler-policy-step3.component.ts |  1 -
 ...dit-autoscaler-policy-step4.component.scss | 39 ----------
 .../edit-autoscaler-policy-step4.component.ts |  1 -
 7 files changed, 32 insertions(+), 191 deletions(-)
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.scss
 delete mode 100644 src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.scss

diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html
index 58554e5239..3f2ce164f5 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html
+++ b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.html
@@ -1,32 +1,32 @@
 <app-page-sub-nav>
   @if (appAutoscalerPolicy$ | async; as policy) {
-    <button class="btn nav-button-with-text" name="edit" (click)="updatePolicyPage()">
-      <span class="nav-button-with-text__span">
-        <app-custom-icon class="nav-button-with-text__icon">edit</app-custom-icon> Edit Policy
+    <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="edit" (click)="updatePolicyPage()">
+      <span class="flex items-center">
+        <app-custom-icon class="mr-1.5">edit</app-custom-icon> Edit Policy
       </span>
     </button>
-    <button class="btn nav-button-with-text" name="delete" (click)="disableAutoscaler()">
-      <span class="nav-button-with-text__span">
-        <app-custom-icon class="nav-button-with-text__icon">delete</app-custom-icon> Delete Policy
+    <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="delete" (click)="disableAutoscaler()">
+      <span class="flex items-center">
+        <app-custom-icon class="mr-1.5">delete</app-custom-icon> Delete Policy
       </span>
     </button>
     @if (canManageCredentials()) {
-      <button class="btn nav-button-with-text" name="credential" (click)="manageCredentialPage()">
-        <span class="nav-button-with-text__span">
-          <app-custom-icon class="nav-button-with-text__icon">vpn_key</app-custom-icon> Manage Credentials
+      <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="credential" (click)="manageCredentialPage()">
+        <span class="flex items-center">
+          <app-custom-icon class="mr-1.5">vpn_key</app-custom-icon> Manage Credentials
         </span>
       </button>
     }
   } @else {
-    <button class="btn nav-button-with-text" name="add" (click)="updatePolicyPage(true)">
-      <span class="nav-button-with-text__span">
-        <app-custom-icon class="nav-button-with-text__icon">add</app-custom-icon> Create Policy
+    <button class="btn my-0 mr-2.5 ml-0 py-0 px-1.5" name="add" (click)="updatePolicyPage(true)">
+      <span class="flex items-center">
+        <app-custom-icon class="mr-1.5">add</app-custom-icon> Create Policy
       </span>
     </button>
   }
 </app-page-sub-nav>
-<div class="autoscaler-tab">
-  <app-tile-grid class="app-autoscaler-tile-grid-100">
+<div class="flex relative w-full">
+  <app-tile-grid class="w-full">
     @if (appAutoscalerPolicy$ | async; as policy) {
       <app-tile-group>
         @if (policy.enabled) {
@@ -35,7 +35,7 @@
           </app-tile>
         }
         @if (policy.enabled) {
-          <app-tile class="autoscaler-tab__latest-metrics">
+          <app-tile class="flex-[2] min-h-[200px]">
             @if (policy.scaling_rules.length === 0) {
               <app-card-app-usage></app-card-app-usage>
             }
@@ -45,10 +45,10 @@
                   <app-card-title>Latest Metrics</app-card-title>
                 </app-card-header>
                 <app-card-content>
-                  <div class="app-metadata">
+                  <div class="flex flex-row">
                     @for (metric of appAutoscalerAppMetricNames$ | async; track metric) {
-                      <div class="app-metadata__two-cols">
-                        <app-metadata-item label={{metric.name}}>
+                      <div class="pr-10">
+                        <app-metadata-item class="my-0" label={{metric.name}}>
                           @if (appAutoscalerAppMetrics[metric.name] | async; as metricData) {
                             <canvas baseChart [type]="'doughnut'"
                               [data]="getGaugeData(metricData)"
@@ -61,7 +61,7 @@
                     }
                   </div>
                 </app-card-content>
-                <app-card-actions class="autoscaler-tab__actions">
+                <app-card-actions class="absolute bottom-2.5 right-6 pt-0 text-right">
                   <app-polling-indicator [manualPoll]="true" (poll)="loadLatestMetricsUponPolicy()">
                   </app-polling-indicator>
                   <button (click)="metricChartPage()" class="btn btn-icon" aria-label="Open metric chart">
@@ -84,7 +84,7 @@
                   <app-card-title>Scaling Rules </app-card-title>
                 </app-card-header>
                 <app-card-content>
-                  <div class="app-metadata app-metadata-table">
+                  <div class="block pb-2">
                     <div class="overflow-x-auto">
                       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                         <thead class="bg-gray-50 dark:bg-gray-800">
@@ -120,7 +120,7 @@
                       </table>
                     </div>
                     @if (policy && policy.scaling_rules_form && policy.scaling_rules_form.length === 0) {
-                      <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                      <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                         >No scaling rules.
                       </div>
                     }
@@ -141,7 +141,7 @@
                   </app-card-title>
                 </app-card-header>
                 <app-card-content>
-                  <div class="app-metadata app-metadata-table autoscaler-table-policy-specific">
+                  <div class="block pb-2 autoscaler-table-policy-specific">
                     <div class="overflow-x-auto">
                       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                         <thead class="bg-gray-50 dark:bg-gray-800">
@@ -188,13 +188,13 @@
                       </table>
                     </div>
                     @if (policy && policy.schedules && policy.schedules.specific_date && policy.schedules.specific_date.length === 0) {
-                      <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                      <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                         >
                       No specific date schedule.</div>
                     }
                   </div>
                   <br />
-                  <div class="app-metadata app-metadata-table autoscaler-table-policy-recurring">
+                  <div class="block pb-2 autoscaler-table-policy-recurring">
                     <div class="overflow-x-auto">
                       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                         <thead class="bg-gray-50 dark:bg-gray-800">
@@ -253,7 +253,7 @@
                       </table>
                     </div>
                     @if (policy && policy.schedules && policy.schedules.specific_date && policy.schedules.recurring_schedule.length === 0) {
-                      <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                      <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                         >
                       No recurring schedule.</div>
                     }
@@ -266,20 +266,20 @@
       </div>
     }
     @if (showAutoscalerHistory$ | async) {
-      <app-tile-group class="autoscaler-tile-events">
+      <app-tile-group class="flex-col">
         @if ((appAutoscalerPolicy$ | async) === false) {
-          <span class="autoscaler-tile-events__no-policy">
+          <span class="flex items-center mb-3 p-3.5">
             {{noPolicyMessageFirstLine}}. {{noPolicyMessageSecondLine.text}}
           </span>
         }
         @if (appAutoscalerScalingHistory$ | async; as scalingHistory) {
           <app-tile>
             <app-card>
-              <app-card-header class="autoscaler-tile-events__header">
+              <app-card-header class="flex flex-1 h-10 justify-between pt-0">
                 <app-card-title>Latest Events </app-card-title>
               </app-card-header>
               <app-card-content>
-                <div class="app-metadata app-metadata-table">
+                <div class="block pb-2">
                   <div class="overflow-x-auto">
                     <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                       <thead class="bg-gray-50 dark:bg-gray-800">
@@ -320,13 +320,13 @@
                     </table>
                   </div>
                   @if (scalingHistory.length === 0) {
-                    <div class="autoscaler-tab-table-no-record text-center py-8 text-gray-500 dark:text-gray-400"
+                    <div class="mt-2 text-center py-8 text-gray-500 dark:text-gray-400"
                       >
                     No events.</div>
                   }
                 </div>
               </app-card-content>
-              <app-card-actions class="autoscaler-tab__actions">
+              <app-card-actions class="absolute bottom-2.5 right-6 pt-0 text-right">
                 <app-polling-indicator (poll)="fetchScalingHistory()"
                   [manualPoll]="(scalingHistoryLoading$ | async) === false"
                   [isPolling]="(scalingHistoryLoading$ | async)">
@@ -346,4 +346,4 @@
       </app-no-content-message>
     }
   </app-tile-grid>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss
deleted file mode 100644
index 940c93ce5d..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-@reference 'tailwindcss';
-
-.autoscaler-tab {
-  @apply flex relative w-full;
-  &__actions {
-    @apply absolute bottom-2.5 right-6 pt-0 text-right;
-  }
-  .table-header:first-of-type {
-    @apply pl-0;
-  }
-  .autoscaler-tab-table-no-record {
-    @apply mt-2;
-  }
-
-  &__latest-metrics {
-    @apply flex-[2] min-h-[200px];
-  }
-}
-
-
-.app-metadata {
-  @apply flex flex-row;
-  &__two-cols {
-    @apply pr-10;
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-  app-metadata-item {
-    @apply mb-0;
-  }
-}
-
-.app-metadata-table {
-  @apply block pb-2;
-}
-
-.app-autoscaler-tile-grid-100 {
-  @apply w-full;
-}
-
-table {
-  @apply w-full;
-  td {
-    @apply pl-2;
-  }
-}
-
-.autoscaler-tile-events {
-  @apply flex-col;
-
-  &__no-policy {
-    @apply flex items-center mb-3 p-3.5;
-  }
-
-  &__header {
-    @apply flex flex-1 h-10 justify-between pt-0;
-
-    .card-title {
-      @apply mb-0;
-    }
-
-    button {
-      @apply -mr-2.5 -mt-2.5;
-    }
-  }
-}
-.nav-button-with-text {
-  @apply my-0 mr-2.5 ml-0 py-0 px-1.5;
-
-  &__span {
-    @apply flex items-center;
-  }
-
-  &__icon {
-    @apply mr-1.5;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts
index 9ee6308bad..2f74d39508 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/autoscaler-tab-extension/autoscaler-tab-extension.component.ts
@@ -112,7 +112,6 @@ interface AutoscalerTabPaginationParams {
 @Component({
   selector: 'app-autoscaler-tab-extension',
   templateUrl: './autoscaler-tab-extension.component.html',
-  styleUrls: ['./autoscaler-tab-extension.component.scss'],
   providers: [
     ApplicationMonitorService
   ],
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.scss
deleted file mode 100644
index 9a1df000ad..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@reference 'tailwindcss';
-
-.radio-outer-circle {
-  @apply h-[15px] w-[15px] top-[2.5px];
-}
-
-.app-autoscaler-tile-grid-100 {
-  @apply w-full;
-}
-
-.autoscaler-policy-edit {
-  @apply flex relative w-full;
-  &__actions {
-    @apply absolute bottom-2.5 right-6 pt-0 text-right;
-  }
-}
-
-.app-metadata {
-  @apply flex flex-row;
-  &__two-cols {
-    @apply flex-1 mr-12;
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-}
-
-.autoscaler-policy-edit-recurring {
-  @apply max-w-full;
-  .form-field-left {
-    @apply mr-2;
-  }
-  .form-field-30 {
-    @apply w-[30%];
-  }
-  .form-field-50 {
-    @apply w-1/2;
-  }
-}
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts
index dde057d61d..f416ff0670 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts
@@ -39,7 +39,6 @@ interface EditRecurringScheduleForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step3',
   templateUrl: './edit-autoscaler-policy-step3.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step3.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: TailwindErrorStateMatcher, useClass: TailwindShowOnDirtyErrorStateMatcher }
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.scss b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.scss
deleted file mode 100644
index 9b08a0e02d..0000000000
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.app-autoscaler-tile-grid-100 {
-  width: 100%;
-}
-
-.autoscaler-policy-edit {
-  display: flex;
-  position: relative;
-  width: 100%;
-  &__actions {
-    bottom: 10px;
-    padding-top: 0;
-    position: absolute;
-    right: 24px;
-    text-align: right;
-  }
-}
-
-.app-metadata {
-  display: flex;
-  flex-direction: row;
-  &__two-cols {
-    flex: 1;
-    margin-right: 3em;
-    app-metadata-item:first-child {
-      margin-top: 0;
-    }
-  }
-}
-
-.autoscaler-policy-edit-specific {
-  max-width: 100%;
-  .form-field-left {
-    margin-right: 0.5em;
-  }
-  .form-field-30 {
-    width: 30%;
-  }
-}
-
diff --git a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts
index df3204dee4..89272ecf1e 100644
--- a/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts
+++ b/src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step4/edit-autoscaler-policy-step4.component.ts
@@ -40,7 +40,6 @@ interface EditSpecificDateForm {
 @Component({
   selector: 'app-edit-autoscaler-policy-step4',
   templateUrl: './edit-autoscaler-policy-step4.component.html',
-  styleUrls: ['./edit-autoscaler-policy-step4.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

From 31ade961c4b5acb407bf6b37face7a12da2dfb40 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 15:49:30 -0700
Subject: [PATCH 08/27] Remove dead-rule table-cell-select-org SCSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.form-field { @apply pt-1.5 } targets a class that does not appear in
the template. The template uses <app-form-field> Angular component,
which is a selector, not a `.form-field` CSS class — and Angular's
emulated encapsulation prevents the parent's SCSS from reaching into
the child component's rendered output.

Production build passes with 0 errors.
SCSS count in src/frontend/packages: 224 -> 223.
---
 .../table-cell-select-org.component.scss                     | 5 -----
 .../table-cell-select-org/table-cell-select-org.component.ts | 1 -
 2 files changed, 6 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.scss
deleted file mode 100644
index b4023948ac..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-.form-field {
-  @apply pt-1.5;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts
index 56585bbefe..01ebb6a9d9 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users-org-space-roles/table-cell-select-org/table-cell-select-org.component.ts
@@ -20,7 +20,6 @@ import { CfUsersRolesDataService } from '../../../../../../services/domain-data/
 @Component({
   selector: 'app-table-cell-select-org',
   templateUrl: './table-cell-select-org.component.html',
-  styleUrls: ['./table-cell-select-org.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [

From e9298f617362ba174dcfd7abd2ddb1f68cde98e3 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 16:26:07 -0700
Subject: [PATCH 09/27] Migrate five Class B SCSS files in cloud-foundry (batch
 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Verified each dropped path with class-attr / ngClass-literal-key
matching against the template. Production build passes with 0
errors. SCSS count: 223 -> 218.

table-cell-edit-variable.component
- .cell-edit-variable -> w-full
- .cell-value-variable -> cursor-pointer
- Dropped .form-field .form-field-infix (no .form-field in template;
  <app-form-field> is an Angular component selector, not a CSS class)

cli-info.component
- .cli-info -> flex flex-col h-full w-full
- .cli-info__content -> flex-1 pb-12
- Dropped .cli-info__footer (not in template)

service-icon.component
- .service-icon -> self-end flex
- .service-icon__padding (conditional via [ngClass]) -> pr-6
- Nested rule for img/mat-icon/app-custom-icon/.custom-icon sizing
  inlined on the matching elements: <app-custom-icon> gets
  `text-[48px] h-12 w-12`; <img> gets `h-12 w-12` (font-size no-op
  on img). Dropped mat-icon and .custom-icon target selectors —
  not in template.

table-cell-service.component
- div > div top-level rule inlined as `pb-[5px]` on each direct-
  child <div> (5 elements) — preserves original padding-bottom
  behavior including for the last child.
- .broker -> flex (2 occurrences)
- Nested app-table-cell-service-broker pl-[5px] inlined on the
  2 <app-table-cell-service-broker> elements inside .broker.

gitscm-tab.component
- .gitscm-tab__deployment__commit-warning -> flex flex-row
- .gitscm-tab__deployment__commit-warning__msg -> pl-6
- .gitscm-tab__repo__name -> flex items-center break-all
- .gitscm-tab__repo__name a -> flex-1 (on the <a> inside)
- .gitscm-tab__repo__name--icon -> text-[18px] h-[18px] leading-
  [18px] ml-[5px] mr-0 w-[18px]
- Dropped class-only-no-rule selectors (.gitscm-tab,
  __deployment, __deployment__commit, __avatar — no styling)
---
 .../tabs/gitscm-tab/gitscm-tab.component.html | 20 ++++++-------
 .../tabs/gitscm-tab/gitscm-tab.component.scss | 30 -------------------
 .../tabs/gitscm-tab/gitscm-tab.component.ts   |  1 -
 .../cli-info/cli-info.component.html          |  4 +--
 .../cli-info/cli-info.component.scss          | 14 ---------
 .../components/cli-info/cli-info.component.ts |  1 -
 .../table-cell-edit-variable.component.html   |  4 +--
 .../table-cell-edit-variable.component.scss   | 15 ----------
 .../table-cell-edit-variable.component.ts     |  1 -
 .../table-cell-service.component.html         | 16 +++++-----
 .../table-cell-service.component.scss         | 10 -------
 .../table-cell-service.component.ts           |  1 -
 .../service-icon/service-icon.component.html  |  8 ++---
 .../service-icon/service-icon.component.scss  | 15 ----------
 .../service-icon/service-icon.component.ts    |  1 -
 15 files changed, 26 insertions(+), 115 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html
index fc65149fbe..b47ae8e539 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.html
@@ -1,7 +1,7 @@
 <app-loading-page [isLoading]="isLoading$" text="Retrieving Git Details">
   <div>
     @if (hasRepo$ | async; as hasRepo) {
-      <app-tile-grid class="gitscm-tab">
+      <app-tile-grid>
         <app-tile-group class="tile-group-3-cols">
           @if (data.stratosProject(); as stratosProject) {
             <app-tile>
@@ -10,7 +10,7 @@
                   <h3 class="text-lg font-semibold">Deployment Information</h3>
                 </div>
                 <div class="card-body">
-                  <div class="gitscm-tab__deployment">
+                  <div>
                     <app-metadata-item label="Repository">
                       <a href="{{(gitSCMRepo$ | async)?.html_url}}"
                       target="_blank">{{stratosProject.deploySource.project }}</a>
@@ -21,7 +21,7 @@ <h3 class="text-lg font-semibold">Deployment Information</h3>
                         {{ stratosProject.deploySource.branch}}
                       </a>
                     </app-metadata-item>
-                    <div class="gitscm-tab__deployment__commit">
+                    <div>
                       <div>
                         <app-metadata-item label="Commit">
                           <a href="{{(commit$ | async)?.html_url}}"
@@ -29,11 +29,11 @@ <h3 class="text-lg font-semibold">Deployment Information</h3>
                         </app-metadata-item>
                       </div>
                       @if ((isHead$ | async) === false) {
-                        <div class="gitscm-tab__deployment__commit-warning">
+                        <div class="flex flex-row">
                           <div>
                             <span class="material-icons text-yellow-500">warning</span>
                           </div>
-                          <div class="gitscm-tab__deployment__commit-warning__msg">The
+                          <div class="pl-6">The
                             {{ stratosProject.deploySource.branch }}
                           branch has been updated since this app was deployed. Redeploy to update</div>
                         </div>
@@ -51,17 +51,17 @@ <h3 class="text-lg font-semibold">Deployment Information</h3>
               <div class="card">
                 <div class="card-header flex items-center justify-between">
                   <h3 class="text-lg font-semibold">Repository Details</h3>
-                  <div class="gitscm-tab__avatar">
+                  <div>
                     <img src={{gitSCMRepo.owner.avatar_url}} alt="Repository owner avatar" class="h-12 w-12 rounded-full">
                   </div>
                 </div>
                 <div class="card-body">
                   <div>
                     <app-metadata-item label="Full Name">
-                      <div class="gitscm-tab__repo__name">
-                        <a href="{{ gitSCMRepo.html_url }}" target="_blank">{{ gitSCMRepo.full_name }}</a>
+                      <div class="flex items-center break-all">
+                        <a class="flex-1" href="{{ gitSCMRepo.html_url }}" target="_blank">{{ gitSCMRepo.full_name }}</a>
                         @if (gitSCMRepo.private) {
-                          <span class="material-icons gitscm-tab__repo__name--icon"
+                          <span class="material-icons text-[18px] h-[18px] leading-[18px] ml-[5px] mr-0 w-[18px]"
                             title="Private Repo">
                           lock</span>
                         }
@@ -89,7 +89,7 @@ <h3 class="text-lg font-semibold">Repository Details</h3>
               <div class="card">
                 <div class="card-header flex items-center justify-between">
                   <h3 class="text-lg font-semibold">Commit Details</h3>
-                  <div class="gitscm-tab__avatar">
+                  <div>
                     <img src={{commitInfo.author.avatar_url}} alt="Commit author avatar" class="h-12 w-12 rounded-full">
                   </div>
                 </div>
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.scss
deleted file mode 100644
index 855a8110f2..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.gitscm-tab {
-  &__deployment {
-    &__commit-warning {
-      display: flex;
-      flex-flow: row;
-    }
-    &__commit-warning__msg {
-      padding-left: 24px;
-    }
-  }
-
-  &__repo {
-    &__name {
-      align-items: center;
-      display: flex;
-      word-break: break-all;
-      a {
-        flex: 1;
-      }
-      &--icon {
-        font-size: 18px;
-        height: 18px;
-        line-height: 18px;
-        margin-left: 5px;
-        margin-right: 0;
-        width: 18px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts
index 605d0ab3f6..28974673a9 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/gitscm-tab/gitscm-tab.component.ts
@@ -38,7 +38,6 @@ import { TruncatePipe } from '../../../../../../../../core/src/core/truncate.pip
 @Component({
   selector: 'app-gitscm-tab',
   templateUrl: './gitscm-tab.component.html',
-  styleUrls: ['./gitscm-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html
index c44c022c07..0519f58379 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.html
@@ -1,6 +1,6 @@
 @if (context) {
-  <div class="cli-info">
-    <div class="cli-info__content">
+  <div class="flex flex-col h-full w-full">
+    <div class="flex-1 pb-12">
       <div>
         <p>Use the Cloud Foundry CLI to execute commands directly against a Cloud Foundry instance.</p>
         <h4>Getting Started</h4>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.scss
deleted file mode 100644
index f563b221f2..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.cli-info {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  &__content {
-    flex: 1;
-    padding-bottom: 48px;
-  }
-  &__footer {
-    flex: 0 0 36px;
-    text-align: right;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts
index 76e462bfa6..9f9ae4dcbb 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cli-info/cli-info.component.ts
@@ -14,7 +14,6 @@ export interface CFAppCLIInfoContext {
 @Component({
   selector: 'app-cli-info',
   templateUrl: './cli-info.component.html',
-  styleUrls: ['./cli-info.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html
index 8ebac27716..20e1031228 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.html
@@ -1,11 +1,11 @@
 @if (row.name === dataSource.editRow?.name) {
-  <div class="cell-edit-variable">
+  <div class="w-full">
     <input class="input" name="envVarValue" [value]="dataSource.editRow?.value"
       (input)="dataSource.editRow.value = $event.target.value" />
   </div>
 }
 @if (row.name !== dataSource.editRow?.name) {
-  <span class="cell-value-variable" role="button" tabindex="0"
+  <span class="cursor-pointer" role="button" tabindex="0"
     (click)="showPopup()"
     (keydown.enter)="showPopup()"
     (keydown.space)="showPopup(); $event.preventDefault()">{{row.value}}</span>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.scss
deleted file mode 100644
index 8719056b30..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@reference 'tailwindcss';
-
-.form-field {
-  .form-field-infix {
-    @apply w-auto;
-  }
-}
-
-.cell-edit-variable {
-  @apply w-full;
-}
-
-.cell-value-variable {
-  @apply cursor-pointer;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts
index 8c32683ab3..d94625b2d9 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/table-cell-edit-variable/table-cell-edit-variable.component.ts
@@ -7,7 +7,6 @@ import { ListAppEnvVar } from '../cf-app-variables.types';
 @Component({
   selector: 'app-table-cell-edit-variable',
   templateUrl: './table-cell-edit-variable.component.html',
-  styleUrls: ['./table-cell-edit-variable.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: []
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
index 22a412e9fc..bdbc39e167 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.html
@@ -1,19 +1,19 @@
 @if (isUserProvidedServiceInstance === true) {
   <div>
-    <div>User Provided</div>
+    <div class="pb-[5px]">User Provided</div>
   </div>
 }
 @if (isUserProvidedServiceInstance === false) {
   <div>
-    <div><a [routerLink]="serviceUrl$ | async">{{ serviceName$ | async }}</a></div>
-    <div>Plan: {{ row.entity.service_plan?.entity.name }}</div>
-    <div class="broker">
-      Broker: <app-table-cell-service-broker [row]="service$ | async" [config]="brokerNameConfig">
+    <div class="pb-[5px]"><a [routerLink]="serviceUrl$ | async">{{ serviceName$ | async }}</a></div>
+    <div class="pb-[5px]">Plan: {{ row.entity.service_plan?.entity.name }}</div>
+    <div class="pb-[5px] flex">
+      Broker: <app-table-cell-service-broker class="pl-[5px]" [row]="service$ | async" [config]="brokerNameConfig">
     </app-table-cell-service-broker>
   </div>
-  <div class="broker">
-    Scope: <app-table-cell-service-broker [row]="service$ | async" [config]="brokerScopeConfig">
+  <div class="pb-[5px] flex">
+    Scope: <app-table-cell-service-broker class="pl-[5px]" [row]="service$ | async" [config]="brokerScopeConfig">
   </app-table-cell-service-broker>
 </div>
 </div>
-}
\ No newline at end of file
+}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
deleted file mode 100644
index d28afe7bc1..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-div > div {
-  padding-bottom: 5px;
-}
-
-.broker {
-  display: flex;
-  app-table-cell-service-broker {
-    padding-left: 5px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
index 5afba7409a..9f2482c236 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-spaces-service-instances/table-cell-service/table-cell-service.component.ts
@@ -22,7 +22,6 @@ import {
 @Component({
   selector: 'app-table-cell-service',
   templateUrl: './table-cell-service.component.html',
-  styleUrls: ['./table-cell-service.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html
index 7726ea0cf8..92193a882e 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.html
@@ -1,8 +1,8 @@
-<div class='service-icon' [ngClass]="{'service-icon__padding': addMenuPadding}">
+<div class="self-end flex" [ngClass]="{'pr-6': addMenuPadding}">
   @if (!image) {
-    <app-custom-icon [fontSet]="'stratos-icons'">service</app-custom-icon>
+    <app-custom-icon class="text-[48px] h-12 w-12" [fontSet]="'stratos-icons'">service</app-custom-icon>
   }
   @if (image) {
-    <img [src]="image" (error)="imageLoadError()" alt="">
+    <img class="h-12 w-12" [src]="image" (error)="imageLoadError()" alt="">
   }
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.scss
deleted file mode 100644
index b0e96ddd6c..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.service-icon {
-  align-self: flex-end;
-  display: flex;
-  &__padding {
-    padding-right: 24px;
-  }
-  img,
-  mat-icon,
-  app-custom-icon,
-  .custom-icon {
-    font-size: 48px;
-    height: 48px;
-    width: 48px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts
index 2d1a5dffb6..392d873d4a 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-icon/service-icon.component.ts
@@ -7,7 +7,6 @@ import { StServiceOffering } from '../../../services/endpoint-data/stratos-types
 @Component({
   selector: 'app-service-icon',
   templateUrl: './service-icon.component.html',
-  styleUrls: ['./service-icon.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [

From 43f12ce390806922c550a8c51e46f8456439ac6e Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 16:31:10 -0700
Subject: [PATCH 10/27] Migrate five more Class B SCSS files in cloud-foundry
 (batch 2)

Each class verified live or dead with class-attr / ngClass-literal-key
matching. Production build passes with 0 errors. SCSS count: 218 -> 213.

cloud-foundry-cell-summary.component
- .cell-summary__summary -> mb-5
- .cell-summary__summary__app-metadata -> flex flex-row
- .cell-summary__summary__app-metadata--twoCols -> flex-1
- Nested app-metadata-item:first-child mt-0 -> applied to the first
  <app-metadata-item> in each twoCols div (2 elements)
- Dropped class-only-no-rule .cell-summary, __usage, __health

cf-admin-add-user-warning.component
- .user-warning -> items-center flex text-sm mb-3 px-[22px] py-3
- .user-warning__icon -> text-[22px] mr-[13px]

application-delete.component
- .app-delete__monitors -> flex flex-col w-full (4 occurrences)
- .app-delete__step-table -> w-full (2 occurrences)
- Dropped .app-delete__monitor (no class= match in template)

cf-service-card.component
- .service-card__title -> flex flex-row justify-between w-full
- Dropped .service-card (no own rule, just a parent BEM anchor)
- Dropped .service-card__icon-link and .service-card__title__link
  (no class= match in template)

add-service-instance-base-step.component
- .select-service-step -> w-full
- .select-service-step__help -> pb-[10px]
---
 .../application-delete.component.html         | 12 +++++------
 .../application-delete.component.scss         | 14 -------------
 .../application-delete.component.ts           |  1 -
 .../cf-admin-add-user-warning.component.html  |  4 ++--
 .../cf-admin-add-user-warning.component.scss  | 12 -----------
 .../cf-admin-add-user-warning.component.ts    |  1 -
 .../cloud-foundry-cell-summary.component.html | 16 +++++++-------
 .../cloud-foundry-cell-summary.component.scss | 21 -------------------
 .../cloud-foundry-cell-summary.component.ts   |  1 -
 ...-service-instance-base-step.component.html |  4 ++--
 ...-service-instance-base-step.component.scss |  6 ------
 ...dd-service-instance-base-step.component.ts |  1 -
 .../cf-service-card.component.html            |  6 +++---
 .../cf-service-card.component.scss            | 13 ------------
 .../cf-service-card.component.ts              |  1 -
 15 files changed, 21 insertions(+), 92 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html
index 2e55a367f0..96ec165ea4 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.html
@@ -9,13 +9,13 @@ <h1>Delete application</h1>
          on each step — the stepper subscribes to onHidden changes and
          re-filters its visible step list reactively. -->
     <app-step title="Routes" [hidden]="!routesLoaded() || appRoutes().length === 0" [signalHandle]="routesStepHandle">
-      <div class="app-delete__monitors">
+      <div class="flex flex-col w-full">
         <p>Please select any attached application routes you would like to delete.</p>
         <div class="mt-3 rounded border border-content-border p-4">
           <h2 class="text-xl font-semibold text-content-text m-0">{{ appName() || 'Application' }}</h2>
           <h3 class="text-sm font-medium text-content-muted mt-2 mb-1 uppercase tracking-wide">Routes</h3>
           <app-routes-picker
-            class="app-delete__step-table"
+            class="w-full"
             [routes]="appRoutes()"
             (selectedChange)="setSelectedRoutes($event)">
           </app-routes-picker>
@@ -23,21 +23,21 @@ <h3 class="text-sm font-medium text-content-muted mt-2 mb-1 uppercase tracking-w
       </div>
     </app-step>
     <app-step title="Service Instances" [hidden]="!bindingsLoaded() || appBindings().length === 0" [signalHandle]="bindingsStepHandle">
-      <div class="app-delete__monitors">
+      <div class="flex flex-col w-full">
         <p>Please select any attached application service instances you would like to unbind.</p>
         <div class="mt-3 rounded border border-content-border p-4">
           <h2 class="text-xl font-semibold text-content-text m-0">{{ appName() || 'Application' }}</h2>
           <h3 class="text-sm font-medium text-content-muted mt-2 mb-1 uppercase tracking-wide">Service Instances</h3>
           <app-service-bindings-picker
-            class="app-delete__step-table"
+            class="w-full"
             [bindings]="appBindings()"
             (selectedChange)="setSelectedServiceBindings($event)">
           </app-service-bindings-picker>
         </div>
       </div>
     </app-step>
-    <app-step title="Confirm" class="app-delete__monitors" [signalHandle]="confirmStepHandle">
-      <div class="app-delete__monitors">
+    <app-step title="Confirm" class="flex flex-col w-full" [signalHandle]="confirmStepHandle">
+      <div class="flex flex-col w-full">
         <p>Please confirm that you would like to delete the following application@if ((selectedRoutes && selectedRoutes.length) || (selectedServiceBindings && selectedServiceBindings.length)) {
           <span
             >
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.scss
deleted file mode 100644
index 00005ae58a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.app-delete {
-  &__step-table {
-    width: 100%;
-  }
-  &__monitors {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  &__monitor {
-    margin-bottom: 15px;
-    max-width: 60%;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts
index fec7d6b5cf..50c8740895 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.ts
@@ -24,7 +24,6 @@ import { AppServiceBindingsPickerComponent } from './app-service-bindings-picker
 @Component({
   selector: 'app-application-delete',
   templateUrl: './application-delete.component.html',
-  styleUrls: ['./application-delete.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html
index b8f789b7a6..3d131588fd 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.html
@@ -1,6 +1,6 @@
 @if (show$ | async) {
-  <app-card class="user-warning">
-    <span class="material-icons user-warning__icon">warning</span>There are too many users to show those without roles. To add a
+  <app-card class="items-center flex text-sm mb-3 px-[22px] py-3">
+    <span class="material-icons text-[22px] mr-[13px]">warning</span>There are too many users to show those without roles. To add a
     user to this {{isOrg ? 'organization' : 'space'}} please use the `Manage Roles By Username` button above
   </app-card>
 }
\ No newline at end of file
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.scss
deleted file mode 100644
index 0e265f156c..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.user-warning {
-  align-items: center;
-  display: flex;
-  font-size: 14px;
-  margin-bottom: 12px;
-  padding: 12px 22px;
-
-  &__icon {
-    font-size: 22px;
-    margin-right: 13px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts
index b1516de807..325ba94d83 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-admin-add-user-warning/cf-admin-add-user-warning.component.ts
@@ -12,7 +12,6 @@ import { waitForCFPermissions } from '../../cf.helpers';
 @Component({
   selector: 'app-cf-admin-add-user-warning',
   templateUrl: './cf-admin-add-user-warning.component.html',
-  styleUrls: ['./cf-admin-add-user-warning.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html
index 664f66305d..6760a403da 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.html
@@ -1,16 +1,16 @@
-<app-card class="cell-summary__summary">
+<app-card class="mb-5">
   <app-card-status [status$]="status$"></app-card-status>
   <app-card-content>
-    <div class="cell-summary__summary__app-metadata">
-      <div class="cell-summary__summary__app-metadata--twoCols">
-        <app-metadata-item icon="perm_identity" label="ID">{{ (cfCellService.cellMetric$ | async)?.bosh_job_id}}</app-metadata-item>
+    <div class="flex flex-row">
+      <div class="flex-1">
+        <app-metadata-item class="mt-0" icon="perm_identity" label="ID">{{ (cfCellService.cellMetric$ | async)?.bosh_job_id}}</app-metadata-item>
         <app-metadata-item icon="perm_identity" label="Name">{{ (cfCellService.cellMetric$ | async)?.bosh_job_name}}</app-metadata-item>
         @if ((cfCellService.cellMetric$ | async)?.bosh_deployment; as bosh_deployment) {
           <app-metadata-item icon="perm_identity" label="Deployment">{{ bosh_deployment }}</app-metadata-item>
         }
       </div>
-      <div class="cell-summary__summary__app-metadata--twoCols">
-        <app-metadata-item icon="wallpaper" label="Environment">{{ (cfCellService.cellMetric$ | async)?.environment}}</app-metadata-item>
+      <div class="flex-1">
+        <app-metadata-item class="mt-0" icon="wallpaper" label="Environment">{{ (cfCellService.cellMetric$ | async)?.environment}}</app-metadata-item>
         <app-metadata-item icon="local_hospital" label="Healthy" matTooltip="Has the cell passed the garden backend health check?">
           <app-boolean-indicator [isTrue]="(status$ | async) === 'ok'" type="yes-no" [subtle]="false" [showText]="true"></app-boolean-indicator>
         </app-metadata-item>
@@ -22,7 +22,7 @@
   </app-card-content>
 </app-card>
 
-<app-tile-grid [fit]="false" class="cell-summary__usage">
+<app-tile-grid [fit]="false">
   <app-tile-group class="tile-group-3-cols">
     <app-tile>
       <app-card-number-metric icon="memory" label="Memory" units="mb" value="{{ cfCellService.usageMemory$ | async}} " limit="{{ cfCellService.totalMemory$ | async}}"></app-card-number-metric>
@@ -36,7 +36,7 @@
   </app-tile-group>
 </app-tile-grid>
 
-<div class="cell-summary__health">
+<div>
   @if (healthListConfig(); as cfg) {
     <app-signal-list [config]="cfg"></app-signal-list>
   }
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.scss
deleted file mode 100644
index 316cf9bff2..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.cell-summary {
-
-  &__summary {
-    margin-bottom: 20px;
-
-    &__app-metadata {
-      display: flex;
-      flex-direction: row;
-
-      &--twoCols {
-        flex: 1;
-
-        app-metadata-item:first-child {
-          margin-top: 0;
-        }
-      }
-    }
-  }
-
-
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts
index db77531e5c..a7ab60ba97 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-cells/cloud-foundry-cell/cloud-foundry-cell-summary/cloud-foundry-cell-summary.component.ts
@@ -30,7 +30,6 @@ import { CardNumberMetricComponent } from '../../../../../../../../core/src/shar
 @Component({
   selector: 'app-cloud-foundry-cell-summary',
   templateUrl: './cloud-foundry-cell-summary.component.html',
-  styleUrls: ['./cloud-foundry-cell-summary.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html
index 20a2ba742b..56268d8440 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.html
@@ -3,9 +3,9 @@
 </app-page-header>
 <app-steppers [cancel]="cancelUrl">
   <app-step [hideNextButton]="true">
-    <div class="select-service-step">
+    <div class="w-full">
       <h3>Choose service type to {{ bindApp ? 'bind' : 'create' }}</h3>
-      <p class="select-service-step__help">
+      <p class="pb-[10px]">
         Want to know more? Follow the links for information about <a
           href="https://docs.cloudfoundry.org/devguide/services/" target="_blank">marketplace services</a> and <a
           href="https://docs.cloudfoundry.org/devguide/services/user-provided.html" target="_blank">user provided
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.scss
deleted file mode 100644
index bc1f60623e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.select-service-step {
-  width: 100%;
-  &__help {
-    padding-bottom: 10px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts
index 9b9645d8f4..20cf556707 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance-base-step/add-service-instance-base-step.component.ts
@@ -22,7 +22,6 @@ interface ICreateServiceTilesData extends ITileData {
 @Component({
   selector: 'app-add-service-instance-base-step',
   templateUrl: './add-service-instance-base-step.component.html',
-  styleUrls: ['./add-service-instance-base-step.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
index f5960550b5..6a69831e4c 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html
@@ -1,9 +1,9 @@
 @if (!!offering) {
-  <app-meta-card class="service-card" [clickAction]="!disableCardClick ? goToServiceInstances:null"
+  <app-meta-card [clickAction]="!disableCardClick ? goToServiceInstances:null"
     >
     <app-meta-card-title noMargin="true">
-      <div class="service-card__title">
-        <app-multiline-title class="service-card__title__link">{{ getDisplayName() }}</app-multiline-title>
+      <div class="flex flex-row justify-between w-full">
+        <app-multiline-title>{{ getDisplayName() }}</app-multiline-title>
         <app-service-icon [service]="offering"></app-service-icon>
       </div>
     </app-meta-card-title>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss
deleted file mode 100644
index 6d53ccf4ed..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.service-card {
-  &__title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-  }
-  &__icon-link {
-    align-items: center;
-    display: flex;
-    text-decoration: none;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
index a90e4142ef..077f9a7682 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts
@@ -32,7 +32,6 @@ import { TableCellServiceTagsComponent } from '../table-cell-service-tags/table-
 @Component({
   selector: 'app-cf-service-card',
   templateUrl: './cf-service-card.component.html',
-  styleUrls: ['./cf-service-card.component.scss'],
   providers: [EntityServiceFactory],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,

From 8cf4c82a1a464ed8d8e206f59251ace642dd7319 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 16:43:27 -0700
Subject: [PATCH 11/27] Migrate four more Class B SCSS files in cloud-foundry
 (batch 3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Class-attr / ngClass-literal-key matching used to verify live/dead.
Production build passes with 0 errors. SCSS count: 213 -> 209.

cloud-foundry-invite-user-link.component
- .invite-user-details -> mb-3 px-6 py-1.5
- .invite-user-details__text -> pr-[5px]
- .invite-user-details__content -> flex items-baseline
- Dropped .invite-user-details__button (no rule defined)

cf-endpoint-details.component
- .cf-details -> flex flex-col
- .cf-details__line -> flex items-center
- .cf-details__icon -> flex items-center justify-center mr-2

env-var-view.component
- .env-var-view -> flex flex-col
- .env-var-view__content__key -> mb-0
- .env-var-view__content__value -> mt-0 whitespace-pre-wrap
- .env-var-view__actions -> flex flex-row-reverse justify-self-start
- Dropped class-only-no-rule .env-var-view__content

service-summary-card.component
- .service-summary__title -> flex flex-row justify-between
- .service-summary__description -> leading-normal (CSS 1.5em line-
  height ≡ unitless 1.5 multiplier for non-inheriting context)
- Dropped class-only-no-rule .service-summary, __title__link
---
 ...oud-foundry-invite-user-link.component.html |  8 ++++----
 ...oud-foundry-invite-user-link.component.scss | 12 ------------
 ...cloud-foundry-invite-user-link.component.ts |  1 -
 .../service-summary-card.component.html        |  8 ++++----
 .../service-summary-card.component.scss        | 10 ----------
 .../service-summary-card.component.ts          |  1 -
 .../cf-endpoint-details.component.html         |  6 +++---
 .../cf-endpoint-details.component.scss         | 16 ----------------
 .../cf-endpoint-details.component.ts           |  1 -
 .../env-var-view/env-var-view.component.html   | 10 +++++-----
 .../env-var-view/env-var-view.component.scss   | 18 ------------------
 .../env-var-view/env-var-view.component.ts     |  1 -
 12 files changed, 16 insertions(+), 76 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html
index 877dc6f34c..d2df8cfe3f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.html
@@ -1,9 +1,9 @@
 @if ((inviteUserDetails$ | async); as inviteUserDetails) {
-  <app-card class="invite-user-details">
+  <app-card class="mb-3 px-6 py-1.5">
     <app-card-content>
-      <div class="invite-user-details__content">
-        <div class="invite-user-details__text">{{inviteUserDetails.text}}</div>
-        <button class="btn btn-ghost invite-user-details__button"
+      <div class="flex items-baseline">
+        <div class="pr-[5px]">{{inviteUserDetails.text}}</div>
+        <button class="btn btn-ghost"
           (click)="inviteUser(inviteUserDetails.url)">Invite
         Users</button>
       </div>
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.scss
deleted file mode 100644
index 5c8a7a057b..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.invite-user-details {
-  margin-bottom: 12px;
-  padding: 6px 24px;
-
-  &__text {
-    padding-right: 5px;
-  }
-  &__content {
-    align-items: baseline;
-    display: flex;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts
index 4324f1283d..247a3798cc 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-invite-user-link/cloud-foundry-invite-user-link.component.ts
@@ -17,7 +17,6 @@ interface UserInviteStepperLink {
 @Component({
   selector: 'app-cloud-foundry-invite-user-link',
   templateUrl: './cloud-foundry-invite-user-link.component.html',
-  styleUrls: ['./cloud-foundry-invite-user-link.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html
index 949ae5a03e..8eb9a8a11b 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.html
@@ -1,15 +1,15 @@
 @let v = view();
 
-<app-meta-card class="service-summary">
+<app-meta-card>
   <app-meta-card-title>
-    <div class="service-summary__title">
-      <div class="service-summary__title__link">Summary</div>
+    <div class="flex flex-row justify-between">
+      <div>Summary</div>
     </div>
   </app-meta-card-title>
   <app-meta-card-item customStyle="long-text">
     <app-meta-card-key></app-meta-card-key>
     <app-meta-card-value>
-      <span class="service-summary__description">
+      <span class="leading-normal">
         {{ v.description }}
       </span>
     </app-meta-card-value>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.scss
deleted file mode 100644
index 3b151b37b0..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.service-summary {
-  &__title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-  &__description {
-    line-height: 1.5em;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts
index 76a311ddeb..de0032d5fd 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/service-summary-card/service-summary-card.component.ts
@@ -44,7 +44,6 @@ interface SummaryView {
 @Component({
   selector: 'app-service-summary-card',
   templateUrl: './service-summary-card.component.html',
-  styleUrls: ['./service-summary-card.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html
index 55ac5a3ee4..be031863c4 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.html
@@ -1,7 +1,7 @@
 @if (row?.user; as user) {
-  <div class="cf-details">
-    <div class="cf-details__line">
-      <span class="cf-details__icon" matTooltip="Username">
+  <div class="flex flex-col">
+    <div class="flex items-center">
+      <span class="flex items-center justify-center mr-2" matTooltip="Username">
         <span class="material-icons">person</span>
       </span>
       {{ user.name}} @if (user.admin) {
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss
deleted file mode 100644
index 4a125b2a60..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.cf-details {
-  display: flex;
-  flex-direction: column;
-
-  &__line {
-    align-items: center;
-    display: flex;
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-right: 8px;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts
index 0611266337..473b92a681 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts
@@ -5,7 +5,6 @@ import { CustomTooltipDirective, EndpointListDetailsComponent } from '@stratosui
 @Component({
   selector: 'lib-cf-endpoint-details',
   templateUrl: './cf-endpoint-details.component.html',
-  styleUrls: ['./cf-endpoint-details.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html
index 76fe4773cd..764fe6665e 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.html
@@ -1,21 +1,21 @@
-<div class="env-var-view">
+<div class="flex flex-col">
   <h2 class="dialog-title">
     Environment Variables
   </h2>
-  <div class="dialog-content env-var-view__content">
+  <div class="dialog-content">
     <app-code-block>
       <ng-container>
-        <pre class="env-var-view__content__key">{{data.key}}=@if (!isObject(data.value)) {
+        <pre class="mb-0">{{data.key}}=@if (!isObject(data.value)) {
           <span>{{data.value}}</span>
         }</pre>
         @if (isObject(data.value)) {
-          <pre class="env-var-view__content__value">{{ data.value | json }}</pre>
+          <pre class="mt-0 whitespace-pre-wrap">{{ data.value | json }}</pre>
         }
       </ng-container>
     </app-code-block>
   </div>
 
-  <div class="dialog-actions env-var-view__actions">
+  <div class="dialog-actions flex flex-row-reverse justify-self-start">
     <button class="btn btn-primary" (click)="dialogRef.close()">Close</button>
   </div>
 </div>
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.scss
deleted file mode 100644
index c72d472100..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.env-var-view {
-  display: flex;
-  flex-direction: column;
-  &__content {
-    &__value {
-      margin-top: 0;
-      white-space: pre-wrap;
-    }
-    &__key {
-      margin-bottom: 0;
-    }
-  }
-  &__actions {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-self: flex-start;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts
index c0f72e9923..54606b40e1 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/env-var-view/env-var-view.component.ts
@@ -6,7 +6,6 @@ import { MAT_DIALOG_DATA, TailwindDialogRef, CodeBlockComponent } from '@stratos
 @Component({
   selector: 'app-env-var-view',
   templateUrl: './env-var-view.component.html',
-  styleUrls: ['./env-var-view.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [

From 7ec6400cb82cfb83f7ca3a0ff0fcf839da24e915 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 17:13:22 -0700
Subject: [PATCH 12/27] Migrate five more Class B SCSS files in cloud-foundry
 (batch 4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Class-attr / ngClass-literal-key matching used to verify live/dead.
Production build passes with 0 errors. SCSS count: 209 -> 204.

card-cf-info.component
- .app-metadata -> flex flex-row
- .app-metadata__two-cols -> flex-1 (first app-metadata-item gets mt-0)
- .app-metadata__address -> flex min-h-6
- .app-metadata__address__value -> items-center flex mr-7 break-all
- .user-invites button (nested) -> [line-height:initial] m-0
  min-w-[auto] p-0 inlined on each <button> (2 buttons). Wrapper
  .user-invites class dropped (no own rule).

card-cf-org-user-details.component / card-cf-space-details.component
- .app-metadata -> flex flex-row
- .app-metadata__two-cols -> flex-1 (first app-metadata-item gets mt-0)
- .card-title -> font-medium (locally scoped — verified no global
  .card-title rule in core/cloud-foundry/theme; only same-pattern
  component-scoped rules exist elsewhere)

service-instance-last-op.component
- .last-op--row1 -> items-center flex pb-[5px] + conditional
  justify-end/justify-start via [ngClass] (replaces the
  `.align-right .last-op--row1` descendant override)
- .last-op--item -> conditional pl-[5px] pr-0 / pr-[5px] via
  [ngClass] on each <app-boolean-indicator> (2 elements)
- Dropped class-only-no-rule .last-op, .align-right, .last-op--row2

application-action-bar.component
- .summary__sub-nav -> flex w-full
- .summary__actions -> flex
- .summary__anchor -> flex justify-center (on <a>)
- Dropped .summary__sub-nav__poll (no class= match in template)
---
 .../application-action-bar.component.html     |  6 ++--
 .../application-action-bar.component.scss     | 23 -------------
 .../application-action-bar.component.ts       |  1 -
 .../card-cf-info/card-cf-info.component.html  | 20 ++++++------
 .../card-cf-info/card-cf-info.component.scss  | 32 -------------------
 .../card-cf-info/card-cf-info.component.ts    |  1 -
 .../card-cf-org-user-details.component.html   | 12 +++----
 .../card-cf-org-user-details.component.scss   | 17 ----------
 .../card-cf-org-user-details.component.ts     |  1 -
 .../card-cf-space-details.component.html      | 12 +++----
 .../card-cf-space-details.component.scss      | 17 ----------
 .../card-cf-space-details.component.ts        |  1 -
 .../service-instance-last-op.component.html   | 12 +++----
 .../service-instance-last-op.component.scss   | 21 ------------
 .../service-instance-last-op.component.ts     |  1 -
 15 files changed, 31 insertions(+), 146 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html
index 13ea580f0b..c7a09b2c10 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.html
@@ -1,7 +1,7 @@
 <app-page-sub-nav>
-  <div class="summary__sub-nav">
+  <div class="flex w-full">
     @if (applicationService.appSpace$ | async; as space) {
-      <div class="summary__actions">
+      <div class="flex">
         <ng-container
           *appCfUserPermission="manageAppPermission;spaceGuid:space.guid;endpointGuid:applicationService.cfGuid">
           <app-page-sub-nav-section>
@@ -54,7 +54,7 @@
         </ng-container>
       </div>
     }
-    <a class="summary__anchor btn btn-info btn-icon"
+    <a class="flex justify-center btn btn-info btn-icon"
       [class.pointer-events-none]="(applicationService.applicationUrl$ | async) === null || (applicationService.application$ | async)?.app.entity.state !== 'STARTED'"
       [class.opacity-50]="(applicationService.applicationUrl$ | async) === null || (applicationService.application$ | async)?.app.entity.state !== 'STARTED'"
       href="{{applicationService.applicationUrl$ | async}}" target="_blank" title="Visit">
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.scss
deleted file mode 100644
index 05b075a2ba..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Styles preserved verbatim from build-tab.component.scss for the moved
-// sub-nav block. Byte-equivalent rendering on the Summary tab depends on
-// these class names matching the original layout exactly.
-.summary {
-  &__actions {
-    display: flex;
-  }
-  &__sub-nav {
-    display: flex;
-    width: 100%;
-
-    &__poll {
-      display: flex;
-      flex: 1;
-      justify-content: flex-end;
-    }
-  }
-
-  &__anchor {
-    display: flex;
-    justify-content: center;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts
index 48160b56c4..d2bad164eb 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/application-action-bar/application-action-bar.component.ts
@@ -30,7 +30,6 @@ import { AppLifecycleProgressService } from '../app-lifecycle-progress/app-lifec
 @Component({
   selector: 'app-application-action-bar',
   templateUrl: './application-action-bar.component.html',
-  styleUrls: ['./application-action-bar.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html
index 6fbf67f7b0..dccbb90be3 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.html
@@ -1,12 +1,12 @@
 <div class="usage-card">
   <div class="custom-card">
     <div class="card-content">
-      <div class="app-metadata">
-        <div class="app-metadata__two-cols">
-          <app-metadata-item icon="title" label="Description">{{ description() }}</app-metadata-item>
+      <div class="flex flex-row">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" icon="title" label="Description">{{ description() }}</app-metadata-item>
           <app-metadata-item icon="link" label="Instance Address" [clipboardValue]="apiUrl()">
-            <div class="app-metadata__address">
-              <div class="app-metadata__address__value">{{ apiUrl() }}</div>
+            <div class="flex min-h-6">
+              <div class="items-center flex mr-7 break-all">{{ apiUrl() }}</div>
             </div>
           </app-metadata-item>
           <app-metadata-item icon="info_outline" label="CF API Version">
@@ -17,8 +17,8 @@
             {{ v }}</app-metadata-item>
           }
         </div>
-        <div class="app-metadata__two-cols">
-          <app-metadata-item icon="person" label="Account Username">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" icon="person" label="Account Username">
             {{ endpointInfo()?.entity?.user?.name }}
             @if (endpointInfo()?.entity?.user?.admin) {
               <span> (Administrator)</span>
@@ -27,12 +27,12 @@
           <app-metadata-item icon="virtual_guest" iconFont="stratos-icons" label="SSH Access">
           {{ hasSSHAccess() ? 'Available' : 'Not available' }}</app-metadata-item>
           <app-metadata-item icon="email" label="User Invitation Support">
-            <div class="user-invites">
+            <div>
               @if (canConfigureInvites()) {
                 @if (invitesConfigured()) {
-                  Configured - <button class="btn btn-ghost" (click)="deConfigureUserInvites()">Disable</button>
+                  Configured - <button class="btn btn-ghost [line-height:initial] m-0 min-w-[auto] p-0" (click)="deConfigureUserInvites()">Disable</button>
                 } @else {
-                  Not Configured - <button class="btn btn-ghost"
+                  Not Configured - <button class="btn btn-ghost [line-height:initial] m-0 min-w-[auto] p-0"
                   (click)="configureUserInvites()">Configure</button>
                 }
               } @else {
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.scss
deleted file mode 100644
index 065f26c240..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.app-metadata {
-  display: flex;
-  flex-direction: row;
-
-  &__two-cols {
-    flex: 1;
-
-    app-metadata-item:first-child {
-      margin-top: 0;
-    }
-  }
-
-  &__address {
-    display: flex;
-    min-height: 24px;
-    &__value {
-      align-items: center;
-      display: flex;
-      margin-right: 28px;
-      word-break: break-all;
-    }
-  }
-}
-
-.user-invites {
-  button {
-    line-height: initial;
-    margin: 0;
-    min-width: auto;
-    padding: 0;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts
index 56f7e022a0..70286f2e2f 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-info/card-cf-info.component.ts
@@ -22,7 +22,6 @@ import { UserInviteConfigureService, UserInviteService } from '../../../../featu
 @Component({
   selector: 'app-card-cf-info',
   templateUrl: './card-cf-info.component.html',
-  styleUrls: ['./card-cf-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html
index 6c381cee80..d8c9b66221 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.html
@@ -1,12 +1,12 @@
 <div class="cf-org-usage">
   <div class="custom-card">
     <div class="card-header">
-      <h2 class="card-title">Summary</h2>
+      <h2 class="font-medium">Summary</h2>
     </div>
     <div class="card-content">
-      <div class="app-metadata">
-        <div class="app-metadata__two-cols">
-          <app-metadata-item label="User Org Role">
+      <div class="flex flex-row">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" label="User Org Role">
             {{ (cfOrgService.userOrgRole$ | async) }}
           </app-metadata-item>
           <app-metadata-item label="Quota Definition">
@@ -20,8 +20,8 @@ <h2 class="card-title">Summary</h2>
           </app-metadata-item>
         </div>
 
-        <div class="app-metadata__two-cols">
-          <app-metadata-item label="Org Status">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" label="Org Status">
             {{ cfOrgService.orgDataService.org()?.status | capitalizeFirst }}
           </app-metadata-item>
           <app-metadata-item label="Created At">
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss
deleted file mode 100644
index 27bc592cd3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@reference 'tailwindcss';
-
-.app-metadata {
-  @apply flex flex-row;
-
-  &__two-cols {
-    @apply flex-1;
-
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-}
-
-.card-title {
-  @apply font-medium;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts
index 039198e33c..a006352ef2 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-org-user-details/card-cf-org-user-details.component.ts
@@ -12,7 +12,6 @@ import { CapitalizeFirstPipe } from '@stratosui/core';
 @Component({
   selector: 'app-card-cf-org-user-details',
   templateUrl: './card-cf-org-user-details.component.html',
-  styleUrls: ['./card-cf-org-user-details.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html
index 5fc760b467..f03c6a1323 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.html
@@ -1,12 +1,12 @@
 <div class="cf-space-usage">
   <div class="custom-card">
     <div class="card-header">
-      <h2 class="card-title">Summary</h2>
+      <h2 class="font-medium">Summary</h2>
     </div>
     <div class="card-content">
-      <div class="app-metadata">
-        <div class="app-metadata__two-cols">
-          <app-metadata-item label="User Space Role/s">
+      <div class="flex flex-row">
+        <div class="flex-1">
+          <app-metadata-item class="mt-0" label="User Space Role/s">
             {{ (cfSpaceService.userRole$ | async) }}
           </app-metadata-item>
           <app-metadata-item label="Quota Definition">
@@ -29,8 +29,8 @@ <h2 class="card-title">Summary</h2>
           </app-boolean-indicator>
         </app-metadata-item>
       </div>
-      <div class="app-metadata__two-cols">
-        <app-metadata-item label="SSH Access">
+      <div class="flex-1">
+        <app-metadata-item class="mt-0" label="SSH Access">
           {{ allowSshStatus$ | async }}
         </app-metadata-item>
         <app-metadata-item label="Created At">
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss
deleted file mode 100644
index 27bc592cd3..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@reference 'tailwindcss';
-
-.app-metadata {
-  @apply flex flex-row;
-
-  &__two-cols {
-    @apply flex-1;
-
-    app-metadata-item:first-child {
-      @apply mt-0;
-    }
-  }
-}
-
-.card-title {
-  @apply font-medium;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts
index f27f5ac1f5..9cec255f2b 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/cards/card-cf-space-details/card-cf-space-details.component.ts
@@ -12,7 +12,6 @@ import { CloudFoundrySpaceService } from '../../../../features/cf/services/cloud
 @Component({
   selector: 'app-card-cf-space-details',
   templateUrl: './card-cf-space-details.component.html',
-  styleUrls: ['./card-cf-space-details.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html
index db9e58a3b0..e10587e629 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.html
@@ -1,16 +1,16 @@
 @if (serviceInstance.entity.last_operation; as lo) {
-  <div class="last-op" [ngClass]="{ 'align-right': alignRight}">
-    <div class="last-op--row1">
+  <div>
+    <div class="items-center flex pb-[5px]" [ngClass]="alignRight ? 'justify-end' : 'justify-start'">
       {{lo.type | titlecase }}
       @if (lo.state==='in progress') {
-        <app-boolean-indicator class="last-op--item" [isTrue]="true"
+        <app-boolean-indicator [ngClass]="alignRight ? 'pl-[5px] pr-0' : 'pr-[5px]'" [isTrue]="true"
         type="progress-progress" [subtle]="false" [showText]="false"></app-boolean-indicator>
       } @else {
-        <app-boolean-indicator class="last-op--item" [isTrue]="lo.state==='succeeded'" type="yes-no" [subtle]="false"
+        <app-boolean-indicator [ngClass]="alignRight ? 'pl-[5px] pr-0' : 'pr-[5px]'" [isTrue]="lo.state==='succeeded'" type="yes-no" [subtle]="false"
           [showText]="false">
         </app-boolean-indicator>
       }
     </div>
-    <div class="last-op--row2">{{ lo.updated_at | date:'medium' }}</div>
+    <div>{{ lo.updated_at | date:'medium' }}</div>
   </div>
-}
\ No newline at end of file
+}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.scss
deleted file mode 100644
index 4445e48872..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.last-op {
-  &--row1 {
-    align-items: center;
-    display: flex;
-    justify-content: flex-start;
-    padding-bottom: 5px;
-  }
-  &--item {
-    padding-right: 5px;
-  }
-}
-
-.align-right {
-  .last-op--row1 {
-    justify-content: flex-end;
-  }
-  .last-op--item {
-    padding-left: 5px;
-    padding-right: 0;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts
index 2a28237d67..65f4cc6545 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/service-instance-last-op/service-instance-last-op.component.ts
@@ -8,7 +8,6 @@ import { IServiceInstance } from '../../../cf-api-svc.types';
 @Component({
   selector: 'app-service-instance-last-op',
   templateUrl: './service-instance-last-op.component.html',
-  styleUrls: ['./service-instance-last-op.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [

From 87417a2f64b06191742a0e3428cc8ffa2ab6a5cc Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Wed, 20 May 2026 17:26:50 -0700
Subject: [PATCH 13/27] Migrate three final Class B SCSS files in cloud-foundry
 (batch 5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This empties cloud-foundry Class B. Production build passes with 0
errors. SCSS count: 204 -> 201.

build-tab.component
- .summary__staging-error -> items-center flex (nested mat-icon
  rule dropped — template uses <span class="material-icons">)
- .app-metadata -> flex flex-row
- .app-metadata__two-cols -> flex-1 (first app-metadata-item: mt-0)
- .cli-link -> mt-6
- .summary__gitscm -> flex; nested `div { flex: 1 }` inlined as
  flex-1 on each of the 2 inner <div>s; nested `app-metadata-item:
  first-of-type { mt-0 }` inlined on the first <app-metadata-item>
  in each div
- Dropped dead .summary, __cards, __card, __large, __tile_actions,
  __actions, __sub-nav, __sub-nav__poll, __anchor (none of these
  selectors appear as class= in this template — the build-tab file
  was a copy-paste of application-action-bar styles before the
  sub-nav block was moved out to its own component; comment in the
  original .scss already flags this. Verified no class= matches.)

deploy-application-fs.component
- .deploy-app-local__title -> font-semibold my-6 (2 occurrences)
- .deploy-app-local__input -> h-0 invisible w-0 (2 occurrences)
- .deploy-app-local__info -> mt-6
- .deploy-app-local__indicator -> items-center flex mb-3 (2
  occurrences); nested mat-icon rule dropped — template uses <span
  class="material-icons">, not <mat-icon>
- .deploy-app-local__next -> pt-6
- Nested `button { margin: 0 1px }` -> mx-px inlined on the 2
  <button class="btn btn-primary"> elements
- Dropped .deploy-app-local parent (no own rule)

quota-definition-base.component (cross-consumer)
- This .scss is loaded by two sibling consumer components via
  ../quota-definition-base/... relative styleUrls — neither has its
  own .scss. Both consumer templates flattened identically:
    quota-definition.component.html
    space-quota-definition.component.html
- .quota-definition-base parent class dropped from both (no own
  rule); the page-scope classes (.quota-definition-page,
  .space-quota-definition-page) kept on the wrapper div in case
  consumers add their own styling later.
- Replacements (all replace_all on both templates):
    __name-sub-text    -> text-sm opacity-60
    __name             -> m-0
    __basic-services   -> flex my-2
    __basic-services-label -> mr-[10px] opacity-60
    __title            -> my-[10px]
    __section-header   -> my-[10px] opacity-60
- styleUrls entry removed from both consumer .ts files; the .scss
  is deleted.
---
 .../tabs/build-tab/build-tab.component.html   | 26 +++----
 .../tabs/build-tab/build-tab.component.scss   | 71 -------------------
 .../tabs/build-tab/build-tab.component.ts     |  1 -
 .../deploy-application-fs.component.html      | 22 +++---
 .../deploy-application-fs.component.scss      | 31 --------
 .../deploy-application-fs.component.ts        |  1 -
 .../quota-definition-base.component.scss      | 24 -------
 .../quota-definition.component.html           | 20 +++---
 .../quota-definition.component.ts             |  1 -
 .../space-quota-definition.component.html     | 20 +++---
 .../space-quota-definition.component.ts       |  1 -
 11 files changed, 44 insertions(+), 174 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/quota-definition-base/quota-definition-base.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html
index 82c80dabfd..089e678c87 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.html
@@ -1,5 +1,5 @@
 @if (data.appDetail(); as detail) {
-  <div class="summary">
+  <div>
     <app-tile-grid>
       <app-tile-group class="tile-group-3-cols">
         <app-tile>
@@ -17,7 +17,7 @@
       @if (detail.build?.error; as errorMsg) {
         <app-tile-group class="tile-group-1-cols">
           <app-tile>
-            <div class="card bg-yellow-50 border-yellow-400 border-l-4 summary__staging-error">
+            <div class="card bg-yellow-50 border-yellow-400 border-l-4 items-center flex">
               <span class="material-icons text-yellow-500">warning</span>
               <div>{{ errorMsg }}</div>
             </div>
@@ -31,9 +31,9 @@
               <h3 class="text-lg font-semibold">Application Info</h3>
             </div>
             <div class="card-body">
-              <div class="app-metadata">
-                <div class="app-metadata__two-cols">
-                  <app-metadata-item icon="memory" label="Memory Quota">{{ detail.process?.memoryMb | mbToHumanSize }}
+              <div class="flex flex-row">
+                <div class="flex-1">
+                  <app-metadata-item class="mt-0" icon="memory" label="Memory Quota">{{ detail.process?.memoryMb | mbToHumanSize }}
                   </app-metadata-item>
                   <app-metadata-item icon="storage" label="Disk Quota">{{ detail.process?.diskMb | mbToHumanSize }}
                   </app-metadata-item>
@@ -46,8 +46,8 @@ <h3 class="text-lg font-semibold">Application Info</h3>
                     {{ sshStatus$ | async }}
                   </app-metadata-item>
                 </div>
-                <div class="app-metadata__two-cols">
-                  <app-metadata-item icon="touch_app" label="App State">{{ detail.app.state }}</app-metadata-item>
+                <div class="flex-1">
+                  <app-metadata-item class="mt-0" icon="touch_app" label="App State">{{ detail.app.state }}</app-metadata-item>
                   <app-metadata-item icon="card_travel" label="Package State">{{ detail.pkg?.state ?? '-' }}
                   </app-metadata-item>
                   <app-metadata-item icon="service" iconFont="stratos-icons" label="Services">
@@ -98,7 +98,7 @@ <h3 class="text-lg font-semibold">Cloud Foundry</h3>
                 }
               </app-metadata-item>
               @if (data.org()) {
-                <app-metadata-item icon="keyboard" label="CLI Info" class="cli-link">
+                <app-metadata-item icon="keyboard" label="CLI Info" class="mt-6">
                   <a [routerLink]="['/applications/' + applicationService.cfGuid + '/' + detail.app.guid + '/cli']">View</a>
                 </app-metadata-item>
               }
@@ -140,9 +140,9 @@ <h3 class="text-lg font-semibold">Deployment Info</h3>
                     </app-metadata-item>
                   }
                   @case ('gitscm') {
-                    <div class="summary__gitscm">
-                      <div>
-                        <app-metadata-item [iconFont]="deploySource.icon.fontName" [icon]="deploySource.icon.iconName"
+                    <div class="flex">
+                      <div class="flex-1">
+                        <app-metadata-item class="mt-0" [iconFont]="deploySource.icon.fontName" [icon]="deploySource.icon.iconName"
                           label="SCM">
                           {{deploySource.label}}
                         </app-metadata-item>
@@ -157,8 +157,8 @@ <h3 class="text-lg font-semibold">Deployment Info</h3>
                           }
                         </app-metadata-item>
                       </div>
-                      <div>
-                        <app-metadata-item icon="call_split" label="Branch">
+                      <div class="flex-1">
+                        <app-metadata-item class="mt-0" icon="call_split" label="Branch">
                           @if (!!(gitRepo$ | async)) {
                             <a href="{{ (gitRepo$ | async)?.html_url }}/tree/{{ deploySource.branch }}" rel="noopener noreferrer"
                               target="_blank">
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss
deleted file mode 100644
index b70214592a..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.summary {
-  &__cards {
-    display: flex;
-    $summary-card-spacing: 20px;
-    flex-wrap: wrap;
-    margin: auto;
-  }
-  &__card {
-    width: 100%;
-  }
-  &__large {
-    font-size: 16px;
-    font-weight: 500;
-  }
-  &__tile_actions {
-    padding: 6px;
-    text-align: right;
-  }
-  &__actions {
-    display: flex;
-  }
-  &__sub-nav {
-    display: flex;
-    width: 100%;
-
-    &__poll {
-      display: flex;
-      flex: 1;
-      justify-content: flex-end;
-    }
-  }
-
-  &__anchor {
-    display: flex;
-    justify-content: center;
-  }
-
-  &__staging-error {
-    align-items: center;
-    display: flex;
-
-    mat-icon {
-      margin-right: 8px;
-    }
-  }
-
-  &__gitscm {
-    display: flex;
-    div {
-      flex: 1;
-      app-metadata-item:first-of-type {
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-.app-metadata {
-  display: flex;
-  flex-direction: row;
-  &__two-cols {
-    flex: 1;
-    app-metadata-item:first-child {
-      margin-top: 0;
-    }
-  }
-}
-
-.cli-link {
-  margin-top: 24px;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts
index b57dc03a00..bfbe88e7b4 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/build-tab/build-tab.component.ts
@@ -38,7 +38,6 @@ interface CustomEnvVarStratosProjectSource extends EnvVarStratosProjectSource {
 @Component({
   selector: 'app-build-tab',
   templateUrl: './build-tab.component.html',
-  styleUrls: ['./build-tab.component.scss'],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html
index 038f247e7c..446105fff9 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.html
@@ -1,30 +1,30 @@
-<div class="deploy-app-local">
+<div>
   @if (!hideTitle) {
     @if (sourceType === 'file') {
-      <div class="deploy-app-local__title">Deploy from local Application File archive</div>
+      <div class="font-semibold my-6">Deploy from local Application File archive</div>
     }
     @if (sourceType === 'folder') {
-      <div class="deploy-app-local__title">Deploy from local Application Folder</div>
+      <div class="font-semibold my-6">Deploy from local Application Folder</div>
     }
   }
   @if (sourceType === 'file') {
     <div>
-      <input #localPathSelectFile fileread="localPathFile" type="file" class="deploy-app-local__input"
+      <input #localPathSelectFile fileread="localPathFile" type="file" class="h-0 invisible w-0"
         name="localPathSelectFile" id="localPathSelectFile" (change)="onFileChange($event)" /> Choose an
-        <button (click)="localPathSelectFile.click()" class="btn btn-primary">Application Archive
+        <button (click)="localPathSelectFile.click()" class="btn btn-primary mx-px">Application Archive
         file</button>
       </div>
     }
     @if (sourceType === 'folder') {
       <div>
-        <input #localPathSelectFolder webkitdirectory fileread="localPathFile" type="file" class="deploy-app-local__input"
+        <input #localPathSelectFolder webkitdirectory fileread="localPathFile" type="file" class="h-0 invisible w-0"
           name="localPathSelectFolder" id="localPathSelectFolder" (change)="onFileChange($event)" /> Choose an
-          <button (click)="localPathSelectFolder.click()" class="btn btn-primary">Application
+          <button (click)="localPathSelectFolder.click()" class="btn btn-primary mx-px">Application
           Folder</button>
         </div>
       }
       @if (sourceData(); as source) {
-        <div class="deploy-app-local__info">
+        <div class="mt-6">
           @if (source.summaryType === 'file') {
             <div>
               <div>File Upload</div>
@@ -41,20 +41,20 @@
               <app-metadata-item icon="insert_drive_file" label="Files">{{ source.files }}</app-metadata-item>
               <app-metadata-item icon="folder" label="Folders">{{ source.folders }}</app-metadata-item>
               @if (!!source.manifestFile) {
-                <div class="deploy-app-local__indicator">
+                <div class="items-center flex mb-3">
                   <span class="material-icons">done</span>
                   <span>Manifest file detected</span>
                 </div>
               }
               @if (!!source.cfIgnoreFile) {
-                <div class="deploy-app-local__indicator">
+                <div class="items-center flex mb-3">
                   <span class="material-icons">done</span>
                   <span>.cfignore file was detected and applied ({{source.excludes.length}} files excluded)</span>
                 </div>
               }
             </div>
           }
-          <p class="deploy-app-local__next">Press Next to begin upload of source files.</p>
+          <p class="pt-6">Press Next to begin upload of source files.</p>
         </div>
       }
     </div>
\ No newline at end of file
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.scss
deleted file mode 100644
index 32831ae0e8..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.deploy-app-local {
-  button {
-    margin: 0 1px;
-  }
-  &__input {
-    height: 0;
-    visibility: hidden;
-    width: 0;
-  }
-  &__title {
-    font-weight: 600;
-    margin: 24px 0;
-  }
-  &__info {
-    margin-top: 24px;
-  }
-  &__next {
-    padding-top: 24px;
-  }
-  &__indicator {
-    align-items: center;
-    display: flex;
-    margin-bottom: 12px;
-    mat-icon {
-      border-radius: 50%;
-      font-size: 20px;
-      margin-right: 8px;
-      padding: 2px;
-    }
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts
index 30749c84c2..9ad14aa067 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts
@@ -17,7 +17,6 @@ import { DeployApplicationFsUtils } from "./deploy-application-fs-utils";
 @Component({
   selector: "app-deploy-application-fs",
   templateUrl: "./deploy-application-fs.component.html",
-  styleUrls: ["./deploy-application-fs.component.scss"],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition-base/quota-definition-base.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition-base/quota-definition-base.component.scss
deleted file mode 100644
index 1fb31e04d8..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition-base/quota-definition-base.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.quota-definition-base {
-  &__name-sub-text {
-    font-size: 14px;
-    opacity: 0.6;
-  }
-  &__title {
-    margin: 10px 0;
-  }
-  &__name {
-    margin: 0;
-  }
-  &__section-header {
-    margin: 10px 0;
-    opacity: 0.6;
-  }
-  &__basic-services {
-    display: flex;
-    margin: 8px 0;
-  }
-  &__basic-services-label {
-    margin-right: 10px;
-    opacity: 0.6;
-  }
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html
index 4f08341d85..e529cdabb7 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.html
@@ -22,18 +22,18 @@ <h1>{{ quotaDefinition()?.name }}</h1>
 }
 
 @if (quotaDefinition(); as quotaDefinition) {
-  <div class="quota-definition-base quota-definition-page">
+  <div class="quota-definition-page">
     <app-loading-page [isLoading]="detailsLoading$" text="Retrieving details">
-      <div class="quota-definition-base__name-sub-text">Name</div>
-      <h2 class="quota-definition-base__name">{{ quotaDefinition.name }}</h2>
-      <div class="quota-definition-base__basic-services">
-        <div class="quota-definition-base__basic-services-label">Non Basic Services Allowed:</div>
+      <div class="text-sm opacity-60">Name</div>
+      <h2 class="m-0">{{ quotaDefinition.name }}</h2>
+      <div class="flex my-2">
+        <div class="mr-[10px] opacity-60">Non Basic Services Allowed:</div>
         <app-boolean-indicator [isTrue]="quotaDefinition.paidServicesAllowed" type="yes-no" subtle="true">
         </app-boolean-indicator>
       </div>
       <app-tile-grid fit="true">
-        <h3 class="quota-definition-base__title">Quota Limits</h3>
-        <h4 class="quota-definition-base__section-header">Memory</h4>
+        <h3 class="my-[10px]">Quota Limits</h3>
+        <h4 class="my-[10px] opacity-60">Memory</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="memory" label="Maximum Memory Usage" units="mb"
@@ -46,7 +46,7 @@ <h4 class="quota-definition-base__section-header">Memory</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Application</h4>
+        <h4 class="my-[10px] opacity-60">Application</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="application_instance" iconFont="stratos-icons"  label="Maximum Application Instances"
@@ -59,7 +59,7 @@ <h4 class="quota-definition-base__section-header">Application</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Service</h4>
+        <h4 class="my-[10px] opacity-60">Service</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="service" iconFont="stratos-icons" label="Maximum Services"
@@ -72,7 +72,7 @@ <h4 class="quota-definition-base__section-header">Service</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Routes & Domains</h4>
+        <h4 class="my-[10px] opacity-60">Routes & Domains</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="route" iconFont="stratos-icons" label="Maximum Routes"
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts
index 738c123551..c16ca95295 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/quota-definition/quota-definition.component.ts
@@ -31,7 +31,6 @@ export const QUOTA_ORG_GUID = 'org';
 @Component({
   selector: 'app-quota-definition',
   templateUrl: './quota-definition.component.html',
-  styleUrls: ['../quota-definition-base/quota-definition-base.component.scss'],
   providers: [
     getActiveRouteCfOrgSpaceProvider
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html
index c6b14d12ce..7f13fb0bfe 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.html
@@ -22,18 +22,18 @@ <h1>{{ spaceQuotaDefinition()?.name }}</h1>
 }
 
 @if (spaceQuotaDefinition(); as quotaDefinition) {
-  <div class="quota-definition-base space-quota-definition-page">
+  <div class="space-quota-definition-page">
     <app-loading-page [isLoading]="detailsLoading$" text="Retrieving details">
-      <div class="quota-definition-base__name-sub-text">Name</div>
-      <h2 class="quota-definition-base__name">{{ quotaDefinition.name }}</h2>
-      <div class="quota-definition-base__basic-services">
-        <div class="quota-definition-base__basic-services-label">Non Basic Services Allowed:</div>
+      <div class="text-sm opacity-60">Name</div>
+      <h2 class="m-0">{{ quotaDefinition.name }}</h2>
+      <div class="flex my-2">
+        <div class="mr-[10px] opacity-60">Non Basic Services Allowed:</div>
         <app-boolean-indicator [isTrue]="quotaDefinition.paidServicesAllowed" type="yes-no" subtle="true">
         </app-boolean-indicator>
       </div>
       <app-tile-grid fit="true">
-        <h3 class="quota-definition-base__title">Quota Limits</h3>
-        <h4 class="quota-definition-base__section-header">Memory</h4>
+        <h3 class="my-[10px]">Quota Limits</h3>
+        <h4 class="my-[10px] opacity-60">Memory</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="memory" label="Maximum Memory Usage" units="mb"
@@ -46,7 +46,7 @@ <h4 class="quota-definition-base__section-header">Memory</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Application</h4>
+        <h4 class="my-[10px] opacity-60">Application</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="application_instance" iconFont="stratos-icons" label="Maximum Application Instances"
@@ -59,7 +59,7 @@ <h4 class="quota-definition-base__section-header">Application</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Service</h4>
+        <h4 class="my-[10px] opacity-60">Service</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="service" iconFont="stratos-icons" label="Maximum Services"
@@ -72,7 +72,7 @@ <h4 class="quota-definition-base__section-header">Service</h4>
             </app-card-number-metric>
           </app-tile>
         </app-tile-group>
-        <h4 class="quota-definition-base__section-header">Routes</h4>
+        <h4 class="my-[10px] opacity-60">Routes</h4>
         <app-tile-group class="tile-group-2-cols">
           <app-tile>
             <app-card-number-metric labelAtTop="true" icon="route" iconFont="stratos-icons" label="Maximum Routes"
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts
index 7e928364a9..c221987729 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/space-quota-definition/space-quota-definition.component.ts
@@ -30,7 +30,6 @@ export const QUOTA_SPACE_GUID = 'space';
 
 @Component({
   selector: 'app-space-quota-definition',
-  styleUrls: ['../quota-definition-base/quota-definition-base.component.scss'],
   templateUrl: './space-quota-definition.component.html',
   providers: [
     getActiveRouteCfOrgSpaceProvider

From e309956bd9ec267d7c5cf452bc66cf71c1f24a94 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 01:20:55 -0700
Subject: [PATCH 14/27] Migrate 4 mostly-dead Class B SCSS files in core (batch
 1)

Three pure dead-rule removals plus one near-dead migration.
SCSS files deleted and their styleUrls entries dropped.

- features/setup/domain-mismatch: template already uses
  Tailwind utilities; all .domain* classes dead.
- features/setup/upgrade-page: template already Tailwind-only;
  all .upgrade* classes dead.
- shared/components/boolean-indicator: SCSS uses
  .boolean-indicator__* BEM but template uses single-dash
  .boolean-indicator-container; nested mat-icon rules dead
  (template uses <span class="material-icons">).
- shared/components/cards/card-boolean-metric: same BEM/dash
  mismatch; one live root rule
  (.boolean-metric-card { height: 100% }) inlined as h-full
  on the root div.

Build green.
---
 .../domain-mismatch.component.scss            | 23 --------------
 .../domain-mismatch.component.ts              |  1 -
 .../upgrade-page/upgrade-page.component.scss  | 17 ----------
 .../upgrade-page/upgrade-page.component.ts    |  1 -
 .../boolean-indicator.component.scss          | 17 ----------
 .../boolean-indicator.component.ts            |  1 -
 .../card-boolean-metric.component.html        |  2 +-
 .../card-boolean-metric.component.scss        | 31 -------------------
 .../card-boolean-metric.component.ts          |  1 -
 9 files changed, 1 insertion(+), 93 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.scss

diff --git a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.scss b/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.scss
deleted file mode 100644
index 8aaa125eb4..0000000000
--- a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.domain {
-  &__card {
-    margin: 12px;
-    padding: 24px 64px;
-  }
-  &__message {
-    align-items: center;
-    display: flex;
-    font-size: 18px;
-    font-weight: 600;
-    justify-content: center;
-    padding: 32px 48px 0;
-    text-align: center;
-    span {
-      margin-left: 12px;
-    }
-  }
-  &__detail {
-    font-size: 16px;
-    padding: 24px 0 32px;
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts b/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts
index 96d9ea0623..3d6e9b0b92 100644
--- a/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts
+++ b/src/frontend/packages/core/src/features/setup/domain-mismatch/domain-mismatch.component.ts
@@ -7,7 +7,6 @@ import { ProductNameComponent } from '../../../shared/components/product-name.cc
 @Component({
   selector: 'app-domain-mismatch',
   templateUrl: './domain-mismatch.component.html',
-  styleUrls: ['./domain-mismatch.component.scss'],
   standalone: true,
   imports: [
     IntroScreenComponent,
diff --git a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.scss b/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.scss
deleted file mode 100644
index 5f49842994..0000000000
--- a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.upgrade {
-  &__card {
-    margin: 12px;
-    padding: 0;
-  }
-  &__message {
-    font-size: 18px;
-    font-weight: 600;
-    padding: 32px 48px 0;
-    text-align: center;
-  }
-  &__detail {
-    font-size: 16px;
-    padding: 24px 0 32px;
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts b/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts
index 33d038411e..1cbc1f7ff1 100644
--- a/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts
+++ b/src/frontend/packages/core/src/features/setup/upgrade-page/upgrade-page.component.ts
@@ -7,7 +7,6 @@ import { ProductNameComponent } from '../../../shared/components/product-name.cc
 @Component({
   selector: 'app-upgrade-page',
   templateUrl: './upgrade-page.component.html',
-  styleUrls: ['./upgrade-page.component.scss'],
   standalone: true,
   imports: [
     IntroScreenComponent,
diff --git a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.scss b/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.scss
deleted file mode 100644
index bc06dec338..0000000000
--- a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.boolean-indicator {
-  &__container {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    mat-icon {
-      font-size: 20px;
-      height: 20px;
-      width: 20px;
-    }
-    &__show-text {
-      mat-icon {
-        margin-right: 4px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts b/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts
index 65b5d4e234..d4bc176ffc 100644
--- a/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts
+++ b/src/frontend/packages/core/src/shared/components/boolean-indicator/boolean-indicator.component.ts
@@ -32,7 +32,6 @@ export type booleanStringType = 'True' | 'False' | 'Unknown';
 @Component({
   selector: 'app-boolean-indicator',
   templateUrl: './boolean-indicator.component.html',
-  styleUrls: ['./boolean-indicator.component.scss'],
   standalone: true,
   imports: [
     CommonModule
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html
index 9444343931..d3936162b5 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html
+++ b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.html
@@ -1,5 +1,5 @@
 <ng-template #content>
-  <div class="boolean-metric-card">
+  <div class="boolean-metric-card h-full">
     @if (!textOnly) {
       <div class="card p-4 flex items-center space-x-4">
         @if (icon) {
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.scss b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.scss
deleted file mode 100644
index d398ed32ff..0000000000
--- a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.boolean-metric-card {
-  height: 100%;
-  &__anchor {
-    cursor: pointer;
-  }
-  &__container {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    padding: 12px;
-    > div {
-      flex: 1;
-    }
-  }
-  &__icon {
-    flex: 0 0 40px;
-    font-size: 40px;
-    height: 40px;
-    margin-right: 12px;
-    width: 40px;
-  }
-  &__label {
-    font-size: 15px;
-  }
-  &__value {
-    font-size: 23px;
-  }
-  &__limit {
-    font-size: 18px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts
index 6f5630b2da..5b71f238d8 100644
--- a/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts
+++ b/src/frontend/packages/core/src/shared/components/cards/card-boolean-metric/card-boolean-metric.component.ts
@@ -6,7 +6,6 @@ import { RouterNav, AppState } from '@stratosui/store';
 @Component({
   selector: 'app-card-boolean-metric',
   templateUrl: './card-boolean-metric.component.html',
-  styleUrls: ['./card-boolean-metric.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

From 70adb0c5a75ceb539adeeb6ace512b76782ca9fc Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 01:24:34 -0700
Subject: [PATCH 15/27] Migrate 5 Class B SCSS files in core endpoints (batch
 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All five files were thin BEM wrappers with a single live
class each — straightforward Tailwind inlining.

- connect-endpoint: drop parent .connect (no rules); replace
  .connect__auth-type with w-full on app-form-field.
- connect-endpoint-dialog/auth-forms/credentials-auth-form:
  .credentials-auth__form -> flex flex-col.
- connect-endpoint-dialog/auth-forms/none-auth-form:
  .none-auth__form -> flex flex-col mb-6 (24px).
- connect-endpoint-dialog/auth-forms/sso-auth-form:
  .sso-auth__form -> flex flex-col.
- create-endpoint/create-endpoint-base-step: .select-step
  -> w-full; .select-step__help was dead (only referenced in
  a commented-out <p> block).

Build green.
---
 .../auth-forms/credentials-auth-form.component.html        | 2 +-
 .../auth-forms/credentials-auth-form.component.scss        | 6 ------
 .../auth-forms/credentials-auth-form.component.ts          | 1 -
 .../auth-forms/none-auth-form.component.html               | 2 +-
 .../auth-forms/none-auth-form.component.scss               | 7 -------
 .../auth-forms/none-auth-form.component.ts                 | 1 -
 .../auth-forms/sso-auth-form.component.html                | 2 +-
 .../auth-forms/sso-auth-form.component.scss                | 6 ------
 .../auth-forms/sso-auth-form.component.ts                  | 1 -
 .../connect-endpoint/connect-endpoint.component.html       | 4 ++--
 .../connect-endpoint/connect-endpoint.component.scss       | 5 -----
 .../connect-endpoint/connect-endpoint.component.ts         | 1 -
 .../create-endpoint-base-step.component.html               | 2 +-
 .../create-endpoint-base-step.component.scss               | 6 ------
 .../create-endpoint-base-step.component.ts                 | 1 -
 15 files changed, 6 insertions(+), 41 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss

diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html
index c9461f23f0..babd8b11eb 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="formGroup">
-  <div formGroupName="authValues" class="credentials-auth__form">
+  <div formGroupName="authValues" class="flex flex-col">
     <app-form-field>
       <input class="w-full placeholder:!text-transparent focus:outline-none" appInput placeholder="{{config?.usernameLabel}}" formControlName="username" required autocomplete="username">
     </app-form-field>
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.scss
deleted file mode 100644
index 5a1d42d2c5..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.credentials-auth {
-  &__form {
-    display: flex;
-    flex-direction: column;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts
index 816516a3c8..b3342cc2f7 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.ts
@@ -14,7 +14,6 @@ interface CredentialsAuthForm {
 @Component({
   selector: 'app-credentials-auth-form',
   templateUrl: './credentials-auth-form.component.html',
-  styleUrls: ['./credentials-auth-form.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html
index a6cc831bf2..92850023bd 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="none-auth__form">
+  <div class="flex flex-col mb-6">
     <p>Press 'Connect' to connect without authentication</p>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.scss
deleted file mode 100644
index a1cd95660a..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.none-auth {
-  &__form {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 24px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts
index 8ff175dd9b..a4b276c9d2 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/none-auth-form.component.ts
@@ -11,7 +11,6 @@ export interface NoneAuthFormValue {}
 @Component({
   selector: 'app-none-auth-form',
   templateUrl: './none-auth-form.component.html',
-  styleUrls: ['./none-auth-form.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html
index 1ba073dc25..40538f0cbb 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="formGroup">
-  <div formGroupName="authValues" class="sso-auth__form">
+  <div formGroupName="authValues" class="flex flex-col">
     <p>You will be redirected to the Single Sign-On UI for this endpoint and returned to <app-product-name></app-product-name> upon completion.</p>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.scss
deleted file mode 100644
index ba26a862d7..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.sso-auth {
-  &__form {
-    display: flex;
-    flex-direction: column;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts
index 0d3e6f698f..c135cf092d 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/sso-auth-form.component.ts
@@ -15,7 +15,6 @@ interface SsoAuthForm {
 @Component({
   selector: 'app-sso-auth-form',
   templateUrl: './sso-auth-form.component.html',
-  styleUrls: ['./sso-auth-form.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html
index b312339301..6829cc0ae2 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.html
@@ -1,6 +1,6 @@
-<form class="connect flex flex-col gap-4" [formGroup]="endpointForm" (ngSubmit)="formSubmit && connectService.submit()">
+<form class="flex flex-col gap-4" [formGroup]="endpointForm" (ngSubmit)="formSubmit && connectService.submit()">
   @if (authTypesForEndpoint.length > 1) {
-    <app-form-field class="connect__auth-type">
+    <app-form-field class="w-full">
       <app-select (selectionChange)="authChanged($event)" id="authType" name="authType" formControlName="authType"
         placeholder="Auth Type">
         @for (auth of authTypesForEndpoint; track auth) {
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.scss b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.scss
deleted file mode 100644
index 2f3863087e..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.connect {
-  &__auth-type {
-    width: 100%;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts
index db99c32cf4..390ee91d0d 100644
--- a/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/connect-endpoint/connect-endpoint.component.ts
@@ -24,7 +24,6 @@ interface EndpointForm {
 @Component({
   selector: 'app-connect-endpoint',
   templateUrl: './connect-endpoint.component.html',
-  styleUrls: ['./connect-endpoint.component.scss'],
   standalone: true,
   imports: [
     ReactiveFormsModule,
diff --git a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html
index efc15f6cdf..4dddbeea68 100644
--- a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html
+++ b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.html
@@ -3,7 +3,7 @@ <h1>Register Endpoint</h1>
 </app-page-header>
 <app-steppers [cancel]="'/endpoints'">
   <app-step [hideNextButton]="true" [signalHandle]="signalHandle">
-    <div class="select-step">
+    <div class="w-full">
       <h3>Select the type of the endpoint to register</h3>
       <!--
       <p class="select-step__help">
diff --git a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss
deleted file mode 100644
index a9fdc63c60..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.select-step {
-  width: 100%;
-  &__help {
-    padding-bottom: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts
index ac78d92393..49c82ce4cc 100644
--- a/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-base-step/create-endpoint-base-step.component.ts
@@ -22,7 +22,6 @@ import { TileSelectorComponent } from '../../../../shared/components/tile-select
 @Component({
   selector: 'app-create-endpoint-base-step',
   templateUrl: './create-endpoint-base-step.component.html',
-  styleUrls: ['./create-endpoint-base-step.component.scss'],
   standalone: true,
   imports: [
     CommonModule,

From 0dd243840faf25eac0f562ff3405a8c9fd052edb Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 01:28:12 -0700
Subject: [PATCH 16/27] Migrate 5 Class B SCSS files in core (batch 3)

- features/api-keys/api-keys-page: pure dead-rule removal.
  All nested rules targeted mat-card / mat-card-header /
  mat-icon, but the template uses app-card / app-card-header
  / app-custom-icon.
- features/metrics/metrics-endpoint-details: .metrics-details
  -> flex flex-col; __line -> flex items-center; __icon ->
  flex items-center justify-center mr-2 (preserving text-
  warning).
- shared/components/list/list-types/endpoint/table-cell-
  endpoint-address: .endpoint-address-cell -> flex items-
  center; __copy -> w-6.
- shared/components/list/list-types/endpoint/table-cell-
  endpoint-name: .endpoint-name-cell -> flex items-center;
  __icon -> text-[20px] h-5 w-5 pl-2.
- shared/components/list/max-list-message: .maxed -> flex
  flex-col items-center; __load was dead.

Build green.
---
 .../api-keys-page/api-keys-page.component.scss   | 15 ---------------
 .../api-keys-page/api-keys-page.component.ts     |  1 -
 .../metrics-endpoint-details.component.html      |  6 +++---
 .../metrics-endpoint-details.component.scss      | 16 ----------------
 .../metrics-endpoint-details.component.ts        |  1 -
 .../table-cell-endpoint-address.component.html   |  4 ++--
 .../table-cell-endpoint-address.component.scss   | 10 ----------
 .../table-cell-endpoint-address.component.ts     |  1 -
 .../table-cell-endpoint-name.component.html      |  4 ++--
 .../table-cell-endpoint-name.component.scss      | 10 ----------
 .../table-cell-endpoint-name.component.ts        |  1 -
 .../max-list-message.component.html              |  2 +-
 .../max-list-message.component.scss              | 11 -----------
 .../max-list-message.component.ts                |  1 -
 14 files changed, 8 insertions(+), 75 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.scss

diff --git a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.scss b/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.scss
deleted file mode 100644
index 291e1522e1..0000000000
--- a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.keys-page {
-  &__new {
-    mat-card {
-      margin-bottom: 24px;
-      mat-card-header {
-        align-items: center;
-        display: flex;
-        margin-bottom: 15px;
-        mat-icon {
-          margin-right: 5px;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts b/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts
index f233ab52a8..0ddcf6e010 100644
--- a/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts
+++ b/src/frontend/packages/core/src/features/api-keys/api-keys-page/api-keys-page.component.ts
@@ -26,7 +26,6 @@ import { CustomIconComponent } from '../../../shared/components/custom-material/
 @Component({
   selector: 'app-api-keys-page',
   templateUrl: './api-keys-page.component.html',
-  styleUrls: ['./api-keys-page.component.scss'],
   providers: [ApiKeysSignalConfigService],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html
index 56b99eac40..27583482f6 100644
--- a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html
+++ b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.html
@@ -1,8 +1,8 @@
 @if (data$ | async; as info) {
-  <div class="metrics-details">
-    <div class="metrics-details__line">
+  <div class="flex flex-col">
+    <div class="flex items-center">
       @if (info.warning) {
-        <app-custom-icon class="metrics-details__icon text-warning">warning</app-custom-icon>
+        <app-custom-icon class="flex items-center justify-center mr-2 text-warning">warning</app-custom-icon>
       }
       {{ info.ok }}
       @if (info.total > 0) {
diff --git a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.scss b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.scss
deleted file mode 100644
index c18a9f0f79..0000000000
--- a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.metrics-details {
-  display: flex;
-  flex-direction: column;
-
-  &__line {
-    align-items: center;
-    display: flex;
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin-right: 8px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts
index 76aa03d62d..666783e596 100644
--- a/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts
+++ b/src/frontend/packages/core/src/features/metrics/metrics-endpoint-details/metrics-endpoint-details.component.ts
@@ -21,7 +21,6 @@ interface MetricsDetailsInfo {
 @Component({
   selector: 'app-metrics-endpoint-details',
   templateUrl: './metrics-endpoint-details.component.html',
-  styleUrls: ['./metrics-endpoint-details.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html
index 1b9e5d44c8..6bf42789f7 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.html
@@ -1,7 +1,7 @@
 @if (endpointAddress$ | async; as address) {
-  <div class="endpoint-address-cell">
+  <div class="flex items-center">
     <div>{{ address }}</div>
-    <app-copy-to-clipboard class="endpoint-address-cell__copy" [compact]="true" [text]="address" tooltip="Copy to clipboard" [showSuccessText]="false">
+    <app-copy-to-clipboard class="w-6" [compact]="true" [text]="address" tooltip="Copy to clipboard" [showSuccessText]="false">
     </app-copy-to-clipboard>
     @if (isDuplicate$ | async) {
       <span class="material-icons text-warning-shade-600 dark:text-warning-shade-300 ml-1 text-[20px] leading-none"
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.scss b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.scss
deleted file mode 100644
index 6404b248c8..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.endpoint-address-cell {
-  display: flex;
-  align-items: center;
-
-  &__copy {
-    width: 24px;
-  }
-
-
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts
index decac6be9f..1cf3b57a1b 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-address/table-cell-endpoint-address.component.ts
@@ -14,7 +14,6 @@ import { RowWithEndpointId } from '../table-cell-endpoint-name/table-cell-endpoi
 @Component({
   selector: 'app-table-cell-endpoint-address',
   templateUrl: './table-cell-endpoint-address.component.html',
-  styleUrls: ['./table-cell-endpoint-address.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html
index 347fb59d32..dfb096fd4b 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.html
@@ -1,5 +1,5 @@
 @if (endpoint$ | async; as endpoint) {
-  <div class="endpoint-name-cell">
+  <div class="flex items-center">
     @if (endpoint.canShowLink) {
       <a routerLink="{{ endpoint.link }}">{{ endpoint.name }}</a>
     }
@@ -8,7 +8,7 @@
     }
     @if (!!endpoint.system_shared_token) {
       <app-custom-icon
-        matTooltip="This endpoint's connection is shared by the administrator" class="endpoint-name-cell__icon">share
+        matTooltip="This endpoint's connection is shared by the administrator" class="text-[20px] h-5 w-5 pl-2">share
       </app-custom-icon>
     }
   </div>
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.scss b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.scss
deleted file mode 100644
index 0c52fc94ed..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.endpoint-name-cell {
-  align-items: center;
-  display: flex;
-  &__icon {
-    font-size: 20px;
-    height: 20px;
-    padding-left: 8px;
-    width: 20px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts
index 1463f77a6c..c32c975d0d 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-name/table-cell-endpoint-name.component.ts
@@ -18,7 +18,6 @@ export interface RowWithEndpointId {
 @Component({
   selector: 'app-table-cell-endpoint-name',
   templateUrl: './table-cell-endpoint-name.component.html',
-  styleUrls: ['./table-cell-endpoint-name.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html
index bc0416b635..b551c11e90 100644
--- a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.html
@@ -1,5 +1,5 @@
 @if (state$ | async; as state) {
-  <div class="maxed">
+  <div class="flex flex-col items-center">
     <app-no-content-message [icon]="state.icon" [iconFont]="state.iconFont" [firstLine]="state.firstLine"
       [otherLines]="state.otherLines">
       @if (state.canIgnoreMaxedState) {
diff --git a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.scss b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.scss
deleted file mode 100644
index ccf5bfbf05..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.maxed {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-
-  &__load {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts
index d9eec0e8df..28d00d902e 100644
--- a/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/max-list-message/max-list-message.component.ts
@@ -11,7 +11,6 @@ import { ITableTextMaxed } from '../list-table/table.types';
 @Component({
   selector: 'app-max-list-message',
   templateUrl: './max-list-message.component.html',
-  styleUrls: ['./max-list-message.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

From 00934676ed32e637c1c83f6fe2ed09120a28acd0 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 01:51:05 -0700
Subject: [PATCH 17/27] Migrate 5 Class B SCSS files in core (batch 4)

- features/login/logout-page: .logout (no rules) dropped;
  .logout__card -> p-0 w-[300px]; .logout__body -> p-6
  text-center; .logout__msg -> text-lg pb-5; .logout__loading
  had no rule.
- features/home/home/default-endpoint-home-component:
  .default-home-card -> m-4; __address -> flex min-h-6;
  __address__value -> flex items-center mr-7 break-all.
- features/home/home/favorites-side-panel: __card on
  <app-favorites-meta-card> -> flex flex-col mb-1.5; parent
  .fav-side-panel rule had no own body.
- features/user-profile/edit-profile-info: .edit-profile
  (mt-2.5) + .edit-profile__group (flex flex-col max-w-full)
  combined into single class attribute on form root; second
  occurrence on inner div migrated. Nested .custom-form-field
  rule was dead (component selector under emulated scope).
- core/entity-favorite-star: .favorite-star -> flex
  items-center cursor-pointer; conditional size via
  [ngClass]="small ? 'h-5 w-5' : 'h-6 w-6'". Nested mat-icon
  rule was dead (template uses <app-custom-icon>).

Build green.
---
 .../entity-favorite-star.component.html       |  4 ++--
 .../entity-favorite-star.component.scss       | 19 -------------------
 .../entity-favorite-star.component.ts         |  1 -
 ...ult-endpoint-home-component.component.html |  6 +++---
 ...ult-endpoint-home-component.component.scss | 14 --------------
 ...fault-endpoint-home-component.component.ts |  1 -
 .../favorites-side-panel.component.html       |  2 +-
 .../favorites-side-panel.component.scss       |  7 -------
 .../favorites-side-panel.component.ts         |  1 -
 .../logout-page/logout-page.component.html    | 14 +++++++-------
 .../logout-page/logout-page.component.scss    | 14 --------------
 .../logout-page/logout-page.component.ts      |  1 -
 .../edit-profile-info.component.html          |  4 ++--
 .../edit-profile-info.component.scss          | 11 -----------
 .../edit-profile-info.component.ts            |  1 -
 15 files changed, 15 insertions(+), 85 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/login/logout-page/logout-page.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.scss

diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html
index ce3b24dcee..4354566e95 100644
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html
+++ b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.html
@@ -1,9 +1,9 @@
 @if ((endpointsService.disablePersistenceFeatures$ | async) === false) {
-  <div class="favorite-star" role="button" tabindex="0"
+  <div class="flex items-center cursor-pointer" role="button" tabindex="0"
     (click)="toggleFavorite($event)"
     (keydown.enter)="toggleFavorite($event)"
     (keydown.space)="toggleFavorite($event); $event.preventDefault()"
-    [ngClass]="{'favorite-star__small': small}">
+    [ngClass]="small ? 'h-5 w-5' : 'h-6 w-6'">
     @switch (isFavorite$ | async) {
       @case (true) {
         <app-custom-icon matTooltip="Unset as favorite" aria-label="Set as Favorite">star</app-custom-icon>
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss
deleted file mode 100644
index c27f56975a..0000000000
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$size: 24px;
-$small: 20px;
-.favorite-star {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  height: $size;
-  width: $size;
-  &__small {
-    height: $small;
-    width: $small;
-    mat-icon {
-      font-size: $small;
-      height: $small;
-      line-height: $small;
-      width: $small;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts
index ed017c21ab..6fabf306a5 100644
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts
+++ b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.ts
@@ -13,7 +13,6 @@ import { CustomIconComponent } from '../../shared/components/custom-material/cus
 @Component({
   selector: 'app-entity-favorite-star',
   templateUrl: './entity-favorite-star.component.html',
-  styleUrls: ['./entity-favorite-star.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html
index 7f552300f8..f77527730c 100644
--- a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html
+++ b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.html
@@ -1,8 +1,8 @@
 @if (url) {
-  <div class="default-home-card">
+  <div class="m-4">
     <app-metadata-item icon="link" label="Instance Address" [clipboardValue]="url">
-      <div class="default-home-card__address">
-        <div class="default-home-card__address__value">{{ url }}</div>
+      <div class="flex min-h-6">
+        <div class="flex items-center mr-7 break-all">{{ url }}</div>
       </div>
     </app-metadata-item>
   </div>
diff --git a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.scss b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.scss
deleted file mode 100644
index e6d1a5abe5..0000000000
--- a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.default-home-card {
-  margin: 1em;
-
-  &__address {
-    display: flex;
-    min-height: 24px;
-    &__value {
-      align-items: center;
-      display: flex;
-      margin-right: 28px;
-      word-break: break-all;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts
index f742b57c73..e22e0274a9 100644
--- a/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts
+++ b/src/frontend/packages/core/src/features/home/home/default-endpoint-home-component/default-endpoint-home-component.component.ts
@@ -10,7 +10,6 @@ import { MetadataItemComponent } from '../../../../shared/components/metadata-it
 @Component({
   selector: 'app-default-endpoint-home-component',
   templateUrl: './default-endpoint-home-component.component.html',
-  styleUrls: ['./default-endpoint-home-component.component.scss'],
   standalone: true,
   imports: [
     MetadataItemComponent
diff --git a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html
index 815f3b27b3..dc5f69c1d5 100644
--- a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html
+++ b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.html
@@ -2,7 +2,7 @@
   @if (favorites$ | async; as favs) {
     <div>
       @for (entity of favs; track entity) {
-        <app-favorites-meta-card class="fav-side-panel__card" [favoriteEntity]="entity"></app-favorites-meta-card>
+        <app-favorites-meta-card class="flex flex-col mb-1.5" [favoriteEntity]="entity"></app-favorites-meta-card>
       }
     </div>
   }
diff --git a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.scss b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.scss
deleted file mode 100644
index c0137eecc0..0000000000
--- a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.fav-side-panel {
-  &__card {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 6px;
-  }
-}
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts
index 3d790b7129..0a869ee9e0 100644
--- a/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts
+++ b/src/frontend/packages/core/src/features/home/home/favorites-side-panel/favorites-side-panel.component.ts
@@ -9,7 +9,6 @@ import { FavoritesMetaCardComponent } from '../favorites-meta-card/favorites-met
 @Component({
   selector: 'app-favorites-side-panel',
   templateUrl: './favorites-side-panel.component.html',
-  styleUrls: ['./favorites-side-panel.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html
index 46b279939c..f26cc5ada7 100644
--- a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html
+++ b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.html
@@ -1,15 +1,15 @@
-<app-intro-screen id="app-login-page" class="logout">
-  <app-card class="logout__card">
+<app-intro-screen id="app-login-page">
+  <app-card class="p-0 w-[300px]">
     <app-stratos-title></app-stratos-title>
     @if (error$ | async) {
-      <div class="logout__body">
-        <div class="logout__msg">An error occurred logging out</div>
+      <div class="p-6 text-center">
+        <div class="text-lg pb-5">An error occurred logging out</div>
         <button (click)="reload()" class="btn btn-primary" type="button">Reload</button>
       </div>
     } @else {
-      <div class="logout__body">
-        <div class="logout__msg">Logging out</div>
-        <div id="logout__loading" class="logout__loading">
+      <div class="p-6 text-center">
+        <div class="text-lg pb-5">Logging out</div>
+        <div id="logout__loading">
           <app-progress-bar mode="indeterminate"></app-progress-bar>
         </div>
       </div>
diff --git a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.scss b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.scss
deleted file mode 100644
index c1b0168e6d..0000000000
--- a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.logout {
-  &__card {
-    padding: 0;
-    width: 300px;
-  }
-  &__body {
-    padding: 24px;
-    text-align: center;    
-  }
-  &__msg {
-    font-size: 18px;
-    padding-bottom: 20px;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts
index d3d91c3160..062e4c2f47 100644
--- a/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts
+++ b/src/frontend/packages/core/src/features/login/logout-page/logout-page.component.ts
@@ -13,7 +13,6 @@ import { AppProgressBarComponent } from '../../../shared/components/progress-bar
 @Component({
 selector: 'app-logout-page',
   templateUrl: './logout-page.component.html',
-  styleUrls: ['./logout-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html
index 032773ab28..781da95acb 100644
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html
+++ b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html
@@ -9,7 +9,7 @@ <h1>Edit User Profile</h1>
 <app-steppers cancel="/user-profile">
   <app-step [title]="'Edit User Profile'" [signalHandle]="signalHandle" finishButtonText="Save">
     <div>
-      <form [formGroup]="editProfileForm" validate class="edit-profile edit-profile__group">
+      <form [formGroup]="editProfileForm" validate class="mt-2.5 flex flex-col max-w-full">
         <app-form-field>
           <input appInput placeholder="Given Name" formControlName="givenName">
         </app-form-field>
@@ -37,7 +37,7 @@ <h1>Edit User Profile</h1>
           </app-form-field>
         }
         @if ((canChangePassword | async)) {
-          <div class="edit-profile__group">
+          <div class="flex flex-col max-w-full">
             <p>Change Password (Leave blank to keep current password)</p>
             @if (!needsPasswordForEmailChange) {
               <app-form-field>
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.scss b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.scss
deleted file mode 100644
index 15c59eb82a..0000000000
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.edit-profile {
-  margin-top: 10px;
-  &__group {
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    .custom-form-field {
-      max-width: 450px;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
index 64e3d725de..6517607700 100644
--- a/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
+++ b/src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.ts
@@ -31,7 +31,6 @@ interface EditProfileForm {
 @Component({
   selector: 'app-edit-profile-info',
   templateUrl: './edit-profile-info.component.html',
-  styleUrls: ['./edit-profile-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }

From 1742efb86f1730bfd8af0e320ef05ee316063a38 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 01:54:11 -0700
Subject: [PATCH 18/27] Migrate 5 Class B SCSS files in core (batch 5)

- shared/components/display-value: .display-value ->
  min-w-[200px]; __label -> font-bold text-sm mb-2.5.
- shared/components/page-sub-nav-section: .sub-nav-section ->
  inline-block; __inner -> flex items-center; __divider ->
  border-r border-[rgba(100,121,143,0.4)] h-5 mr-2.5 pr-2.5.
- shared/components/stacked-input-actions: only live rule
  was __add--content -> flex items-center; parent shells
  and nested mat-icon were dead (template uses
  <app-custom-icon>).
- shared/components/start-end-date: .start-end-date -> flex
  items-center flex-wrap w-full; __selector -> flex-none
  px-[5px]; __arrow -> px-[5px]; .invalid-message -> text-xs
  min-h-4.
- shared/components/list/list-table/table-cell-expander:
  drop .expander (template already had cursor-pointer
  inline-flex items-center justify-center w-6 h-6);
  __icon-container -> h-[18px] w-[8px].

Build green.
---
 .../display-value/display-value.component.html |  6 +++---
 .../display-value/display-value.component.scss |  8 --------
 .../display-value/display-value.component.ts   |  1 -
 .../table-cell-expander.component.html         |  4 ++--
 .../table-cell-expander.component.scss         | 10 ----------
 .../table-cell-expander.component.ts           |  1 -
 .../page-sub-nav-section.component.html        |  6 +++---
 .../page-sub-nav-section.component.scss        | 13 -------------
 .../page-sub-nav-section.component.ts          |  1 -
 .../stacked-input-actions.component.html       |  2 +-
 .../stacked-input-actions.component.scss       | 11 -----------
 .../stacked-input-actions.component.ts         |  1 -
 .../start-end-date.component.html              | 10 +++++-----
 .../start-end-date.component.scss              | 18 ------------------
 .../start-end-date/start-end-date.component.ts |  1 -
 15 files changed, 14 insertions(+), 79 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/shared/components/display-value/display-value.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.scss

diff --git a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html
index b9a8a386fe..270f0b730b 100644
--- a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html
+++ b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.html
@@ -1,8 +1,8 @@
-<div class="display-value">
+<div class="min-w-[200px]">
   @if (label) {
-    <div class="display-value__label">{{label}}</div>
+    <div class="font-bold text-sm mb-2.5">{{label}}</div>
   }
-  <div class="display-value__value">
+  <div>
     @if (displayCustom.children.length === 0) {
       <span>{{value}}</span>
     }
diff --git a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.scss b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.scss
deleted file mode 100644
index 43f6eda9c3..0000000000
--- a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.display-value {
-  min-width: 200px;
-  &__label {
-    font-weight: bold;
-    font-size: 14px;
-    margin-bottom: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts
index 8882bc27cc..5343ecdaa9 100644
--- a/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts
+++ b/src/frontend/packages/core/src/shared/components/display-value/display-value.component.ts
@@ -4,7 +4,6 @@ import { ChangeDetectionStrategy, Component, Input  } from '@angular/core';
 @Component({
   selector: 'app-display-value',
   templateUrl: './display-value.component.html',
-  styleUrls: ['./display-value.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html
index a081cda055..c487e96b63 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html
@@ -1,10 +1,10 @@
-<div class="expander cursor-pointer inline-flex items-center justify-center w-6 h-6"
+<div class="cursor-pointer inline-flex items-center justify-center w-6 h-6"
      role="button" tabindex="0"
      (click)="toggle()"
      (keydown.enter)="toggle()"
      (keydown.space)="toggle(); $event.preventDefault()"
      [@indicatorRotate]="expandedService.expanded[rowId] ? 'expanded': 'collapsed'">
-  <div class="expander__icon-container">
+  <div class="h-[18px] w-[8px]">
     <span class="material-icons text-sm transition-transform duration-200"
           [class.rotate-90]="expandedService.expanded[rowId]">
       chevron_right
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss
deleted file mode 100644
index 0a98ff6121..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.expander {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-
-  &__icon-container {
-    height: 18px;
-    width: 8px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts
index 720f8c4b19..aec9425c38 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts
@@ -13,7 +13,6 @@ export interface TableCellExpanderConfig {
 @Component({
   selector: 'app-table-cell-expander',
   templateUrl: './table-cell-expander.component.html',
-  styleUrls: ['./table-cell-expander.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [],
diff --git a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html
index 8f42c6b3a5..28e687a83d 100644
--- a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html
+++ b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.html
@@ -1,7 +1,7 @@
-<span class="sub-nav-section">
-  <div class="sub-nav-section__inner">
+<span class="inline-block">
+  <div class="flex items-center">
     <ng-content></ng-content>
-    <div class="sub-nav-section__divider">
+    <div class="border-r border-[rgba(100,121,143,0.4)] h-5 mr-2.5 pr-2.5">
     </div>
   </div>
 </span>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.scss b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.scss
deleted file mode 100644
index 6911af86ab..0000000000
--- a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.sub-nav-section {
-  display: inline-block;
-  &__inner {
-    align-items: center;
-    display: flex;
-  }
-  &__divider {
-    border-right: 1px solid rgba(100, 121, 143, .4);
-    height: 20px;
-    margin-right: 10px;
-    padding-right: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts
index 7ac11f0aae..281f79804e 100644
--- a/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts
+++ b/src/frontend/packages/core/src/shared/components/page-sub-nav-section/page-sub-nav-section.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component  } from '@angular/core';
 @Component({
   selector: 'app-page-sub-nav-section',
   templateUrl: './page-sub-nav-section.component.html',
-  styleUrls: ['./page-sub-nav-section.component.scss'],
   standalone: true,
   imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html
index c51880a741..e9e77d11eb 100644
--- a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html
+++ b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.html
@@ -2,6 +2,6 @@
   <div #inputs></div>
 </div>
 <button class="stacked-input__add btn btn-ghost" type="button" (click)="addComponent()" [disabled]="disabled">
-  <div class="stacked-input__add--content">Add another <app-custom-icon class="">add_box</app-custom-icon>
+  <div class="flex items-center">Add another <app-custom-icon class="">add_box</app-custom-icon>
   </div>
 </button>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.scss b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.scss
deleted file mode 100644
index 73989e7b2b..0000000000
--- a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.stacked-input {
-  &__add {
-    &--content {
-      align-items: center;
-      display: flex;
-      mat-icon {
-        padding-left: 5px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts
index ed46c00733..9cc5f80798 100644
--- a/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts
+++ b/src/frontend/packages/core/src/shared/components/stacked-input-actions/stacked-input-actions.component.ts
@@ -26,7 +26,6 @@ export interface StackedInputActionsUpdate { values: { [key: string]: string };
 @Component({
   selector: 'app-stacked-input-actions',
   templateUrl: './stacked-input-actions.component.html',
-  styleUrls: ['./stacked-input-actions.component.scss'],
   standalone: true,
   imports: [
     CustomIconComponent
diff --git a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html
index f2e5cba813..56b076a7fe 100644
--- a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html
+++ b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.html
@@ -1,14 +1,14 @@
-<div class="start-end-date">
-  <div class="start-end-date__selector">
+<div class="flex items-center flex-wrap w-full">
+  <div class="flex-none px-[5px]">
     <app-date-time [(dateTime)]="start"></app-date-time>
   </div>
-  <div class="start-end-date__arrow">
+  <div class="px-[5px]">
     to
   </div>
-  <div class="start-end-date__selector">
+  <div class="flex-none px-[5px]">
     <app-date-time [(dateTime)]="end"></app-date-time>
   </div>
 </div>
-<div class="invalid-message">
+<div class="text-xs min-h-4">
   {{ validMessage }}
 </div>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.scss b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.scss
deleted file mode 100644
index 8d9ff8f5f7..0000000000
--- a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.start-end-date {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  &__selector {
-    flex: none;
-    padding: 0 5px;
-  }
-  &__arrow {
-    padding: 0 5px;
-  }
-}
-
-.invalid-message {
-  font-size: 12px;
-  min-height: 16px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts
index 6ef38ec1fb..1545ddf98c 100644
--- a/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts
+++ b/src/frontend/packages/core/src/shared/components/start-end-date/start-end-date.component.ts
@@ -6,7 +6,6 @@ import { DateTimeComponent } from '../date-time/date-time.component';
 @Component({
   selector: 'app-start-end-date',
   templateUrl: './start-end-date.component.html',
-  styleUrls: ['./start-end-date.component.scss'],
   standalone: true,
   imports: [
     DateTimeComponent

From ad8e49c82c5a53edb290f9e9d4a42caedde01586 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 01:57:07 -0700
Subject: [PATCH 19/27] Migrate 3 Class B SCSS files in core (batch 6)

- shared/components/user-profile-banner: .user-profile-banner
  -> flex flex-row p-6; __avatar -> flex-none mr-6; __email
  -> text-base; __title -> flex-1 text-[28px]. Nested mat-icon
  rule was dead (template uses <app-user-avatar>).
- shared/components/application-state: .app-state -> flex
  flex-row items-center; __with-icon -> conditional h-[25px]
  via [class.h-\[25px\]]; __label and __sub-label ->
  overflow-hidden text-ellipsis; nested
  app-application-state-icon padding-right inlined as pr-[5px]
  on the component element.
- shared/components/list/list-table/app-table-cell-default:
  .link parent had no rules; __short -> flex; __short__icon
  -> text-[17px]. Nested mat-icon rule was dead (template
  uses <app-custom-icon>).

Build green.
---
 .../application-state.component.html          |  8 +++----
 .../application-state.component.scss          | 16 --------------
 .../application-state.component.ts            |  1 -
 .../app-table-cell-default.component.html     |  4 ++--
 .../app-table-cell-default.component.scss     | 17 --------------
 .../app-table-cell-default.component.ts       |  1 -
 .../user-profile-banner.component.html        | 10 ++++-----
 .../user-profile-banner.component.scss        | 22 -------------------
 .../user-profile-banner.component.ts          |  1 -
 9 files changed, 11 insertions(+), 69 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/shared/components/application-state/application-state.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.scss

diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html
index bef30d999b..5cf3ef54fb 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.html
@@ -1,12 +1,12 @@
-<div class="app-state" [ngClass]="{'app-state__with-icon': !hideIcon}">
+<div class="flex flex-row items-center" [class.h-\[25px\]]="!hideIcon">
   @if (!hideIcon) {
-    <app-application-state-icon [status]="status$ | async "></app-application-state-icon>
+    <app-application-state-icon class="pr-[5px]" [status]="status$ | async "></app-application-state-icon>
   }
-  <span class="app-state__label">{{ label$ | async }}</span>
+  <span class="overflow-hidden text-ellipsis">{{ label$ | async }}</span>
   @if (!initialStateOnly && (subLabel$ | async); as subLabel) {
     <span>
       <span>&nbsp;-&nbsp;</span>
-      <span class="app-state__sub-label">{{ subLabel$ | async }}</span>
+      <span class="overflow-hidden text-ellipsis">{{ subLabel$ | async }}</span>
     </span>
   }
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.scss b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.scss
deleted file mode 100644
index d46b5457d2..0000000000
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.app-state {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  app-application-state-icon {
-    padding-right: 5px;
-  }
-  &__with-icon {
-    height: 25px;
-  }
-  &__label,
-  &__sub-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts
index 8da9c20fe0..6d2bb9301a 100644
--- a/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts
+++ b/src/frontend/packages/core/src/shared/components/application-state/application-state.component.ts
@@ -9,7 +9,6 @@ import { ApplicationStateIconComponent } from './application-state-icon/applicat
 @Component({
   selector: 'app-application-state',
   templateUrl: './application-state.component.html',
-  styleUrls: ['./application-state.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html
index 7e61b5daf1..5ebd6ba6b4 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html
@@ -7,8 +7,8 @@
   <span class="link">
     @if (showShortLink) {
       @if (linkValue) {
-        <div class="link__short">
-          <a class="link__short__icon" [href]="linkValue" [attr.target]="linkTarget" (click)="$event.stopPropagation()">
+        <div class="flex">
+          <a class="text-[17px]" [href]="linkValue" [attr.target]="linkTarget" (click)="$event.stopPropagation()">
             <app-custom-icon>launch</app-custom-icon>
           </a>
           <a [href]="linkValue" [attr.target]="linkTarget">View</a>
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.scss
deleted file mode 100644
index e335f03e90..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.link {
-  &__short {
-    display: flex;
-
-    &__icon {
-      font-size: 17px;
-
-      mat-icon {
-        font-size: 16px;
-        height: 16px;
-        margin-right: 2px;
-        width: 16px;
-      }
-    }
-
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts
index ffbadbee8b..a6e8237e77 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.ts
@@ -12,7 +12,6 @@ import { CustomIconComponent } from '../../../../../shared/components/custom-mat
 @Component({
   selector: 'app-table-cell-default',
   templateUrl: 'app-table-cell-default.component.html',
-  styleUrls: ['app-table-cell-default.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
index 42096ea0e7..1bb0d90626 100644
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
+++ b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.html
@@ -1,14 +1,14 @@
-<div class="user-profile-banner">
-  <div class="user-profile-banner__avatar">
+<div class="flex flex-row p-6">
+  <div class="flex-none mr-6">
     <app-user-avatar size="large" [allowGravatar]="canUseGravatar" fallback="initials" [user]="userProfile"></app-user-avatar>
   </div>
   @if ((name || email)) {
-    <div class="user-profile-banner__title">
+    <div class="flex-1 text-[28px]">
       <div>{{ name }}</div>
-      <div class="user-profile-banner__email">{{ email }}</div>
+      <div class="text-base">{{ email }}</div>
     </div>
   } @else {
-    <div class="user-profile-banner__title">
+    <div class="flex-1 text-[28px]">
       <div>{{ username }}</div>
     </div>
   }
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.scss b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.scss
deleted file mode 100644
index 04fa576a04..0000000000
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$user-profile-avatar-size: 48px;
-.user-profile-banner {
-  display: flex;
-  flex-direction: row;
-  padding: 24px;
-  &__email {
-    font-size: 16px;
-  }
-  &__avatar {
-    flex: 0;
-    margin-right: 24px;
-    mat-icon {
-      font-size: $user-profile-avatar-size;
-      height: $user-profile-avatar-size;
-      width: $user-profile-avatar-size;
-    }
-  }
-  &__title {
-    flex: 1;
-    font-size: 28px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
index e0dd98e7e3..e2f53c5cd3 100644
--- a/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
+++ b/src/frontend/packages/core/src/shared/components/user-profile-banner/user-profile-banner.component.ts
@@ -6,7 +6,6 @@ import { UserAvatarComponent } from '../user-avatar/user-avatar.component';
 @Component({
   selector: 'app-user-profile-banner',
   templateUrl: './user-profile-banner.component.html',
-  styleUrls: ['./user-profile-banner.component.scss'],
   standalone: true,
   imports: [
     UserAvatarComponent

From c0eb1f94179807acbf4bb38a4fbc3b8c69b203cd Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 02:01:02 -0700
Subject: [PATCH 20/27] Migrate 3 Class B SCSS files in core (batch 7)

- shared/components/chips: drop .app-chips on container
  (replaced with my-[5px]); drop .app-chip__container (was
  redundant flex items-center); __label -> flex-1 h-[18px]
  leading-[18px] break-all; __close -> text-[15px] h-[15px]
  w-[15px] flex-none ml-[5px]; __busy-spinner -> flex-none
  ml-[5px]; __limit on button -> cursor-pointer font-light
  min-w-0 px-[5px]; removed no-rule __show-more and
  __show-less conditional ngClass.
- shared/components/code-block: .app-code-block ->
  p-[10px_20px] bg-[var(--code-block-bg)] border
  border-[var(--code-block-border)]
  text-[var(--code-block-text)]; __content -> flex flex-col
  justify-center mr-[20px] (added to existing utilities);
  __pre conditional -> [class.px-[20px]]; __copy ->
  top-[10px] right-[20px] (replacing prior top-2 right-2 to
  match SCSS).
- shared/components/list/list-table/table-cell-edit: .edit
  -> flex gap-1 justify-end; --subtle modifier was a
  parent-conditional rule against .btn-icon descendants;
  rewrote as per-button [ngClass]="subtle ? '...' : ''" with
  the exact utility set inlined on each of the three edit/
  save/cancel buttons.

Build green.
---
 .../components/chips/chips.component.html     | 13 ++++---
 .../components/chips/chips.component.scss     | 36 -------------------
 .../components/chips/chips.component.ts       |  1 -
 .../code-block/code-block.component.html      |  8 ++---
 .../code-block/code-block.component.scss      | 27 --------------
 .../code-block/code-block.component.ts        |  1 -
 .../table-cell-edit.component.html            |  8 ++---
 .../table-cell-edit.component.scss            | 14 --------
 .../table-cell-edit.component.ts              |  1 -
 9 files changed, 14 insertions(+), 95 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/shared/components/chips/chips.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/code-block/code-block.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.scss

diff --git a/src/frontend/packages/core/src/shared/components/chips/chips.component.html b/src/frontend/packages/core/src/shared/components/chips/chips.component.html
index 221a7f0401..fa6c90b201 100644
--- a/src/frontend/packages/core/src/shared/components/chips/chips.component.html
+++ b/src/frontend/packages/core/src/shared/components/chips/chips.component.html
@@ -2,13 +2,13 @@
   <span class="text-content-muted">None</span>
 }
 @if (chips && chips.length) {
-  <div class="app-chips flex flex-wrap gap-2"
+  <div class="flex flex-wrap gap-2 my-[5px]"
     [ngClass]="{'flex-col': stacked, 'flex-row-reverse': orientation==='rtl'}"
     >
     @for (chip of chips | slice:0:limit; track chip.key ?? chip.value; let i = $index) {
       <div class="chip app-chip inline-flex items-center gap-2 px-3 py-1 text-sm rounded-full border"
         [ngClass]="getChipClasses(chip.color)">
-        <div class="app-chip__container flex items-center gap-1">
+        <div class="flex items-center gap-1">
           @if (!!chip.url) {
             <a
               class="app-chip__link hover:underline"
@@ -17,7 +17,7 @@
               {{chip[displayProperty]}}
             </a>
           } @else {
-            <div class="app-chip__label">{{chip[displayProperty]}}</div>
+            <div class="flex-1 h-[18px] leading-[18px] break-all">{{chip[displayProperty]}}</div>
           }
           @if (chip.clearAction && (chip.hideClearButton$ | async) === false) {
             @if (!chip.busy || (chip.busy | async) === false) {
@@ -25,13 +25,13 @@
                 (click)="chip.clearAction(chip)"
                 (keydown.enter)="chip.clearAction(chip)"
                 (keydown.space)="chip.clearAction(chip); $event.preventDefault()"
-                class="material-icons text-sm app-chip__close cursor-pointer hover:text-red-600">
+                class="material-icons text-[15px] h-[15px] w-[15px] flex-none ml-[5px] cursor-pointer hover:text-red-600">
                 close
               </span>
             }
             @if (chip.busy && (chip.busy | async)) {
               <div
-                class="app-chip__busy-spinner">
+                class="flex-none ml-[5px]">
                 <div class="spinner w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
               </div>
             }
@@ -40,8 +40,7 @@
       </div>
     }
     @if (chips.length > lowerLimit) {
-      <button class="btn btn-sm btn-primary app-chips__limit"
-        [ngClass]="{'app-chips__show-more': atLowerLimit, 'app-chips__show-less': !atLowerLimit}"
+      <button class="btn btn-sm btn-primary cursor-pointer font-light min-w-0 px-[5px]"
         (click)="toggleLimit()"
         appClickStopPropagation>
         @if (atLowerLimit) {
diff --git a/src/frontend/packages/core/src/shared/components/chips/chips.component.scss b/src/frontend/packages/core/src/shared/components/chips/chips.component.scss
deleted file mode 100644
index 2468c9ecf4..0000000000
--- a/src/frontend/packages/core/src/shared/components/chips/chips.component.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.app-chip {
-  $size: 15px;
-  &__busy-spinner,
-  &__close {
-    flex: 0;
-    margin-left: 5px;
-  }
-  &__close {
-    cursor: pointer;
-    font-size: $size;
-    height: $size;
-    width: $size;
-  }
-  &__container {
-    align-items: center;
-    display: flex;
-  }
-  &__label {
-    flex: 1;
-    height: 18px; // height = 32px - 2 * 7px padding
-    line-height: 18px;
-    word-break: break-all;
-  }
-}
-
-.app-chips {
-  display: block;
-  margin: 5px 0;
-  &__limit {
-    cursor: pointer;
-    font-weight: 300;
-    min-width: 0;
-    padding: 0 5px;
-  }
-}
-
diff --git a/src/frontend/packages/core/src/shared/components/chips/chips.component.ts b/src/frontend/packages/core/src/shared/components/chips/chips.component.ts
index 3ec7afad22..5e4e05e91e 100644
--- a/src/frontend/packages/core/src/shared/components/chips/chips.component.ts
+++ b/src/frontend/packages/core/src/shared/components/chips/chips.component.ts
@@ -35,7 +35,6 @@ export class AppChip<T = string> implements IAppChip<T> {
     ClickStopPropagationDirective
   ],
   templateUrl: './chips.component.html',
-  styleUrls: ['./chips.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppChipsComponent implements OnInit {
diff --git a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html
index ebd24ff394..37cf303359 100644
--- a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html
+++ b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.html
@@ -1,11 +1,11 @@
-<div class="app-code-block relative rounded-md"
-  [ngClass]="{ 'app-code-block__pre': codeBlockStyle === 'pre'}">
-  <div class="app-code-block__content p-4 font-mono text-sm overflow-x-auto" #preBlock>
+<div class="relative rounded-md p-[10px_20px] bg-[var(--code-block-bg)] border border-[var(--code-block-border)] text-[var(--code-block-text)]"
+  [class.px-\[20px\]]="codeBlockStyle === 'pre'">
+  <div class="flex flex-col justify-center p-4 font-mono text-sm overflow-x-auto mr-[20px]" #preBlock>
     <ng-content></ng-content>
   </div>
   @if (!hideCopy) {
     <app-copy-to-clipboard
-      class="app-code-block__copy absolute top-2 right-2"
+      class="absolute top-[10px] right-[20px]"
       [text]="text"
       [compact]="true">
     </app-copy-to-clipboard>
diff --git a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.scss b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.scss
deleted file mode 100644
index b9455fabff..0000000000
--- a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.app-code-block {
-  padding: 10px 20px;
-  position: relative;
-  background-color: var(--code-block-bg);
-  border: 1px solid var(--code-block-border);
-  color: var(--code-block-text);
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    font-family: 'Source Code Pro', monospace;
-    font-size: 14px;
-    justify-content: center;
-    margin-right: 20px; // Prevent text overlapping copy button
-    color: var(--code-block-text);
-  }
-  &__pre {
-    // For wrapped PRE, vertical padding is already on the PRE element, so remove it here
-    padding: 0 20px;
-  }
-
-  &__copy {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts
index e1a1e64588..afe136915d 100644
--- a/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts
+++ b/src/frontend/packages/core/src/shared/components/code-block/code-block.component.ts
@@ -11,7 +11,6 @@ import { CopyToClipboardComponent } from '../copy-to-clipboard/copy-to-clipboard
     CopyToClipboardComponent
   ],
   templateUrl: './code-block.component.html',
-  styleUrls: ['./code-block.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CodeBlockComponent implements OnInit, OnDestroy {
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html
index f00a4ad40f..b696075992 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.html
@@ -1,14 +1,14 @@
-<div class="edit flex gap-1" [ngClass]="{'edit--subtle': subtle}">
+<div class="flex gap-1 justify-end">
   @if (!isEditing()) {
-    <button class="btn btn-icon btn-sm" (click)="dataSource.startEdit(row)"
+    <button class="btn btn-icon btn-sm" [ngClass]="subtle ? 'text-[18px] h-[25px] leading-[25px] opacity-60 pl-[5px] w-[35px]' : ''" (click)="dataSource.startEdit(row)"
       [disabled]="(dataSource.isSelecting$ | async) || (dataSource.isAdding$ | async)">
       <span class="material-icons">edit</span>
     </button>
   } @else {
-    <button id="table-cell-edit-done" class="btn btn-icon btn-sm btn-success" (click)="dataSource.saveEdit()">
+    <button id="table-cell-edit-done" class="btn btn-icon btn-sm btn-success" [ngClass]="subtle ? 'text-[18px] h-[25px] leading-[25px] opacity-60 pl-[5px] w-[35px]' : ''" (click)="dataSource.saveEdit()">
       <span class="material-icons">done</span>
     </button>
-    <button id="table-cell-edit-cancel" class="btn btn-icon btn-sm" (click)="dataSource.cancelEdit()">
+    <button id="table-cell-edit-cancel" class="btn btn-icon btn-sm" [ngClass]="subtle ? 'text-[18px] h-[25px] leading-[25px] opacity-60 pl-[5px] w-[35px]' : ''" (click)="dataSource.cancelEdit()">
       <span class="material-icons">clear</span>
     </button>
   }
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.scss
deleted file mode 100644
index e83483ff0c..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.edit {
-  display: flex;
-  justify-content: flex-end;
-  &--subtle {
-    .btn-icon {
-      font-size: 18px;
-      height: 25px;
-      line-height: 25px;
-      opacity: 0.6;
-      padding-left: 5px;
-      width: 35px;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts
index b929f4b682..448fd19e27 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-edit/table-cell-edit.component.ts
@@ -7,7 +7,6 @@ import { TableCellCustom } from '../../list.types';
 @Component({
   selector: 'app-table-cell-edit',
   templateUrl: './table-cell-edit.component.html',
-  styleUrls: ['./table-cell-edit.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

From dd6485094d081cc19215af1f416f7892e24d6911 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 02:04:11 -0700
Subject: [PATCH 21/27] Migrate 2 Class B SCSS files in core (batch 8)

- shared/components/user-avatar: parent-conditional
  __large state rewritten as size-aware [ngClass] on each
  child. Base: flex items-center justify-center. Root gets
  h-16 w-16 when large. Placeholder span: large -> text-[64px]
  h-16 w-16; small -> text-[36px] h-9 w-9 leading-[initial].
  Initials div: large -> text-[26px] h-[60px] w-[60px]
  leading-[60px]; small -> text-sm h-[30px] w-[30px]
  leading-[30px]; rounded-full text-center always. Gravatar
  img: large -> h-16 w-16; small -> h-9 w-9; rounded-full
  always.
- shared/components/file-input: .file-input -> flex flex-col;
  __disabled rewritten as [class.opacity-50]="disabled"
  [class.pointer-events-none]="disabled" on root. .file-input
  __input -> flex-1 bg-transparent border-none outline-none
  text-[inherit] font-[inherit] p-0 min-w-0. __button -> btn
  btn-sm btn-secondary ml-1 flex-none leading-[inherit]
  min-w-[auto] px-1. __field __form-field were redundant
  containers; __none and __hint had no template references
  (dead).

Build green.
---
 .../file-input/file-input.component.html      |  8 ++--
 .../file-input/file-input.component.scss      | 36 --------------
 .../file-input/file-input.component.ts        |  1 -
 .../user-avatar/user-avatar.component.html    | 10 ++--
 .../user-avatar/user-avatar.component.scss    | 48 -------------------
 .../user-avatar/user-avatar.component.ts      |  1 -
 6 files changed, 9 insertions(+), 95 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/shared/components/file-input/file-input.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss

diff --git a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html
index 2f9a317c35..127707b7b5 100644
--- a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html
+++ b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.html
@@ -1,23 +1,23 @@
-<div class="file-input" [ngClass]="{'file-input__disabled': disabled}">
+<div class="flex flex-col" [class.opacity-50]="disabled" [class.pointer-events-none]="disabled">
   <input [accept]="accept" type="file" (change)="onNativeInputFileSelect($event)" #inputFile hidden />
   @if (!buttonLabel) {
     <div class="form-field file-input__form-field">
       <div class="file-input__field input flex items-center justify-between"
         [class.opacity-50]="disabled"
         [class.cursor-not-allowed]="disabled">
-        <input type="text" class="file-input__input flex-1"
+        <input type="text" class="flex-1 bg-transparent border-none outline-none text-[inherit] font-[inherit] p-0 min-w-0"
           [placeholder]="placeholder || 'No file selected'"
           [value]="name"
           [disabled]="disabled"
           (change)="onPathInput($event)" />
         @if (fileCount) {
-          <button class="file-input__button btn btn-sm btn-secondary ml-1" type="button"
+          <button class="btn btn-sm btn-secondary ml-1 flex-none leading-[inherit] min-w-[auto] px-1" type="button"
             [disabled]="disabled" (click)="clearFile($event)"
             title="Clear file">
             <span class="material-icons text-sm">close</span>
           </button>
         }
-        <button class="file-input__button btn btn-sm btn-secondary ml-1" type="button"
+        <button class="btn btn-sm btn-secondary ml-1 flex-none leading-[inherit] min-w-[auto] px-1" type="button"
           [disabled]="disabled" (click)="selectFile($event)"
           title="Browse for file">
           <span class="material-icons text-sm">more_horiz</span>
diff --git a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.scss b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.scss
deleted file mode 100644
index 0182afc7bf..0000000000
--- a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.file-input {
-  display: flex;
-  flex-direction: column;
-
-  &__disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-  &__field {
-    align-items: center;
-    display: flex;
-  }
-  &__input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: inherit;
-    font: inherit;
-    padding: 0;
-    min-width: 0;
-  }
-  &__none {
-    opacity: 0.4;
-  }
-  &__button {
-    flex: 0;
-    line-height: inherit;
-    min-width: auto;
-    padding: 0 4px;
-  }
-  &__hint {
-    font-size: 75%;
-    margin-top: -16px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts
index 82d81f2dfc..6104cff0e9 100644
--- a/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts
+++ b/src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts
@@ -9,7 +9,6 @@ import { safeUnsubscribe } from '../../../core/utils.service';
 @Component({
   selector: 'app-file-input',
   templateUrl: './file-input.component.html',
-  styleUrls: ['./file-input.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
index ab5696d6dd..7b854a5463 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.html
@@ -1,11 +1,11 @@
-<div class="user-avatar" [ngClass]="{'user-avatar__large': size === 'large'}">
+<div class="flex items-center justify-center" [ngClass]="size === 'large' ? 'h-16 w-16' : ''">
   @if (!initials && !gravatar) {
-    <span class="material-icons user-avatar__placeholder">account_circle</span>
+    <span class="material-icons" [ngClass]="size === 'large' ? 'text-[64px] h-16 w-16' : 'text-[36px] h-9 w-9 leading-[initial]'">account_circle</span>
   }
   @if (initials) {
-    <div [ngClass]="{'user-avatar__header': color === 'header'}" class="user-avatar__initials">{{ initials }}</div>
+    <div [ngClass]="size === 'large' ? 'rounded-full text-center text-[26px] h-[60px] w-[60px] leading-[60px]' : 'rounded-full text-center text-sm h-[30px] w-[30px] leading-[30px]'" [class.user-avatar__header]="color === 'header'">{{ initials }}</div>
   }
   @if (gravatar) {
-    <img class="user-avatar__gravatar" [src]="gravatar" alt="">
+    <img class="rounded-full" [ngClass]="size === 'large' ? 'h-16 w-16' : 'h-9 w-9'" [src]="gravatar" alt="">
   }
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
deleted file mode 100644
index eae71a5163..0000000000
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.user-avatar {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  &__placeholder {
-    font-size: 36px;
-    height: 36px;
-    line-height: initial;
-    width: 36px;
-  }
-  &__initials {
-    border-radius: 50%;
-    font-size: 14px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    width: 30px;
-  }
-  &__gravatar {
-    border-radius: 50%;
-    height: 36px;
-    width: 36px;
-  }
-  &__large {
-    height: 64px;
-    width: 64px;
-
-    .user-avatar {
-      &__initials {
-        font-size: 26px;
-        height: 60px;
-        line-height: 60px;
-        width: 60px;
-      }
-      &__gravatar {
-        border-radius: 50%;
-        height: 64px;
-        width: 64px;
-      }
-      &__placeholder {
-        font-size: 64px;
-        height: 64px;
-        width: 64px;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
index b39fe4a565..818047f893 100644
--- a/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
+++ b/src/frontend/packages/core/src/shared/components/user-avatar/user-avatar.component.ts
@@ -7,7 +7,6 @@ import { MD5 } from './md5';
 @Component({
   selector: 'app-user-avatar',
   templateUrl: './user-avatar.component.html',
-  styleUrls: ['./user-avatar.component.scss'],
   standalone: true,
   imports: [
     CommonModule

From 84ff72bdc9df33cd5dee135b6002282b006f4c48 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 02:08:18 -0700
Subject: [PATCH 22/27] Migrate 3 Class B SCSS files in core (batch 9)

- shared/components/stratos-title: .stratos-title -> flex
  flex-col justify-center pt-6 (text-center already on
  template); __logo -> self-center pt-3 pb-4 w-60 (preserving
  existing mx-auto mb-4); __header had display:none -> hidden
  (h1 stays in DOM for accessibility but visually hidden as
  the logo image is the visual title); __subtitle p element
  had no SCSS rule, just kept its existing utilities.
- shared/components/list/list-types/endpoint/table-cell-
  endpoint-status: bare div selector inlined as flex
  items-center on the root div; bare span { margin-right:
  8px } rule was global to all descendant spans (including
  nested (local) spans); migrated as explicit mr-2 on each
  text-label span and on the two nested (local) spans to
  preserve original cascade behavior.
- shared/components/copy-to-clipboard: parent-conditional
  .copy__success rule replaced by direct opacity bindings on
  each child. .copy__copied-div -> absolute right-0 top-0
  flex items-center gap-1 transition-opacity duration-300
  with [class.opacity-100]/[class.opacity-0] driven by
  copySuccessWait. .copy__copy-icon -> absolute right-0 top-0
  transition-opacity duration-300 with inverse opacity
  binding. The bare-span margin-right: 5px under
  __copied-div migrated as mr-[5px] on the msg and icon
  spans. .copy__copy-icon-small was dead (no template ref).

Build green.
---
 .../copy-to-clipboard.component.html          | 16 ++++----
 .../copy-to-clipboard.component.scss          | 40 -------------------
 .../copy-to-clipboard.component.ts            |  1 -
 .../table-cell-endpoint-status.component.html | 22 +++++-----
 .../table-cell-endpoint-status.component.scss |  7 ----
 .../table-cell-endpoint-status.component.ts   |  1 -
 .../stratos-title.component.html              |  8 ++--
 .../stratos-title.component.scss              | 20 ----------
 .../stratos-title/stratos-title.component.ts  |  1 -
 9 files changed, 23 insertions(+), 93 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.scss

diff --git a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html
index eb8a499782..2954e7868a 100644
--- a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html
+++ b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.html
@@ -1,19 +1,19 @@
-<div class="copy relative inline-flex items-center gap-2"
-  [ngClass]="{'copy__success': copySuccessWait}">
-  <div class="copy__copied-div flex items-center gap-1"
+<div class="relative inline-flex items-center gap-2">
+  <div class="absolute right-0 top-0 flex items-center gap-1 transition-opacity duration-300"
     [class.opacity-100]="copySuccessWait"
-    [class.opacity-0]="!copySuccessWait"
-    class="transition-opacity duration-300">
+    [class.opacity-0]="!copySuccessWait">
     @if (showSuccessText) {
-      <span class="copy__copied-msg text-sm text-success-shade-600">Copied to clipboard</span>
+      <span class="text-sm text-success-shade-600 mr-[5px] whitespace-nowrap">Copied to clipboard</span>
     }
-    <span class="material-icons copy__copied-icon text-success-shade-600"
+    <span class="material-icons text-success-shade-600 mr-[5px]"
       [ngClass]="{'text-sm': compact, 'text-base': !compact}">
       check_circle
     </span>
   </div>
   @if (canCopy) {
-    <span class="material-icons copy__copy-icon cursor-pointer text-content-muted hover:text-content-text transition-colors"
+    <span class="material-icons absolute right-0 top-0 cursor-pointer text-content-muted hover:text-content-text transition-opacity duration-300"
+      [class.opacity-0]="copySuccessWait"
+      [class.opacity-100]="!copySuccessWait"
       [ngClass]="{'text-sm': compact, 'text-base': !compact}"
       role="button" tabindex="0"
       (click)="copyToClipboard($event)"
diff --git a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.scss b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.scss
deleted file mode 100644
index 5464339f09..0000000000
--- a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.copy {
-  display: flex;
-  position: relative;
-  &__copied-div,
-  &__copy-icon {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity 250ms linear;
-  }
-  &__copied-div {
-    align-items: center;
-    display: flex;
-    opacity: 0;
-    span {
-      margin-right: 5px;
-    }
-  }
-  &__copied-msg {
-    white-space: nowrap;
-  }
-  &__copy-icon {
-    cursor: pointer;
-  }
-  &__copy-icon-small {
-    font-size: 16px;
-    height: 16px;
-    width: 16px;
-  }
-  &__success {
-    .copy {
-      &__copied-div {
-        opacity: 1;
-      }
-      &__copy-icon {
-        opacity: 0;
-      }
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
index 6bc8560f2d..d62fe357f8 100644
--- a/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
+++ b/src/frontend/packages/core/src/shared/components/copy-to-clipboard/copy-to-clipboard.component.ts
@@ -6,7 +6,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angu
   standalone: true,
   imports: [CommonModule],
   templateUrl: './copy-to-clipboard.component.html',
-  styleUrls: ['./copy-to-clipboard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CopyToClipboardComponent implements OnInit {
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html
index ca66f8abec..38cccf9cdb 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.html
@@ -1,30 +1,30 @@
-<div>
+<div class="flex items-center">
   @if (connectable) {
     @if (row.connectionStatus === 'connected' ) {
       @if (config?.showLabel) {
-        <span>Connected @if (row.local) {
-          <span>(local)</span>
+        <span class="mr-2">Connected @if (row.local) {
+          <span class="mr-2">(local)</span>
         }</span>
       }
       <app-custom-icon fontSet="stratos-icons">endpoints_connected</app-custom-icon>
     }
     @if (row.connectionStatus === 'disconnected') {
       @if (config?.showLabel) {
-        <span>Disconnected @if (row.local) {
-          <span>(local)</span>
+        <span class="mr-2">Disconnected @if (row.local) {
+          <span class="mr-2">(local)</span>
         }</span>
       }
       <app-custom-icon fontSet="stratos-icons">endpoints_disconnected</app-custom-icon>
     }
     @if (row.connectionStatus === 'checking') {
       @if (config?.showLabel) {
-        <span>Updating </span>
+        <span class="mr-2">Updating </span>
       }
       <app-spinner [diameter]="20"></app-spinner>
     }
     @if (!row.connectionStatus || row.connectionStatus === 'unknown') {
       @if (config?.showLabel) {
-        <span>Unknown </span>
+        <span class="mr-2">Unknown </span>
       }
       <app-custom-icon>help_outline</app-custom-icon>
     }
@@ -32,25 +32,25 @@
     @if (row?.endpoint_metadata?.status; as status) {
       @if (status === 'Synchronized') {
         @if (config?.showLabel) {
-          <span>Synchronized </span>
+          <span class="mr-2">Synchronized </span>
         }
         <app-custom-icon>cloud_done</app-custom-icon>
       }
       @if (status === 'Synchronizing') {
         @if (config?.showLabel) {
-          <span>Synchronizing </span>
+          <span class="mr-2">Synchronizing </span>
         }
         <app-spinner [diameter]="20"></app-spinner>
       }
       @if (status === 'Pending') {
         @if (config?.showLabel) {
-          <span>Sync Pending</span>
+          <span class="mr-2">Sync Pending</span>
         }
         <app-custom-icon>hourglass_empty</app-custom-icon>
       }
       @if (status === 'Failed') {
         @if (config?.showLabel) {
-          <span>Synchronization failed</span>
+          <span class="mr-2">Synchronization failed</span>
         }
         <app-custom-icon>sync_problem</app-custom-icon>
       }
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.scss b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.scss
deleted file mode 100644
index b238964bca..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-div {
-  align-items: center;
-  display: flex;
-  span {
-    margin-right: 8px;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts
index 02df0938e4..a1c80e1669 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component.ts
@@ -8,7 +8,6 @@ import { CustomIconComponent } from '../../../../../../shared/components/custom-
 @Component({
   selector: 'app-table-cell-endpoint-status',
   templateUrl: './table-cell-endpoint-status.component.html',
-  styleUrls: ['./table-cell-endpoint-status.component.scss'],
   standalone: true,
   imports: [
     CustomIconComponent
diff --git a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html
index 907b998a8f..283dbb2511 100644
--- a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html
+++ b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.html
@@ -1,10 +1,10 @@
-<div class="stratos-title text-center">
-  <img class="stratos-title__logo mx-auto mb-4" [src]="themeLogo()" alt="" />
-  <h1 class="stratos-title__header text-2xl font-bold text-content-text mb-2">
+<div class="flex flex-col justify-center pt-6 text-center">
+  <img class="self-center pt-3 pb-4 w-60 mb-4" [src]="themeLogo()" alt="" />
+  <h1 class="hidden">
     {{ title || themeTitle() }}
   </h1>
   @if (themeSubtitle()) {
-    <p class="stratos-title__subtitle text-content-muted text-sm">
+    <p class="text-content-muted text-sm">
       {{ themeSubtitle() }}
     </p>
   }
diff --git a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.scss b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.scss
deleted file mode 100644
index be2b80bd6e..0000000000
--- a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.stratos-title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding-top: 24px;
-  &__logo {
-    align-self: center;
-    padding: 12px 0 16px;
-    width: 240px;
-  }
-  &__header {
-    display: none;
-    font-size: 28px;
-    font-weight: 500;
-    letter-spacing: 2px;
-    margin: 0;
-    text-align: center;
-    text-transform: uppercase;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts
index fbdeab9812..e04e413e29 100644
--- a/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts
+++ b/src/frontend/packages/core/src/shared/components/stratos-title/stratos-title.component.ts
@@ -10,7 +10,6 @@ import { StratosBrandingService } from "../../../../../theme/stratos-branding.se
 @Component({
   selector: "app-stratos-title",
   templateUrl: "./stratos-title.component.html",
-  styleUrls: ["./stratos-title.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [],

From 0b1d5246a31116fc0ae63a3ee5a482ea984049a9 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 02:46:07 -0700
Subject: [PATCH 23/27] Migrate 2 Class B SCSS files in core (batch 10)

Both files used parent-conditional state CSS that toggled
child styles when a state class was present on the root.
Rewritten as direct conditional [ngClass] / [class.X] on
each affected element keyed off the same signal.

- shared/components/sidepanel-preview: root no longer carries
  .sidepanel-preview / .sidepanel-preview__preview; instead
  each affected element binds against
  sidePanelService.previewMode():
    - root: h-[calc(100vh-57px)] vs h-screen
    - header: h-[48px] flex-[0_0_48px] vs h-14 flex-[0_0_56px]
    - h1: text-[16px] vs text-xl
    - close button top: top-[3px] vs top-[7px]
  Static utilities (bg/border/CSS vars, header layout,
  favorite, custom slot, content) inlined directly.
- shared/components/upload-progress-indicator: dropped the
  parent .upload-progress-done toggle; each of the three
  children (cloud icon, done icon, spinner) binds
  [class.opacity-0]/[class.opacity-100] off value === 100,
  using the same transition-opacity duration-1000 base.
  Sass $progress-size (140px) and $progress-transition-speed
  (1s) inlined as h-[140px] / w-[140px] / duration-1000.

Build green.
---
 .../sidepanel-preview.component.html          | 21 +++---
 .../sidepanel-preview.component.scss          | 72 -------------------
 .../sidepanel-preview.component.ts            |  1 -
 .../upload-progress-indicator.component.html  | 14 ++--
 .../upload-progress-indicator.component.scss  | 44 ------------
 .../upload-progress-indicator.component.ts    |  1 -
 6 files changed, 23 insertions(+), 130 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.scss

diff --git a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html
index ab587569fc..89ebd7f5c6 100644
--- a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html
+++ b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.html
@@ -1,19 +1,24 @@
-<div class="sidepanel-preview" [ngClass]="{'sidepanel-preview__preview': sidePanelService.previewMode()}">
-  <div class="sidepanel-preview__header">
-    <h1>{{ title }}</h1>
+<div class="flex flex-col bg-[var(--card-bg)] text-[var(--content-text)]"
+  [ngClass]="sidePanelService.previewMode() ? 'h-[calc(100vh-57px)]' : 'h-screen'">
+  <div class="flex bg-[var(--card-header-bg)] border-b border-[var(--content-border)]"
+    [ngClass]="sidePanelService.previewMode() ? 'h-[48px] flex-[0_0_48px]' : 'h-14 flex-[0_0_56px]'">
+    <h1 class="self-center ml-3 text-[var(--content-text)]"
+      [ngClass]="sidePanelService.previewMode() ? 'text-[16px]' : 'text-xl'">{{ title }}</h1>
     @if (favorite) {
-      <app-entity-favorite-star [small]="true" class="sidepanel-preview__favorite" [favorite]="favorite"></app-entity-favorite-star>
+      <app-entity-favorite-star [small]="true" class="flex items-center ml-[10px] opacity-60" [favorite]="favorite"></app-entity-favorite-star>
     }
-    <div  class="sidepanel-preview__custom">
+    <div class="self-center flex-1 mx-[10px] mr-[50px]">
       @if (header) {
         <ng-container [cdkPortalOutlet]="header"></ng-container>
       }
     </div>
-    <button class="sidepanel__close btn btn-icon" type="button" (click)="sidePanelService.hide()">
+    <button class="btn btn-icon absolute right-[5px]"
+      [ngClass]="sidePanelService.previewMode() ? 'top-[3px]' : 'top-[7px]'"
+      type="button" (click)="sidePanelService.hide()">
       <app-custom-icon>close</app-custom-icon>
     </button>
   </div>
-  <div class="sidepanel-preview__content">
+  <div class="flex-1 overflow-y-auto p-[12px_15px] relative bg-[var(--card-bg)]">
     <ng-content></ng-content>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss
deleted file mode 100644
index 4851d4a8ac..0000000000
--- a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.sidepanel-preview {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background-color: var(--card-bg);
-  color: var(--content-text);
-
-  &__preview {
-    height: calc(100vh - 57px);
-
-    .sidepanel-preview__header {
-      flex: 0 0 48px;
-      height: 48px;
-
-      h1 {
-        font-size: 16px;
-      }
-
-      .sidepanel__close {
-        position: absolute;
-        right: 5px;
-        top: 3px;
-      }
-    }
-  }
-  &__header {
-    display: flex;
-    flex: 0 0 56px;
-    height: 56px;
-    background-color: var(--card-header-bg);
-    border-bottom: 1px solid var(--content-border);
-
-    h1 {
-      align-self: center;
-      font-size: 20px;
-      margin-left: 12px;
-      color: var(--content-text);
-    }
-
-    .sidepanel__close {
-      position: absolute;
-      right: 5px;
-      top: 7px;
-    }
-  }
-  &__custom {
-    align-self: center;
-    flex: 1;
-    margin: 0 50px 0 10px;
-  }
-
-  &__content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px 15px;
-    position: relative;
-    background-color: var(--card-bg);
-  }
-
-  &__side-help-button {
-    position: absolute;
-    right: 5px;
-    top: 7px;
-  }
-
-  &__favorite {
-    align-items: center;
-    display: flex;
-    margin-left: 10px;
-    opacity: 0.6;
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts
index 705f7dfd11..d319a0538c 100644
--- a/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts
+++ b/src/frontend/packages/core/src/shared/components/sidepanel-preview/sidepanel-preview.component.ts
@@ -10,7 +10,6 @@ import { CustomIconComponent } from '../../../shared/components/custom-material/
 @Component({
   selector: 'app-sidepanel-preview',
   templateUrl: './sidepanel-preview.component.html',
-  styleUrls: ['./sidepanel-preview.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html
index 6d79dcb858..773511a892 100644
--- a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html
+++ b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.html
@@ -1,7 +1,13 @@
-<div class="upload-progress" [ngClass]="{'upload-progress-done': value === 100}">
-  <app-custom-icon class="upload-progress__icon">cloud_upload</app-custom-icon>
-  <app-custom-icon class="upload-progress__done">done</app-custom-icon>
-  <div class="upload-progress__spinner">
+<div class="relative w-[140px] h-[140px] align-middle">
+  <app-custom-icon class="absolute h-[140px] w-[140px] text-[96px] pt-4 border-4 border-solid rounded-full text-center transition-opacity duration-1000"
+    [class.opacity-0]="value === 100"
+    [class.opacity-100]="value !== 100">cloud_upload</app-custom-icon>
+  <app-custom-icon class="absolute h-[140px] w-[140px] text-[96px] pt-4 border-4 border-solid rounded-full text-center transition-opacity duration-1000"
+    [class.opacity-100]="value === 100"
+    [class.opacity-0]="value !== 100">done</app-custom-icon>
+  <div class="absolute w-[140px] h-[140px] transition-opacity duration-1000"
+    [class.opacity-0]="value === 100"
+    [class.opacity-100]="value !== 100">
     <custom-progress-bar [value]="value" mode="determinate" color="primary"></custom-progress-bar>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.scss b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.scss
deleted file mode 100644
index fae5d91687..0000000000
--- a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-$progress-size: 140px;
-$progress-transition-speed: 1s;
-.upload-progress {
-  height: $progress-size;
-  position: relative;
-  vertical-align: center;
-  width: $progress-size;
-  &__icon,
-  &__done {
-    border-radius: 50%;
-    border-style: solid;
-    border-width: 4px;
-    font-size: 96px;
-    height: $progress-size;
-    padding-top: 16px;
-    position: absolute;
-    text-align: center;
-    transition: opacity $progress-transition-speed linear;
-    width: $progress-size;
-  }
-  &__done {
-    opacity: 0;
-  }
-  &__spinner {
-    height: $progress-size;
-    opacity: 1;
-    position: absolute;
-    transition: opacity $progress-transition-speed linear;
-    width: $progress-size;
-  }
-}
-.upload-progress-done {
-  .upload-progress {
-    &__done {
-      opacity: 1;
-    }
-    &__icon {
-      opacity: 0;
-    }
-    &__spinner {
-      opacity: 0;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts
index a4c99943e9..fa4c85598f 100644
--- a/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts
+++ b/src/frontend/packages/core/src/shared/components/upload-progress-indicator/upload-progress-indicator.component.ts
@@ -6,7 +6,6 @@ import { CustomIconComponent } from '../../../shared/components/custom-material/
 @Component({
   selector: 'app-upload-progress-indicator',
   templateUrl: './upload-progress-indicator.component.html',
-  styleUrls: ['./upload-progress-indicator.component.scss'],
   standalone: true,
   imports: [
     CommonModule,

From af000c79d6c3a59d48e8cd97916dbb994b12c625 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 03:00:17 -0700
Subject: [PATCH 24/27] Migrate 4 final Class B SCSS files in core (batch 11)

Re-audited the four files the read-only audit agents had
flagged as Class C. All four turned out to be migratable
after closer inspection.

- features/user-profile/profile-info: ENTIRELY dead. None of
  .user-profile / .user-profile__* / mat-card:not(:first-
  child) match the template (template uses .card / .card-
  header / .card-body Tailwind component classes and no
  <mat-card>). Just delete + drop styleUrls.
- core/log-out-dialog: mat-dialog-actions bare selector and
  __message > mat-icon nested rule were dead (template uses
  <div class="dialog-actions"> and <i class="material-icons">
  respectively). Live rules inlined: __outer ->
  m-[-24px_-24px_0] p-[24px_50px] relative; __progress ->
  absolute inset-x-0 top-0; __content -> p-5; __message ->
  flex flex-row items-center; __message > div bare-tag ->
  flex-1 text-lg font-bold; __actions -> justify-center.
- features/setup/local-account-wizard: all .local-setup-
  wizard* BEM was dead (template never uses them). All
  nested app-steppers .child { @apply ... } rules were dead
  under emulated encapsulation (the child elements live in
  the steppers child component's own template). app-stratos-
  title rule dead (no <app-stratos-title> in template).
  Three live rules inlined: .page-container -> flex flex-
  col h-full on root; bare form -> min-w-[400px] w-full on
  the password form; app-steppers host -> class="flex flex-1
  my-6".
- features/setup/uaa-wizard/console-uaa-wizard: identical
  shape to local-account-wizard, EXCEPT the component had
  encapsulation: ViewEncapsulation.None, which made the
  otherwise-dead nested rules leak globally to every
  <app-steppers> instance in the app. Switched encapsulation
  back to default (Emulated) and dropped the SCSS. Same
  three live rules inlined as in the sibling wizard, plus
  the second form (UAA Scope step) gets the same
  min-w-[400px] w-full.

41/41 Class B core files now migrated. Build green.
---
 .../log-out-dialog.component.html             | 12 ++--
 .../log-out-dialog.component.scss             | 43 ------------
 .../log-out-dialog.component.ts               |  1 -
 .../local-account-wizard.component.html       |  6 +-
 .../local-account-wizard.component.scss       | 69 -------------------
 .../local-account-wizard.component.ts         |  1 -
 .../console-uaa-wizard.component.html         |  8 +--
 .../console-uaa-wizard.component.scss         | 65 -----------------
 .../console-uaa-wizard.component.ts           |  4 +-
 .../profile-info/profile-info.component.scss  | 35 ----------
 .../profile-info/profile-info.component.ts    |  1 -
 11 files changed, 14 insertions(+), 231 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss

diff --git a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html
index ac3d5ad0ac..d0a6c4f36e 100644
--- a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html
+++ b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.html
@@ -1,15 +1,15 @@
-<div class="logout-dialog__outer">
-  <app-progress-bar class="logout-dialog__progress" mode="determinate" [value]="percentage">
+<div class="m-[-24px_-24px_0] p-[24px_50px] relative">
+  <app-progress-bar class="absolute inset-x-0 top-0" mode="determinate" [value]="percentage">
   </app-progress-bar>
-  <div class="dialog-content logout-dialog__content">
-    <div class="logout-dialog__message">
+  <div class="dialog-content p-5">
+    <div class="flex flex-row items-center">
       <i class="material-icons">pan_tool</i>
-      <div>
+      <div class="flex-1 text-lg font-bold">
         Are you still there?
       </div>
     </div>
   </div>
-  <div class="dialog-actions logout-dialog__actions">
+  <div class="dialog-actions justify-center">
     <button class="btn btn-primary" (click)="dialogRef.close(true)">Yes</button>
   </div>
 </div>
diff --git a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.scss b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.scss
deleted file mode 100644
index 49762d6159..0000000000
--- a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-mat-dialog-actions {
-  justify-content: flex-end;
-}
-
-.logout-dialog {
-  &__content {
-    padding: 20px;
-  }
-  &__progress {
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-  &__outer {
-    margin: -24px -24px 0;
-    padding: 24px 50px;
-    position: relative;
-  }
-  &__actions {
-    justify-content: center;
-  }
-  &__message {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-
-    > mat-icon {
-      flex: 0;
-      font-size: 48px;
-      height: 48px;
-      margin-right: 20px;
-      opacity: 0.7;
-      width: 48px;
-    }
-    > div {
-      flex: 1;
-      font-size: 18px;
-      font-weight: bold;
-    }
-  }
-}
-
diff --git a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts
index dbf4c95dec..66a0aa00b7 100644
--- a/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts
+++ b/src/frontend/packages/core/src/core/log-out-dialog/log-out-dialog.component.ts
@@ -10,7 +10,6 @@ import { AppProgressBarComponent } from '../../shared/components/progress-bar/ap
 @Component({
   selector: 'app-log-out-dialog',
   templateUrl: './log-out-dialog.component.html',
-  styleUrls: ['./log-out-dialog.component.scss'],
   standalone: true,
   imports: [
     AppProgressBarComponent
diff --git a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html
index a1f9ce3cde..204529c195 100644
--- a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html
+++ b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html
@@ -1,10 +1,10 @@
-<div class="page-container setup">
+<div class="setup flex flex-col h-full">
   <app-page-header hideMenu="true" [showHistory]="false">
     <h1>{{title}} Setup with Local Admin Account</h1>
   </app-page-header>
   <app-show-page-header></app-show-page-header>
   <div class="p-6">
-    <app-steppers>
+    <app-steppers class="flex flex-1 my-6">
       <app-step title="Local Account Information" [signalHandle]="signalHandle">
         <app-loading-page [isLoading]="applyingSetup()" alert="Saving configuration"
           text="Please wait - this will take a few moments">
@@ -16,7 +16,7 @@ <h1>{{title}} Setup with Local Admin Account</h1>
                   class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">admin</span>
                 and the password that you choose below.</p>
             </div>
-            <form [formGroup]="passwordForm" class="space-y-4">
+            <form [formGroup]="passwordForm" class="space-y-4 min-w-[400px] w-full">
               <div class="space-y-4">
                 <div class="form-field">
                   <label class="form-label" for="adminPassword">Password</label>
diff --git a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.scss b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.scss
deleted file mode 100644
index 0a0a427260..0000000000
--- a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@reference 'tailwindcss';
-
-.page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.local-setup-wizard {
-  display: flex;
-  flex: 1;
-  margin: 0 100px;
-  &__form {
-    display: block;
-    flex-direction: column;
-    width: 100%;
-  }
-  &__form-block {
-    display: flex;
-    flex-direction: column;
-    margin-left: 36px;
-  }
-  &__form-section {
-    margin: 12px 0 6px;
-  }
-  &__intro {
-    font-size: 18px;
-    font-weight: 600;
-    padding-top: 36px;
-  }
-  &__form-username {
-    font-family: Source Code Pro;
-    font-weight: bold;
-  }
-  &__sso-block {
-    margin-left: 28px;
-    margin-top: 6px;
-    code {
-      font-size: 14px;
-      padding-left: 6px;
-    }
-  }
-  form {
-    min-width: 400px;
-    width: 100%;
-  }
-  app-steppers {
-    @apply flex flex-1 my-6; // 24px = spacing[6]
-    > .steppers__wrapper {
-      @apply flex-1;
-    }
-    .stepper-form {
-      @apply mt-0 max-w-none;
-    }
-    .form-field,
-    .custom-form-field {
-      @apply max-w-[450px];
-    }
-    .steppers__contents {
-      @apply mx-12 overflow-y-auto; // 48px = spacing[12]
-    }
-    .steppers__navigation {
-      @apply mt-9; // 36px = spacing[9]
-    }
- }
-  app-stratos-title {
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts
index 0efaea8383..68c90d5e4d 100644
--- a/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts
+++ b/src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.ts
@@ -32,7 +32,6 @@ interface LocalAccountForm {
 @Component({
 selector: 'app-local-account-wizard',
   templateUrl: './local-account-wizard.component.html',
-  styleUrls: ['./local-account-wizard.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html
index 72a44ff38e..be2db60536 100644
--- a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html
+++ b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html
@@ -1,16 +1,16 @@
-<div class="page-container setup">
+<div class="setup flex flex-col h-full">
   <app-page-header hideMenu="true" [showHistory]="false">
     <h1>{{title}} Setup with Cloud Foundry UAA</h1>
   </app-page-header>
   <app-show-page-header></app-show-page-header>
   <div class="p-6">
-    <app-steppers>
+    <app-steppers class="flex flex-1 my-6">
       <app-step title="UAA Endpoint" [signalHandle]="uaaFormStepHandle">
         <div class="space-y-6">
           <p class="text-content-text">Please enter the following information to allow <app-product-name></app-product-name> to authenticate
           with
         your UAA:</p>
-        <form [formGroup]="uaaForm" class="space-y-6">
+        <form [formGroup]="uaaForm" class="space-y-6 min-w-[400px] w-full">
           <div class="space-y-4">
             <div class="form-field">
               <label class="form-label" for="apiUrl">UAA Endpoint URL</label>
@@ -91,7 +91,7 @@ <h1>{{title}} Setup with Cloud Foundry UAA</h1>
       text="Please wait - this will take a few moments">
       <div class="space-y-4">
         <p class="text-content-text">Please select the UAA scope to use to identify users as <app-product-name></app-product-name> Administrators:</p>
-        <form class="space-y-4">
+        <form class="space-y-4 min-w-[400px] w-full">
           <div class="form-field">
             <label class="form-label" for="uaaScope">UAA Scope</label>
             <select id="uaaScope" class="input" [(ngModel)]="selectedScope" name="UAAScope">
diff --git a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.scss b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.scss
deleted file mode 100644
index aa164bdf46..0000000000
--- a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@reference 'tailwindcss';
-
-.page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.uaa-wizard {
-  display: flex;
-  flex: 1;
-  margin: 0 100px;
-  &__form {
-    display: block;
-    flex-direction: column;
-    width: 100%;
-  }
-  &__form-block {
-    display: flex;
-    flex-direction: column;
-    margin-left: 36px;
-  }
-  &__form-section {
-    margin: 12px 0 6px;
-  }
-  &__intro {
-    font-size: 18px;
-    font-weight: 600;
-    padding-top: 36px;
-  }
-  &__sso-block {
-    margin-left: 28px;
-    margin-top: 6px;
-    code {
-      font-size: 14px;
-      padding-left: 6px;
-    }
-  }
-  form {
-    min-width: 400px;
-    width: 100%;
-  }
-  app-steppers {
-    @apply flex flex-1 my-6; // 24px = spacing[6]
-    > .steppers__wrapper {
-      @apply flex-1;
-    }
-    .stepper-form {
-      @apply mt-0 max-w-none;
-    }
-    .form-field,
-    .custom-form-field {
-      @apply max-w-[450px];
-    }
-    .steppers__contents {
-      @apply mx-12 overflow-y-auto; // 48px = spacing[12]
-    }
-    .steppers__navigation {
-      @apply mt-9; // 36px = spacing[9]
-    }
- }
-  app-stratos-title {
-    text-align: center;
-  }
-}
diff --git a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts
index 2b4d24f0e2..7752ab00a7 100644
--- a/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts
+++ b/src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
@@ -38,8 +38,6 @@ import { LoadingPageComponent } from '../../../shared/components/loading-page/lo
 @Component({
   selector: 'app-console-uaa-wizard',
   templateUrl: './console-uaa-wizard.component.html',
-  styleUrls: ['./console-uaa-wizard.component.scss'],
-  encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss
deleted file mode 100644
index 545e68de59..0000000000
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$user-profile-avatar-size: 48px;
-
-.user-profile {
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 56px;
-  mat-card:not(:first-child) {
-    margin-top: 24px;
-  }
-  &__section {
-    margin-top: 10px;
-  }
-
-  &__info {
-    flex: 1;
-    overflow: auto;
-  }
-  &__content {
-    margin: 2% 24px;
-  }
-
-  &__local-storage {
-    &--div {
-      padding-bottom: 10px;
-    }
-
-    button {
-      margin-left: 15px;
-    }
-  }
-}
diff --git a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
index a4dc18f1ce..31746947ff 100644
--- a/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
+++ b/src/frontend/packages/core/src/features/user-profile/profile-info/profile-info.component.ts
@@ -23,7 +23,6 @@ import { AppChipsComponent } from '../../../shared/components/chips/chips.compon
 @Component({
   selector: 'app-profile-info',
   templateUrl: './profile-info.component.html',
-  styleUrls: ['./profile-info.component.scss'],
   standalone: true,
   imports: [
     CommonModule,

From 0eddc659aaf822aa353abe1ca09e14beaa8df187 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 07:41:40 -0700
Subject: [PATCH 25/27] Migrate 21 cf :host SCSS files to host utility classes
 (batch 12)

Add .app-host-fill and .app-host-flex-1 to core/src/styles.scss,
then convert 21 cloud-foundry components with single-rule :host
stylesheets to apply the new class via host: { class: '...' } in
the @Component decorator.

Removed stylesheets:
- 12 :host { display:block; height:100%; min-height:0 } files
  (cf signal-tab cluster: applications, marketplace, organizations,
  organization-spaces, routes, services, users, plus all 5 nested
  space-* signal tabs)
- 9 :host { flex: 1 } files (create-application step1/step2/step3,
  deploy-application-step2-1, create-organization-step,
  create-space-step, edit-organization-step, detach-apps,
  select-service)

styleUrls entries dropped; no template changes; component public
API unchanged. Build green: 0 errors, 14.4s.
---
 .../create-application-step2.component.scss              | 3 ---
 .../create-application-step2.component.ts                | 2 +-
 .../create-application-step3.component.scss              | 3 ---
 .../create-application-step3.component.ts                | 2 +-
 .../deploy-application-step2-1.component.scss            | 3 ---
 .../deploy-application-step2-1.component.ts              | 2 +-
 .../create-organization-step.component.scss              | 3 ---
 .../create-organization-step.component.ts                | 2 +-
 .../create-space-step/create-space-step.component.scss   | 3 ---
 .../create-space-step/create-space-step.component.ts     | 2 +-
 .../edit-organization-step.component.scss                | 3 ---
 .../edit-organization-step.component.ts                  | 2 +-
 .../cloud-foundry-applications-signal.component.scss     | 5 -----
 .../cloud-foundry-applications-signal.component.ts       | 2 +-
 .../cloud-foundry-marketplace-signal.component.scss      | 5 -----
 .../cloud-foundry-marketplace-signal.component.ts        | 2 +-
 ...oud-foundry-organization-spaces-signal.component.scss | 5 -----
 ...cloud-foundry-organization-spaces-signal.component.ts | 2 +-
 .../cloud-foundry-space-apps-signal.component.scss       | 5 -----
 .../cloud-foundry-space-apps-signal.component.ts         | 2 +-
 .../cloud-foundry-space-routes-signal.component.scss     | 5 -----
 .../cloud-foundry-space-routes-signal.component.ts       | 2 +-
 ...foundry-space-service-instances-signal.component.scss | 5 -----
 ...d-foundry-space-service-instances-signal.component.ts | 2 +-
 ...ry-space-user-service-instances-signal.component.scss | 5 -----
 ...ndry-space-user-service-instances-signal.component.ts | 2 +-
 .../cloud-foundry-space-users.component.scss             | 5 -----
 .../cloud-foundry-space-users.component.ts               | 2 +-
 .../cloud-foundry-organizations-signal.component.scss    | 5 -----
 .../cloud-foundry-organizations-signal.component.ts      | 2 +-
 .../cf-routes/cloud-foundry-routes-signal.component.scss | 5 -----
 .../cf-routes/cloud-foundry-routes-signal.component.ts   | 2 +-
 .../cloud-foundry-services-signal.component.scss         | 5 -----
 .../cloud-foundry-services-signal.component.ts           | 2 +-
 .../cf/tabs/cf-users/cloud-foundry-users.component.scss  | 5 -----
 .../cf/tabs/cf-users/cloud-foundry-users.component.ts    | 2 +-
 .../detach-apps/detach-apps.component.scss               | 3 ---
 .../detach-apps/detach-apps.component.ts                 | 2 +-
 .../create-application-step1.component.scss              | 3 ---
 .../create-application-step1.component.ts                | 2 +-
 .../select-service/select-service.component.scss         | 3 ---
 .../select-service/select-service.component.ts           | 2 +-
 src/frontend/packages/core/src/styles.scss               | 9 +++++++++
 43 files changed, 30 insertions(+), 108 deletions(-)
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.scss
 delete mode 100644 src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.scss

diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts
index 790da7b3bf..24f1c4a5da 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step2/create-application-step2.component.ts
@@ -17,7 +17,7 @@ interface CreateApplicationForm {
 @Component({
 selector: 'app-create-application-step2',
   templateUrl: './create-application-step2.component.html',
-  styleUrls: ['./create-application-step2.component.scss'],
+  host: { class: 'app-host-flex-1' },
   providers: [
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
   ],
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts
index afc9b3252b..c25d009e7f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/create-application/create-application-step3/create-application-step3.component.ts
@@ -21,7 +21,7 @@ interface DomainHostForm {
 @Component({
   selector: 'app-create-application-step3',
   templateUrl: './create-application-step3.component.html',
-  styleUrls: ['./create-application-step3.component.scss'],
+  host: { class: 'app-host-flex-1' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.scss b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts
index c95ec7e68f..38def20189 100644
--- a/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/applications/deploy-application/deploy-application-step2-1/deploy-application-step2-1.component.ts
@@ -12,7 +12,7 @@ import { CommitListWrapperComponent } from './commit-list-wrapper/commit-list-wr
 @Component({
   selector: 'app-deploy-application-step2-1',
   templateUrl: './deploy-application-step2-1.component.html',
-  styleUrls: ['./deploy-application-step2-1.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: []
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts
index fd71ff4aa8..af02c0cd7f 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-organization/create-organization-step/create-organization-step.component.ts
@@ -20,7 +20,7 @@ interface CreateOrganizationForm {
 @Component({
   selector: 'app-create-organization-step',
   templateUrl: './create-organization-step.component.html',
-  styleUrls: ['./create-organization-step.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts
index 376d3f9dbd..f2fbc48204 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/add-space/create-space-step/create-space-step.component.ts
@@ -25,7 +25,7 @@ interface CreateSpaceForm {
 @Component({
   selector: 'app-create-space-step',
   templateUrl: './create-space-step.component.html',
-  styleUrls: ['./create-space-step.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts
index ef27d430d6..9db82d2d77 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/edit-organization/edit-organization-step/edit-organization-step.component.ts
@@ -30,7 +30,7 @@ interface EditOrganizationForm {
 @Component({
   selector: 'app-edit-organization-step',
   templateUrl: './edit-organization-step.component.html',
-  styleUrls: ['./edit-organization-step.component.scss'],
+  host: { class: 'app-host-flex-1' },
   providers: [
     getActiveRouteCfOrgSpaceProvider,
     CloudFoundryOrganizationService,
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts
index 4785228540..825e61443e 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-applications/cloud-foundry-applications-signal.component.ts
@@ -31,7 +31,7 @@ import type { StApp } from '../../../../services/endpoint-data/stratos-types';
 @Component({
   selector: 'app-cloud-foundry-applications-signal',
   templateUrl: './cloud-foundry-applications-signal.component.html',
-  styleUrls: ['./cloud-foundry-applications-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts
index 09a5a13824..50af6a9fff 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-marketplace/cloud-foundry-marketplace-signal.component.ts
@@ -27,7 +27,7 @@ import type { StServiceOffering } from '../../../../services/endpoint-data/strat
 @Component({
   selector: 'app-cloud-foundry-marketplace-signal',
   templateUrl: './cloud-foundry-marketplace-signal.component.html',
-  styleUrls: ['./cloud-foundry-marketplace-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts
index 41fc8bee05..79e988ae06 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/cloud-foundry-organization-spaces-signal.component.ts
@@ -32,7 +32,7 @@ import type { StSpace } from '../../../../../services/endpoint-data/stratos-type
 @Component({
   selector: 'app-cloud-foundry-organization-spaces-signal',
   templateUrl: './cloud-foundry-organization-spaces-signal.component.html',
-  styleUrls: ['./cloud-foundry-organization-spaces-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts
index 239da7779c..b7bbbf8b00 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-apps/cloud-foundry-space-apps-signal.component.ts
@@ -37,7 +37,7 @@ import type { StApp } from '../../../../../../../services/endpoint-data/stratos-
 @Component({
   selector: 'app-cloud-foundry-space-apps-signal',
   templateUrl: './cloud-foundry-space-apps-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-apps-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts
index 34f7a1b429..b2242ee829 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-routes/cloud-foundry-space-routes-signal.component.ts
@@ -34,7 +34,7 @@ import type { StApp, StRoute } from '../../../../../../../services/endpoint-data
 @Component({
   selector: 'app-cloud-foundry-space-routes-signal',
   templateUrl: './cloud-foundry-space-routes-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-routes-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts
index dbe5b53312..bf4ddf2df9 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-service-instances/cloud-foundry-space-service-instances-signal.component.ts
@@ -36,7 +36,7 @@ import type { StServiceInstance } from '../../../../../../../services/endpoint-d
 @Component({
   selector: 'app-cloud-foundry-space-service-instances-signal',
   templateUrl: './cloud-foundry-space-service-instances-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-service-instances-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts
index 349f51daa0..5b0160da59 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-user-service-instances/cloud-foundry-space-user-service-instances-signal.component.ts
@@ -37,7 +37,7 @@ import type { StServiceInstance } from '../../../../../../../services/endpoint-d
 @Component({
   selector: 'app-cloud-foundry-space-user-service-instances-signal',
   templateUrl: './cloud-foundry-space-user-service-instances-signal.component.html',
-  styleUrls: ['./cloud-foundry-space-user-service-instances-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts
index 7d623f1eab..1c8d92377a 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cf-organization-spaces/tabs/cloud-foundry-space-users/cloud-foundry-space-users.component.ts
@@ -35,7 +35,7 @@ import type { StUser, StUserSpaceRole } from '../../../../../../../services/endp
 @Component({
   selector: 'app-cloud-foundry-space-users',
   templateUrl: './cloud-foundry-space-users.component.html',
-  styleUrls: ['./cloud-foundry-space-users.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts
index 0e31f6b7fa..3f94218119 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-organizations/cloud-foundry-organizations-signal.component.ts
@@ -37,7 +37,7 @@ import type { StOrg } from '../../../../services/endpoint-data/stratos-types';
 @Component({
   selector: 'app-cloud-foundry-organizations-signal',
   templateUrl: './cloud-foundry-organizations-signal.component.html',
-  styleUrls: ['./cloud-foundry-organizations-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts
index 3dae94b9f5..8d655461b1 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-routes/cloud-foundry-routes-signal.component.ts
@@ -36,7 +36,7 @@ import type { StApp, StRoute } from '../../../../services/endpoint-data/stratos-
 @Component({
   selector: 'app-cloud-foundry-routes-signal',
   templateUrl: './cloud-foundry-routes-signal.component.html',
-  styleUrls: ['./cloud-foundry-routes-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts
index 0039aff75c..32dcd989b8 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-services/cloud-foundry-services-signal.component.ts
@@ -32,7 +32,7 @@ import type { StServiceInstance } from '../../../../services/endpoint-data/strat
 @Component({
   selector: 'app-cloud-foundry-services-signal',
   templateUrl: './cloud-foundry-services-signal.component.html',
-  styleUrls: ['./cloud-foundry-services-signal.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.scss b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.scss
deleted file mode 100644
index 8b9f52ec88..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts
index ca2d4992b9..74e70b61bc 100644
--- a/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/cf/tabs/cf-users/cloud-foundry-users.component.ts
@@ -26,7 +26,7 @@ import type { StUser, StUserOrgRole, StUserSpaceRole } from '../../../../service
 @Component({
   selector: 'app-cloud-foundry-users',
   templateUrl: './cloud-foundry-users.component.html',
-  styleUrls: ['./cloud-foundry-users.component.scss'],
+  host: { class: 'app-host-fill' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.scss b/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts b/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts
index 63a55c8240..877cde83a6 100644
--- a/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/features/services/detach-service-instance/detach-apps/detach-apps.component.ts
@@ -30,7 +30,7 @@ interface DetachAppRow {
 @Component({
   selector: 'app-detach-apps',
   templateUrl: './detach-apps.component.html',
-  styleUrls: ['./detach-apps.component.scss'],
+  host: { class: 'app-host-flex-1' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [],
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts
index d5333d4541..6c6bc56ed4 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/create-application/create-application-step1/create-application-step1.component.ts
@@ -18,7 +18,7 @@ import { CfOrgSpaceDataService } from '../../../data-services/cf-org-space-servi
 @Component({
   selector: 'app-create-application-step1',
   templateUrl: './create-application-step1.component.html',
-  styleUrls: ['./create-application-step1.component.scss'],
+  host: { class: 'app-host-flex-1' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.scss b/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.scss
deleted file mode 100644
index 5f81e6c60e..0000000000
--- a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  flex: 1;
-}
diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts b/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts
index d2d1481ce5..8a4c2f08cf 100644
--- a/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts
+++ b/src/frontend/packages/cloud-foundry/src/shared/components/select-service/select-service.component.ts
@@ -33,7 +33,7 @@ interface SelectServiceForm {
 @Component({
   selector: 'app-select-service',
   templateUrl: './select-service.component.html',
-  styleUrls: ['./select-service.component.scss'],
+  host: { class: 'app-host-flex-1' },
   providers: [
     ServicesWallService
   ],
diff --git a/src/frontend/packages/core/src/styles.scss b/src/frontend/packages/core/src/styles.scss
index 021e126d56..ca6324914e 100644
--- a/src/frontend/packages/core/src/styles.scss
+++ b/src/frontend/packages/core/src/styles.scss
@@ -35,3 +35,12 @@ body {
 .dark-theme-supported {
   @apply hidden;
 }
+
+// Host-element layout utilities. Applied via `host: { class: '...' }` in
+// component decorators to eliminate single-rule :host stylesheets.
+.app-host-fill {
+  @apply block h-full min-h-0;
+}
+.app-host-flex-1 {
+  @apply flex-1;
+}

From cf38bf1cd47975eca27c71780478b4b7aadad3dd Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 07:48:15 -0700
Subject: [PATCH 26/27] Migrate 10 Class A SCSS files in core+k8s (batch 13)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move single-rule :host stylesheets to host: { class: '...' } in the
@Component decorator and inline descendant utilities into templates;
delete the .scss files; drop styleUrls entries.

Files migrated:
- core: app.component, endpoints-page, endpoints-signal-list,
  endpoints-missing, list-cards/card, list-generics/list-view,
  monaco-editor
- kubernetes: kube-config-import, kube-config-selection,
  kubernetes-node-info-card

Template inlines:
- app.component.html: .user-id → .hidden (drops dead .user-id
  rule under emulated encapsulation)
- endpoints-missing: <app-no-content-message> gets flex w-full
  relative overflow-visible classes (replaces descendant rule)
- monaco-editor: #editorContainer gets w-full h-full min-h-[200px]
  utilities directly (drops .monaco-editor-container class)

app.component's html/body/material-app rule block dropped — under
emulated encapsulation it never applied; global html/body styles
already live in core/src/styles.scss.

endpoints-page's redundant app-endpoints-signal-list descendant
rule is dropped via .scss deletion; child component's host class
now carries the same flex utilities.

Build green: 0 errors, 14.4s.
---
 .../packages/core/src/app.component.html      |  2 +-
 .../packages/core/src/app.component.scss      | 19 -------------------
 .../packages/core/src/app.component.ts        |  2 +-
 .../endpoints-page.component.scss             | 13 -------------
 .../endpoints-page.component.ts               |  2 +-
 .../endpoints-signal-list.component.scss      |  6 ------
 .../endpoints-signal-list.component.ts        |  2 +-
 .../endpoints-missing.component.html          |  2 +-
 .../endpoints-missing.component.scss          | 15 ---------------
 .../endpoints-missing.component.ts            |  2 +-
 .../list/list-cards/card/card.component.scss  |  4 ----
 .../list/list-cards/card/card.component.ts    |  2 +-
 .../list-view/list-view.component.scss        |  6 ------
 .../list-view/list-view.component.ts          |  2 +-
 .../monaco-editor.component.html              |  2 +-
 .../monaco-editor.component.scss              | 11 -----------
 .../monaco-editor/monaco-editor.component.ts  |  2 +-
 .../kube-config-import.component.scss         |  5 -----
 .../kube-config-import.component.ts           |  2 +-
 .../kube-config-selection.component.scss      |  5 -----
 .../kube-config-selection.component.ts        |  2 +-
 .../kubernetes-node-info-card.component.scss  |  3 ---
 .../kubernetes-node-info-card.component.ts    |  2 +-
 23 files changed, 13 insertions(+), 100 deletions(-)
 delete mode 100644 src/frontend/packages/core/src/app.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.scss
 delete mode 100644 src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.scss
 delete mode 100644 src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.scss
 delete mode 100644 src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.scss

diff --git a/src/frontend/packages/core/src/app.component.html b/src/frontend/packages/core/src/app.component.html
index cfb4698d9b..8712b41a3a 100644
--- a/src/frontend/packages/core/src/app.component.html
+++ b/src/frontend/packages/core/src/app.component.html
@@ -2,6 +2,6 @@
 
   <router-outlet></router-outlet>
   @if (userId$ | async; as userId) {
-    <div class="user-id" id="__stratos-userid__">{{userId}}</div>
+    <div class="hidden" id="__stratos-userid__">{{userId}}</div>
   }
 </span>
\ No newline at end of file
diff --git a/src/frontend/packages/core/src/app.component.scss b/src/frontend/packages/core/src/app.component.scss
deleted file mode 100644
index cfe82df042..0000000000
--- a/src/frontend/packages/core/src/app.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-html,
-body,
-material-app {
-  height: 100%;
-  margin: 0;
-  width: 100%;
-}
-
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-  height: 100vh;
-  min-height: 0;
-}
-
-.user-id {
-  display: none;
-}
diff --git a/src/frontend/packages/core/src/app.component.ts b/src/frontend/packages/core/src/app.component.ts
index fc813bbe2d..042221abaf 100644
--- a/src/frontend/packages/core/src/app.component.ts
+++ b/src/frontend/packages/core/src/app.component.ts
@@ -15,7 +15,7 @@ import { LoggedInService } from './logged-in.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  host: { class: 'flex flex-col flex-1 h-screen min-h-0' },
   standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.scss b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.scss
deleted file mode 100644
index 0fcca77f9d..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-app-endpoints-signal-list {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts
index 05444926ea..bdfd01018e 100644
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-page.component.ts
@@ -36,7 +36,7 @@ import { EndpointsSignalListComponent } from './endpoints-signal-list.component'
 @Component({
   selector: 'app-endpoints-page',
   templateUrl: './endpoints-page.component.html',
-  styleUrls: ['./endpoints-page.component.scss'],
+  host: { class: 'flex flex-col h-full min-h-0' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.scss b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.scss
deleted file mode 100644
index bdc879646b..0000000000
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts
index 9078aea4a3..61dd3b7ecd 100644
--- a/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts
+++ b/src/frontend/packages/core/src/features/endpoints/endpoints-page/endpoints-signal-list.component.ts
@@ -42,7 +42,7 @@ import { EndpointsSignalConfigService } from './endpoints-signal-config.service'
 @Component({
   selector: 'app-endpoints-signal-list',
   templateUrl: './endpoints-signal-list.component.html',
-  styleUrls: ['./endpoints-signal-list.component.scss'],
+  host: { class: 'flex flex-col flex-1 min-h-0' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, ListSubNavComponent, SignalListComponent],
diff --git a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html
index 60e1e18be0..5890cd6f94 100644
--- a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html
+++ b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.html
@@ -1,5 +1,5 @@
 @if (noContent$ | async; as message) {
-  <app-no-content-message [icon]="'settings_ethernet'" [hidden]="!message"
+  <app-no-content-message class="flex w-full relative overflow-visible" [icon]="'settings_ethernet'" [hidden]="!message"
     [firstLine]="message.firstLine" [secondLine]="showDirectToEndpointMessage ? message.secondLine : null"
     [toolbarLink]="message.toolbarLink" toolbarAlign="stratos-add-endpoint">
   </app-no-content-message>
diff --git a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.scss b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.scss
deleted file mode 100644
index 1d6b492084..0000000000
--- a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-app-no-content-message {
-  display: flex;
-  width: 100%;
-  position: relative;
-  overflow: visible;
-  &[hidden] {
-    display: none;
-  }
-}
-
-:host {
-  display: block;
-  position: relative;
-  overflow: visible;
-}
diff --git a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts
index 56ae971fe4..d7905860fa 100644
--- a/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts
+++ b/src/frontend/packages/core/src/shared/components/endpoints-missing/endpoints-missing.component.ts
@@ -19,7 +19,7 @@ export interface EndpointMissingMessageParts {
 @Component({
   selector: 'app-endpoints-missing',
   templateUrl: './endpoints-missing.component.html',
-  styleUrls: ['./endpoints-missing.component.scss'],
+  host: { class: 'block relative overflow-visible' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.scss b/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.scss
deleted file mode 100644
index a85c48c037..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-
-:host {
-  position: relative;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts b/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts
index 8b89b3b5c5..1cb57bf64a 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-cards/card/card.component.ts
@@ -18,7 +18,7 @@ interface ISetupData<T> {
 @Component({
   selector: 'app-card',
   templateUrl: './card.component.html',
-  styleUrls: ['./card.component.scss'],
+  host: { class: 'relative' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: []
diff --git a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.scss b/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.scss
deleted file mode 100644
index bdc879646b..0000000000
--- a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
diff --git a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts b/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts
index 76dfd5dcab..b36026a580 100644
--- a/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts
+++ b/src/frontend/packages/core/src/shared/components/list/list-generics/list-view/list-view.component.ts
@@ -8,7 +8,7 @@ import { ListConfigProvider } from '../list-config-provider.types';
 @Component({
   selector: 'app-list-view',
   templateUrl: './list-view.component.html',
-  styleUrls: ['./list-view.component.scss'],
+  host: { class: 'flex flex-col flex-1 min-h-0' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html
index 167db2f350..c795a7b7a0 100644
--- a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html
+++ b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.html
@@ -1 +1 @@
-<div #editorContainer class="monaco-editor-container"></div>
+<div #editorContainer class="w-full h-full min-h-[200px]"></div>
diff --git a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.scss b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.scss
deleted file mode 100644
index 298a713de1..0000000000
--- a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.monaco-editor-container {
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-}
diff --git a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts
index afbdee40f3..e6a3666194 100644
--- a/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts
+++ b/src/frontend/packages/core/src/shared/components/monaco-editor/monaco-editor.component.ts
@@ -34,7 +34,7 @@ export interface MonacoEditorOptions {
 @Component({
   selector: 'app-monaco-editor',
   templateUrl: './monaco-editor.component.html',
-  styleUrls: ['./monaco-editor.component.scss'],
+  host: { class: 'block w-full h-full' },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.scss
deleted file mode 100644
index f8ee97585c..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-:host {
-  @apply flex flex-1;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts
index d582f7273e..252aba3070 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-import/kube-config-import.component.ts
@@ -66,7 +66,7 @@ function createSignalWrapper<T>(initialValue: T) {
 @Component({
 selector: 'app-kube-config-import',
   templateUrl: './kube-config-import.component.html',
-  styleUrls: ['./kube-config-import.component.scss'],
+  host: { class: 'flex flex-1' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.scss
deleted file mode 100644
index f8ee97585c..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@reference 'tailwindcss';
-
-:host {
-  @apply flex flex-1;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts
index 3dcd375cda..e2b7afe722 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/kube-config-registration/kube-config-selection/kube-config-selection.component.ts
@@ -31,7 +31,7 @@ export interface KubeConfigTableListDataSource extends ITableListDataSource<Kube
 @Component({
 selector: 'app-kube-config-selection',
   templateUrl: './kube-config-selection.component.html',
-  styleUrls: ['./kube-config-selection.component.scss'],
+  host: { class: 'flex flex-1' },
   providers: [
     KubeConfigHelper
   ],
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.scss b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.scss
deleted file mode 100644
index 683ae23fae..0000000000
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  height: 100%;
-}
diff --git a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts
index f7cde03002..5f14007547 100644
--- a/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts
+++ b/src/frontend/packages/kubernetes/src/kubernetes/list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-info-card/kubernetes-node-info-card.component.ts
@@ -7,7 +7,7 @@ import { KubernetesNodeService } from '../../../../services/kubernetes-node.serv
 @Component({
   selector: 'app-kubernetes-node-info-card',
   templateUrl: './kubernetes-node-info-card.component.html',
-  styleUrls: ['./kubernetes-node-info-card.component.scss'],
+  host: { class: 'h-full' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [

From a7fe88d8d6a19886e33da74e821a6bef153e1d40 Mon Sep 17 00:00:00 2001
From: Norman Abramovitz <norman-abramovitz@users.noreply.github.com>
Date: Thu, 21 May 2026 08:59:50 -0700
Subject: [PATCH 27/27] Fix entity-favorite-star spec selector after class
 rename

Batch 4 (00934676ed) renamed the clickable div's class from
.favorite-star to utility classes (flex items-center cursor-pointer).
The spec still queried for .favorite-star, returning null, which
caused all 3 click tests to throw TypeError: Cannot read properties
of null (reading 'click').

Switch the spec's three element.querySelector call sites from
'.favorite-star' to '[role="button"]'. The accessibility attribute
is already on the same div and is semantically stable.
---
 .../entity-favorite-star.component.spec.ts                  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts
index da0ab6f9e2..4c2f46052d 100644
--- a/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts
+++ b/src/frontend/packages/core/src/core/entity-favorite-star/entity-favorite-star.component.spec.ts
@@ -90,7 +90,7 @@ describe('EntityFavoriteStarComponent', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const starEl: HTMLElement = element.querySelector('.favorite-star');
+    const starEl: HTMLElement = element.querySelector('[role="button"]');
     starEl.click();
     fixture.detectChanges();
     await fixture.whenStable();
@@ -123,7 +123,7 @@ describe('EntityFavoriteStarComponent', () => {
       expect(element.textContent).toContain('star');
 
       // Click the star to trigger confirmation dialog
-      const starEl: HTMLElement = element.querySelector('.favorite-star');
+      const starEl: HTMLElement = element.querySelector('[role="button"]');
       starEl.click();
       fixture.detectChanges();
       await vi.advanceTimersByTimeAsync(0);
@@ -175,7 +175,7 @@ describe('EntityFavoriteStarComponent', () => {
       await vi.advanceTimersByTimeAsync(0);
 
       // Click the star
-      const starEl: HTMLElement = element.querySelector('.favorite-star');
+      const starEl: HTMLElement = element.querySelector('[role="button"]');
       starEl.click();
       fixture.detectChanges();
       await vi.advanceTimersByTimeAsync(0);