From f3d271ded22a45e701e68932bee0ec4fa40810f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20K=C3=BCng?= <joekueng05@gmail.com>
Date: Fri, 6 Feb 2026 13:40:44 +0100
Subject: [PATCH] feat(web): update color selector

---
 .../calculator/calculator-page.component.scss | 27 +++++++++++++------
 .../app-card/app-card.component.scss          |  7 +++++
 .../color-selector.component.scss             | 16 +++++++++++
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/features/calculator/calculator-page.component.scss b/frontend/src/app/features/calculator/calculator-page.component.scss
index 8d2160a..02cdec0 100644
--- a/frontend/src/app/features/calculator/calculator-page.component.scss
+++ b/frontend/src/app/features/calculator/calculator-page.component.scss
@@ -18,8 +18,19 @@
     }
 }
 
-.col-input, .col-result {
-    min-width: 0; /* Prevent grid blowout */
+.col-input {
+    min-width: 0;
+}
+
+.col-result {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+
+    /* Make children (specifically app-card) stretch */
+    > * {
+        flex: 1;
+    }
 }
 
 /* Mode Selector (Segmented Control style) */
@@ -57,17 +68,17 @@
 
 .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
 
-.loading-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 300px; /* Match typical result height */
-}
 
 .loader-content {
     text-align: center;
     max-width: 300px;
     margin: 0 auto;
+    
+    /* Center content vertically within the stretched card */
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .loading-title {
diff --git a/frontend/src/app/shared/components/app-card/app-card.component.scss b/frontend/src/app/shared/components/app-card/app-card.component.scss
index 4488777..c0e7484 100644
--- a/frontend/src/app/shared/components/app-card/app-card.component.scss
+++ b/frontend/src/app/shared/components/app-card/app-card.component.scss
@@ -1,3 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
 .card {
   background-color: var(--color-bg-card);
   border-radius: var(--radius-lg);
@@ -5,6 +10,8 @@
   box-shadow: var(--shadow-sm);
   padding: var(--space-6);
   transition: box-shadow 0.2s;
+  height: 100%;
+  box-sizing: border-box;
   
   &:hover {
     box-shadow: var(--shadow-md);
diff --git a/frontend/src/app/shared/components/color-selector/color-selector.component.scss b/frontend/src/app/shared/components/color-selector/color-selector.component.scss
index 3bf8b75..3c487dc 100644
--- a/frontend/src/app/shared/components/color-selector/color-selector.component.scss
+++ b/frontend/src/app/shared/components/color-selector/color-selector.component.scss
@@ -58,6 +58,22 @@
     border-style: solid;
     border-color: transparent transparent white transparent;
   }
+
+  /* Mobile Fixed Positioning */
+  @media (max-width: 768px) {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 280px; /* Provide enough width for touch targets */
+    max-width: 90vw; /* Safety constraint */
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Stronger shadow for modal feel */
+
+    /* Hide arrow on mobile since it's detached from trigger */
+    &::before {
+      display: none;
+    }
+  }
 }
 
 .category {