From a8b8fb7748ac356041cb4bf3ff1b214baaf5ff65 Mon Sep 17 00:00:00 2001
From: "cubecraft-agents[bot]"
 <3458173+cubecraft-agents[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 12:32:21 +0000
Subject: [PATCH] feat(CUB-52): [Control Center] Responsive Hub Grid CSS

---
 .../src/app/pages/hub/hub-page.component.scss | 31 +++++++++++++++++++
 .../src/app/pages/hub/hub-page.component.ts   | 13 +-------
 2 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/app/pages/hub/hub-page.component.scss

diff --git a/frontend/src/app/pages/hub/hub-page.component.scss b/frontend/src/app/pages/hub/hub-page.component.scss
new file mode 100644
index 0000000..2cefd71
--- /dev/null
+++ b/frontend/src/app/pages/hub/hub-page.component.scss
@@ -0,0 +1,31 @@
+// ============================================================================
+// Hub Page — Responsive AgentCard Grid
+// Per CUB-52: 2×2 grid on ≥ 1024px (kiosk), single-column on < 1024px (mobile)
+// ============================================================================
+
+.hub-page {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--cc-card-gap);
+  padding: var(--cc-section-padding);
+  min-height: 400px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.hub-page__placeholder {
+  color: var(--cc-on-surface-variant);
+  font-size: 16px;
+  grid-column: 1 / -1;
+  text-align: center;
+  align-self: center;
+}
+
+// ---------------------------------------------------------------------------
+// Kiosk / Desktop: 2×2 AgentCard grid
+// ---------------------------------------------------------------------------
+@media (min-width: 1024px) {
+  .hub-page {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/pages/hub/hub-page.component.ts b/frontend/src/app/pages/hub/hub-page.component.ts
index 7819be4..1749b94 100644
--- a/frontend/src/app/pages/hub/hub-page.component.ts
+++ b/frontend/src/app/pages/hub/hub-page.component.ts
@@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
     </div>
   `,
-  styles: [`
-    .hub-page {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-    }
-    .hub-page__placeholder {
-      color: var(--cc-on-surface-variant);
-      font-size: 16px;
-    }
-  `],
+  styleUrl: './hub-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HubPageComponent {}
\ No newline at end of file
-- 
2.53.0